Web 设计与开发师的一个重要工作环节是跨浏览器测试,谁让我们生活在这个既幸福又痛苦的时代,有那么多浏览器摆在我们面前,还有那个噩梦般总也摆脱不掉的 IE6。本文讲述了与跨浏览器测试有关的各种问题与知识,包括渲染,平台,设备以及 JavaScript 引擎。

梦幻五组合

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

尽管浏览器市场被5大浏览器主导,但是,也不能忽视那个占 0.87% 的其它。

一般来说,跨浏览器测试是针对不同的渲染引擎,假如你已经针对 Trident,Gecko,Webkit,Presto 等主流渲染引擎做过了测试,似乎可以说已经是比较安全了。然而,针对更广泛的设备与平台的测试仍然必要,可以帮你发现很多潜在的问题。

Trident (Internet Explorer), Gecko (Firefox), Webkit (Chrome and Safari) and Presto (Opera).

基础测试

目前,一个严重的问题是设备相关性。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 尽管只占很小的市场份额,但它的语音功能对那些有特殊需求的人士来说,意味着全部

长远视角

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

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

不同平台的渲染引擎

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

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

以下浏览器使用 Trident 引擎

以下浏览器使用 Gecko 引擎

以下浏览器使用 Webkit 引擎

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

总结

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

本文国际来源:webdesignerdepot.com Browser Testing: A Family Tree (作者:Alexander Dawson

中文编译来源:锐商企业CMS 网站内容管理系统 官方网站

关于跨浏览器测试那点事相关推荐

  1. 为什么跨浏览器测试很重要?7款跨浏览器测试工具请查收

    随着互联网的广泛使用,浏览器的数目也在逐步增加,网站数量以及用户群体亦如此.因此在搭建一个网站或web应用程序时,需要测试其与不同浏览器的兼容性,这项工作不容忽略.在测试过程中,跨浏览器测试工具可谓是 ...

  2. 前端开发-跨浏览器测试工具

    前端开发工作一项重要测试是使用跨浏览器检查工具,开发的代码是否符合浏览器的要求,推荐几个跨浏览器检查工具 1.BrowserShots 支持多种浏览器,包括一些旧浏览器,如 Lynx.Konquero ...

  3. 在 Selenium 中使用 Lambdatest 进行跨浏览器测试

    Lambdatest是一个在线平台,它允许你在2000多个浏览器和操作系统上实时执行自动化和实时交互的跨浏览器测试. 使用Lambdatest可以测试公共网站和本地托管的应用程序.你只需要连接Lamb ...

  4. 推荐17款最好用的跨浏览器测试工具

    市面上有很多不同的浏览器,每种浏览器都有数百万用户.因此,在构建一个网站或 Web 应用程序时,就需要测试它与不同浏览器的兼容性.最好.最方便的方法是使用跨浏览器检查工具. 如果你正在寻找解决方案,可 ...

  5. 10款最佳跨浏览器测试工具,建议收藏

    1.前言 跨浏览器测试工具对于检查您的网络应用程序在桌面端.移动端.平板电脑和其他设备类别中是否正常工作至关重要.这些工具检查 UI 不一致.验证代码.跨 Chrome.Firefox.IE.Edge ...

  6. Selenium+Python3之:多线程进行跨浏览器测试

    python多线程跨浏览器测试 1.引言 2.跨浏览器操作及定义 2.1 啥是跨浏览器测试 2.2 为啥要进行跨浏览器测试 2.3 跨浏览器测试执行 3.代码编写实战 1.引言 在WebUI自动化方面 ...

  7. 10个免费的顶级跨浏览器测试工具

    1.Browsera Browsera 可以测试和报告在您的网站上的跨浏览器布局的差异和脚本错误. Browsera不同于其他跨浏览器测试服务.其他服务,如Litmus,Browsershots,Br ...

  8. Python 多线程 Selenium 跨浏览器测试

    前言 在 web 测试中,不可避免的一个测试就是浏览器兼容性测试,在没有自动 化测试前,我们总是苦逼的在一台或多台机器上安装 N 种浏览器,然后手工在不同的浏览器上验证主业务流程和关键功能模块功能,以 ...

  9. 10款最佳跨浏览器测试工具

    目录 1.前言 2.BitBar 3.LambdaTest 4.HeadSpin 5.Eggplant 6.Virtuoso 7.Selenium Box 8.TestGrid 9.Browsersh ...

最新文章

  1. Android中图表AChartEngine学习使用与例子
  2. [原创]一种自动地将继承自NSObject的自定义类序列化成JSON的方法
  3. JZOJ 5629. 【NOI2018模拟4.4】Map
  4. 非刚性人脸跟踪 —— 人脸跟踪
  5. log4j2 无日志记录_在Log4j2中更好地执行非日志记录器调用
  6. 批处理 java环境_java环境配置简单批处理方法一键OK
  7. jQuery 之 $(this) 出了什么问题?
  8. 通过例子理解 k8s 架构 - 每天5分钟玩转 Docker 容器技术(122)
  9. ydisk安卓版本_Y Disk HD
  10. Spring常用注解小结
  11. Linux 环境下思源黑体字体与 Java 之间的兼容性问题的解决(补充说明)
  12. 【Uniapp 原生插件】芯烨云打印机插件
  13. Ubuntu18.04 自带桌面共享配置
  14. 连接局域网内的oracle
  15. oracle教程课件,Oracle入门教程(PPT课件)
  16. sqlserver分组统计最新一条数据
  17. 微信小程序存在的风险_微信小程序开发技术风险存在,如何规避是重点
  18. Java编程:颜色色带图片的生成
  19. 数据挖掘之关联规则挖掘的一些定义
  20. C++语法整理(From GitHub)

热门文章

  1. RFP注册财务策划师一个月工资能有多少?
  2. 手摇机械计算机原理,科学网-计算尺和手摇计算器-胡懋仁的博文
  3. walden词频统计0
  4. 如何保证服务不受第三方影响?
  5. 牛鞭效应matlab代码,基于控制工程的牛鞭效应建模与仿真研究
  6. vivado:生成比特流报错-约束Bank电平冲突
  7. uaf - pwnable
  8. java - jinfo jvm配置信息工具
  9. TypeError: Cannot read property ‘_wrapper‘ of undefined
  10. 新能源行业硫酸镍硫酸锂溶液除钙镁