浅谈浏览器兼容性问题

摘要

在互联网信息时代的今天，浏览器是我们使用最广泛的软件。本文通过介绍四大主流浏览器的渲染内核——Trident、 Gecko、WebKit和Presto，引出浏览器兼容性问题的分析，介绍一些主流的浏览器兼容性测试工具，并提出前端代码规范性检查的解决思路。

背景

     浏览器是我们获取互联网信息的重要工具。访问同一网站，如果使用不同的浏览器，会发现有些功能无法使用、有些内容无法显示、有些内容错位等问题。这些就是浏览器兼容性问题，同一网站在不同浏览器、不同设备上有不同的效果。该问题不但影响网站的用户体现，而且影响网站的正常访问和使用。

随着我行有越来越多的业务和产品，通过网站的方式供用户访问使用，探索和研究浏览器兼容性问题，提升浏览器兼容性测试的工作效率，具有一定的价值。本文从浏览器内核介绍入手，分析导致浏览器兼容性问题的原因，然后介绍目前业界使用的兼容性问题测试工具，并提出利用静态代码扫描工具、提升代码规范性的角度减少兼容性问题的发生，为做好浏览器兼容性测试工作打好基础。

一浏览器内核介绍

浏览器的主要功能是向服务器请求数据和资源，并在浏览器窗口对数据和资源进行展示。而浏览器对数据和资源的展示分析是通过浏览器内核来解析和处理。

根据功能的不同，浏览器内核可分为两部分：渲染引擎(layout engineer 或者 Rendering Engine)和JavaScript引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。

图1浏览器组件图

当前主流渲染内核有Trident、 Gecko、WebKit、 Presto。下面分别介绍四大渲染内核：

（1）Trident（代表浏览器Internet Explorer），它的引擎被设计成一个模块，使得其他软件开发人员很容易将网页浏览功能加到他们自行开发的应用程序里，其接口内核设计相当成熟，它所支持的特性有: HTML4.01、HTML5集、CSSLevel 1 ( 不完全支持 CSS2和3) 、JavaScript1.5、DOMLevel 1( 不完全支持Level 2)。因此，在早期IE占有大量的市场份额，有很多网页是根据这个Trident的标准来编写的，但是Trident内核对真正的网页标准支持不是很好，同时存在许多安全Bug。

（2）Gecko（代表浏览器Mozilla Firefox），它的代码完全开源，可扩展性强，同时它也是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用，它支持的特性有: HTML4. 0、 CSSLevel 1 ( 不完全支持 CSS2 和 3) , JavaScript1.6和DOM1、2 ( 不完全支持DOM3) 。优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存。

（3）Webkit（代表浏览器Safari、Chrome），优点就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。

（4）Presto（代表浏览器Opera）：Presto内核被称为公认的浏览网页速度最快的内核，同时也是处理JavaScript脚本最兼容的内核，能在Windows、Mac及Linux操作系统下完美运行。Presto渲染页面的速度的优化达到了极致，然而牺牲了网页的兼容性。

图2 浏览器渲染内核及对应浏览器

二浏览器兼容性问题分析

     浏览器兼容性问题可以归纳为渲染相关和代码相关两个方面。

2.1渲染相关的兼容性问题

渲染相关的兼容性问题主要指表现在网页布局效果上的兼容性问题。DIV+CSS网页布局实现了网页结构与表现的分离，代码精简、重构容易，目前主流网站已广泛采用DIV+CSS进行网页布局。不同的浏览器渲染内核、同一浏览器的不同版本对HTML与CSS的支持与解析不同，导致同一网页在不同的浏览器中的效果不同。下面给出几种常见的情形：

(1) 不同浏览器对HTML标记所具有的内外边距属性具有不同的定义；

(2) 对同一个网页元素重复设置多种样式时，处理优先级不一样；

(3) 图片的位置设置在不同的浏览器中显示效果不同；

(4) 盒模型解析不一致。

2.2代码相关的兼容性问题

代码相关的兼容性问题指在解析网页Javascript代码时产生的兼容性问题。这主要是由于不同浏览器在处理同一件事情时所调用的方法不同，编写出来的程序代码也不同，造成同一段代码在不同的浏览器下运行的结果不同，从而导致网页效果不一致。以下给出几种常见的情形：（1） 不同浏览器对HTML对象获取的方式不一样；

