关于跨浏览器测试那点事

开发 前端
本文讲述了与跨浏览器测试有关的各种问题与知识,包括渲染,平台,设备以及JavaScript引擎,并且针对不同的JavaScript引擎进行性能测试。

Web设计与开发者的一个重要工作环节是跨浏览器测试,谁让我们生活在这个既幸福又痛苦的时代,有那么多浏览器摆在我们面前,还有那个噩梦般总也摆脱不掉的 IE6。(51CTO推荐阅读:10款浏览器Web应用开发性能横向比较

梦幻五组合

IE独霸天下的那些日子,Web设计师不时陷入IE同它竞争者的口水战,然而,当一些新的,注重Web标准的浏览器出现时,事情发生了改变,IE的统治地位受到了挑战。时过境迁,移动浏览器与新渲染引擎的出现,使Web设计者开始考虑跨浏览器测试的问题。如今,Web设计者逐渐将目标固定在5或6个主要浏览器,然而事情并没有了结,一劳永逸是一个永远的梦。

浏览器市场

尽管浏览器市场被5大浏览器主导,但是,也不能忽视那个占0.87% 的其它,一般来说,跨浏览器测试是针对不同的渲染引擎,假如你已经针对Trident,Gecko,Webkit,Presto等主流渲染引擎做过了测试,似乎可以说已经是比较安全了。然而,针对更广泛的设备与平台的测试仍然必要,可以帮你发现很多潜在的问题。

5大浏览器

基础测试

目前,一个严重的问题是设备相关性。Apple一意孤行拒绝在iPhone和iPad中支持Flash,Apple与Adobe相互攻击的声音不绝于耳。尽管Flash自己负责内容的渲染,但,仅仅在主流浏览器进行测试仍不足发现潜在的问题,拓展你的测试范围势在必行。

基础测试 

Flash自己渲染内容,但并不是所有浏览器都支持Flash。另一个问题是渲染引擎的版本,支持最新版本固然重要,然而很多设备仍在使用旧版本的渲染引擎,这要求我们同时针对渲染引擎的新旧版本进行测试。

基础测试

Internet Explorer 6.0使用的是BUG重重的旧Trident渲染引擎。渲染引擎的问题不仅存在于版本之间,还有不同的平台和设备,毫无疑问,针对各种平台,各种设备的测试会让你疯掉。为小屏幕进行设计着实不易,尤其当不同设备间还没有达成一致的时候。这在桌面系统中叶存在,同一个渲染引擎,在不同平台,仍有细微差别。

基础测试

A List Apart 对渲染差异十分重视,他们干脆为移动设备设计了单独的版本。除了渲染差异,跨浏览器兼容还有一个更重要的问题:javaScript引擎。早期,人们对JavaScript唯一问题是,是否启用它,然而现在,那些拥有相同渲染引擎的不同浏览器往往拥有差别巨大的JavaScript引擎。你需要针对不同浏览器测试JavaScript的性能,尤其当你使用了大量jQuery绚丽效果的时候。

基础测试

这是Chrome试验站点,用来展示Chrome的JavaScript的性能。最后,是可访问性问题。你必须明白,当一些有某些方面的障碍的人访问你的站点的时候,可访问性问题会迫使他们只使用某种浏览器,在这种情形,你要记住,不能忽视这些常常被遗忘的人。

基础测试

Opera尽管只占很小的市场份额,但它的语音功能对那些有特殊需求的人士来说,意味着全部。

#p#

长远视角

可访问性问题,不同的JavaScript引擎,跨平台问题,渲染的差异,技术依赖等等问题会让你自叹命苦,然而这还不够,你还要研究你的目标用户。花一些时间和你的访问者进行沟通,了结他们的需求。比如,使用投票统计你的访问者所使用的浏览器分布,最终你会发现,你可能还要针对移动浏览进行设计,或者为iPhone设计。

Browser 
类似的统计可以让你了解你的站点访问者的浏览器分布

不同平台的渲染引擎

以下是移动和桌面平台的浏览器渲染引擎清单,我们会看到越来越多的浏览器面世,因此,要为未来考虑。

移动和桌面平台的浏览器渲染引擎清单 
桌面和移动平台下,都有相当数量的渲染引擎

以下浏览器使用Trident引擎

Trident引擎

以下浏览器使用Gecko引擎

Gecko引擎

以下浏览器使用Webkit引擎

Webkit引擎

而使用Presto引擎的浏览器则主要限于Opera

Opera

总结

或许你的网站没有任何错误,或许在每一个场合都看上去很棒,然而,对于真正的跨平台兼容,5大浏览器测试仍然不够。如果本文只教会你一件事,那就是,花时间同你的访问者沟通,分析他们的需求。另外,花时间测试各种平台,各种设备的每个渲染引擎,针对不同的JavaScript引擎进行性能测试。在一个Web主导的世界,花时间让你的站点延伸到尽可能多的人,是值得的。

【编辑推荐】

  1. 主流浏览器CSS 3和HTML 5兼容清单
  2. HTML 5与浏览器们不得不说的故事
  3. 10款浏览器Web应用开发性能横向比较 
责任编辑:王晓东 来源: webdesignerdepot.com
相关推荐

2011-04-14 14:23:06

软件测试测试

2022-04-07 09:00:00

跨浏览器测试自动化服务异常

2009-03-23 08:50:53

浏览器Expression

2010-08-17 14:22:47

JavaScript兼容性

2020-07-30 13:17:26

浏览器测试工具网站兼容性

2016-12-06 08:35:47

浏览器内核Gecko

2014-11-04 09:48:28

2014-06-30 09:55:34

2019-02-15 15:15:59

ChromeJavascriptHtml

2011-08-30 14:59:34

Qt数据库

2011-05-24 16:20:27

虚函数

2020-07-06 12:04:18

浏览器内存测试

2010-09-15 09:12:03

JavaScript浏览器兼容

2019-08-01 09:00:00

浏览器测试工具

2010-06-09 13:35:36

浏览器兼容测试

2010-09-14 14:18:09

CSS跨浏览器开发

2023-04-07 08:25:33

JavaScript浏览器映射

2022-04-29 09:11:14

CORS浏览器

2015-11-05 18:03:15

虚拟化云计算资源池

2013-02-21 15:56:18

浏览器遨游
点赞
收藏

51CTO技术栈公众号