（2） 不同浏览器对表格操作方法不一样；（3）不同浏览器对集合类对象定义和操作不一样；

（4） 不同浏览器对表单元素获取不一样。

三浏览器兼容性测试工具

    目前业界使用比较多的浏览器兼容性测试工具，主要通过多浏览器多版本同时对比的方式，帮助发现兼容性问题。此类工具大部分为收费版或需连接互联网平台。

    IETester是一款Internet Explorer浏览器的多版本测试工具，能方便地在ie5,ie6,ie7,ie8, ie9,ie10,ie11进行切换，满足大部分IE浏览器兼容性的测试需求，能测试同一网页在不同版本IE浏览器中所出现展示效果不同的问题。

    Browsera 是一个测试和报告网页在跨浏览器布局上差异和脚本错误的收费平台。Browsera提供自动化兼容性测试，它可以自动突出显示在浏览器上展示的差异，从而简化了测试过程。它还能检测JavaScript错误。

Browsersync能让浏览器实时、快速响应您的文件更改（html、JavaScript、css、sass、less等）并自动刷新页面。更重要的是Browsersync支持分布式部署，可以同时在PC、平板、手机等设备调试和检查浏览器兼容性。

四解决浏览器兼容性问题的思路

   针对我行的业务特点，本文介绍一个通过开源静态代码扫描工具，进行静态代码扫描的方式，提升前端代码的规范性，保证前端代码质量的思路。作为解决浏览性兼容性问题的思路，该方法检查成本低，能规避和发现一些已知的浏览器兼容问题。下文分别针对HTML代码、CSS代码和JavaScript代码的开源检测工具进行介绍。

4.1 HTML代码检查工具

     HTML（超文本标记语言），浏览器对HTML 容错性强，即使是错误百出的HTML代码也可以在浏览器里边正常展示。因此，绝大部分网站的HTML 代码都存在着各种各样的小问题，比如缺少元信息（meta），错乱乱的class、id 或属性的取值，等等。这些问题一方面影响页面在不同浏览器下的展示效果，另一方面增大了页面的维护成本。

由Bootstrap团队开发的Bootlint （https://github.com/twbs/bootlint）是开源社区关注度较大的HTML代码风格检查工具。该工具的完善度较高，文档齐全，可在浏览器中引入，或作为Grunt任务、Nodejs 模块及命令行工具调用。目前仅支持自身的检查规则，不支持添加自定义规则。

HTMLlint （https://github.com/htmllint/htmllint）提供了较全面的HTM检查规则，文档齐全，支持作为Grunt任务或 Nodejs 模块的使用形式，可传入规则配置，支持行内注释配置。

4.2 CSS代码检查工具

CKStyle（http://ckstyle.github.io）是一款CSS检查、美化、修复、压缩工具。CKStyle直接解析 CSS 文件，然后结合返回的 AST 对象做一些规则的检测。CKStyle 亮点是功能很丰富，检查、美化、修复和压缩全都有，提供了一个服务 CKService，帮助检查网站的 CSS。

    CSSHint （https://github.com/ecomfe/node-csshint）是百度出品的CSS代码风格检查工具。目前CSSHint支持 Node.js 模块以及 CLI 方式使用，提供对 CSS 的解析和检查等功能，通过 JSON 文件来管理规则的配置。CSSHint 覆盖规则多（包括CSSLint的规则）、提供更易用的扩展方式、提供更加灵活的行内注释指令匹配方式（开启、关闭、嵌套）等功能。    

4.3 JavaScript代码检查工具

     JSHunter是一款基于JSHint的代码扫描工具，它具有检查规则配置灵活，检查结果展示清晰、支持检查HTML内嵌Javascript代码的检查和过滤冗余信息。

     ESLint工具容易拓展、拥有大量的自定义规则、容易通过插件来安装。它给出准确的输出，而且包括规则名；规则容易查找，提供链接去编辑集成、插件和样例。任何规则都可以开启闭合、规则容易拓展，使得ESLint在错误检查上更方便。

五 总结与展望

   目前，主流的兼容性测试工具不太适合我行的业务特点，采用静态代码扫描的方法可以低成本、大限度地减少浏览器兼容性问题。为了更好开展兼容性测试，我们需进一步研究兼容性测试平台和挖掘兼容性问题的工具，比如利用Browsersync搭建分布式多操作系统、多浏览器版本、多设备的兼容性测试平台。