摘要

在互聯(lián)網(wǎng)信息時(shí)代的今天莺奔，瀏覽器是我們使用最廣泛的軟件询吴。本文通過(guò)介紹四大主流瀏覽器的渲染內(nèi)核——Trident杯矩、 Gecko、WebKit和Presto巾表，引出瀏覽器兼容性問(wèn)題的分析汁掠，介紹一些主流的瀏覽器兼容性測(cè)試工具，并提出前端代碼規(guī)范性檢查的解決思路集币。

背景

?????瀏覽器是我們獲取互聯(lián)網(wǎng)信息的重要工具考阱。訪(fǎng)問(wèn)同一網(wǎng)站，如果使用不同的瀏覽器鞠苟，會(huì)發(fā)現(xiàn)有些功能無(wú)法使用乞榨、有些內(nèi)容無(wú)法顯示、有些內(nèi)容錯(cuò)位等問(wèn)題当娱。這些就是瀏覽器兼容性問(wèn)題吃既，同一網(wǎng)站在不同瀏覽器、不同設(shè)備上有不同的效果跨细。該問(wèn)題不但影響網(wǎng)站的用戶(hù)體現(xiàn)鹦倚，而且影響網(wǎng)站的正常訪(fǎng)問(wèn)和使用。

隨著我行有越來(lái)越多的業(yè)務(wù)和產(chǎn)品冀惭，通過(guò)網(wǎng)站的方式供用戶(hù)訪(fǎng)問(wèn)使用震叙，探索和研究瀏覽器兼容性問(wèn)題，提升瀏覽器兼容性測(cè)試的工作效率散休，具有一定的價(jià)值媒楼。本文從瀏覽器內(nèi)核介紹入手，分析導(dǎo)致瀏覽器兼容性問(wèn)題的原因溃槐，然后介紹目前業(yè)界使用的兼容性問(wèn)題測(cè)試工具，并提出利用靜態(tài)代碼掃描工具科吭、提升代碼規(guī)范性的角度減少兼容性問(wèn)題的發(fā)生昏滴，為做好瀏覽器兼容性測(cè)試工作打好基礎(chǔ)。

一瀏覽器內(nèi)核介紹

瀏覽器的主要功能是向服務(wù)器請(qǐng)求數(shù)據(jù)和資源对人，并在瀏覽器窗口對(duì)數(shù)據(jù)和資源進(jìn)行展示谣殊。而瀏覽器對(duì)數(shù)據(jù)和資源的展示分析是通過(guò)瀏覽器內(nèi)核來(lái)解析和處理。

根據(jù)功能的不同牺弄，瀏覽器內(nèi)核可分為兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和JavaScript引擎姻几。它負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML龙致、XML、圖像等等）鸵赖、整理訊息（例如加入 CSS 等）赫编，以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)络拌。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同俭驮，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器春贸、電子郵件客戶(hù)端以及其它需要編輯混萝、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。JS 引擎則是解析 Javascript 語(yǔ)言萍恕，執(zhí)行 javascript 語(yǔ)言來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果逸嘀。

圖1瀏覽器組件圖

當(dāng)前主流渲染內(nèi)核有Trident、 Gecko允粤、WebKit崭倘、 Presto。下面分別介紹四大渲染內(nèi)核：

（1）Trident（代表瀏覽器Internet Explorer）维哈，它的引擎被設(shè)計(jì)成一個(gè)模塊绳姨，使得其他軟件開(kāi)發(fā)人員很容易將網(wǎng)頁(yè)瀏覽功能加到他們自行開(kāi)發(fā)的應(yīng)用程序里，其接口內(nèi)核設(shè)計(jì)相當(dāng)成熟阔挠，它所支持的特性有: HTML4.01飘庄、HTML5集、CSSLevel 1 ( 不完全支持 CSS2和3) 购撼、JavaScript1.5跪削、DOMLevel 1( 不完全支持Level 2)。因此迂求，在早期IE占有大量的市場(chǎng)份額碾盐，有很多網(wǎng)頁(yè)是根據(jù)這個(gè)Trident的標(biāo)準(zhǔn)來(lái)編寫(xiě)的，但是Trident內(nèi)核對(duì)真正的網(wǎng)頁(yè)標(biāo)準(zhǔn)支持不是很好揩局，同時(shí)存在許多安全Bug毫玖。

（2）Gecko（代表瀏覽器Mozilla Firefox），它的代碼完全開(kāi)源凌盯，可擴(kuò)展性強(qiáng)付枫，同時(shí)它也是一個(gè)跨平臺(tái)內(nèi)核，可以在Windows驰怎、BSD阐滩、Linux和Mac OS X中使用，它支持的特性有: HTML4. 0县忌、?CSSLevel 1 ( 不完全支持 CSS2 和 3) , JavaScript1.6和DOM1掂榔、2 ( 不完全支持DOM3) 继效。優(yōu)點(diǎn)就是功能強(qiáng)大、豐富装获，可以支持很多復(fù)雜網(wǎng)頁(yè)效果和瀏覽器擴(kuò)展接口瑞信，缺點(diǎn)是消耗很多的資源，比如內(nèi)存饱溢。

（3）Webkit（代表瀏覽器Safari喧伞、Chrome），優(yōu)點(diǎn)就是Webkit擁有清晰的源碼結(jié)構(gòu)绩郎、極快的渲染速度潘鲫，缺點(diǎn)是對(duì)網(wǎng)頁(yè)代碼的兼容性較低，會(huì)使一些編寫(xiě)不標(biāo)準(zhǔn)的網(wǎng)頁(yè)無(wú)法正確顯示肋杖。

（4）Presto（代表瀏覽器Opera）：Presto內(nèi)核被稱(chēng)為公認(rèn)的瀏覽網(wǎng)頁(yè)速度最快的內(nèi)核溉仑，同時(shí)也是處理JavaScript腳本最兼容的內(nèi)核，能在Windows状植、Mac及Linux操作系統(tǒng)下完美運(yùn)行浊竟。Presto渲染頁(yè)面的速度的優(yōu)化達(dá)到了極致，然而犧牲了網(wǎng)頁(yè)的兼容性津畸。

圖2 瀏覽器渲染內(nèi)核及對(duì)應(yīng)瀏覽器

二瀏覽器兼容性問(wèn)題分析

?????瀏覽器兼容性問(wèn)題可以歸納為渲染相關(guān)和代碼相關(guān)兩個(gè)方面振定。

2.1渲染相關(guān)的兼容性問(wèn)題

渲染相關(guān)的兼容性問(wèn)題主要指表現(xiàn)在網(wǎng)頁(yè)布局效果上的兼容性問(wèn)題。DIV+CSS網(wǎng)頁(yè)布局實(shí)現(xiàn)了網(wǎng)頁(yè)結(jié)構(gòu)與表現(xiàn)的分離肉拓，代碼精簡(jiǎn)后频、重構(gòu)容易，目前主流網(wǎng)站已廣泛采用DIV+CSS進(jìn)行網(wǎng)頁(yè)布局暖途。不同的瀏覽器渲染內(nèi)核卑惜、同一瀏覽器的不同版本對(duì)HTML與CSS的支持與解析不同，導(dǎo)致同一網(wǎng)頁(yè)在不同的瀏覽器中的效果不同驻售。下面給出幾種常見(jiàn)的情形：

(1) 不同瀏覽器對(duì)HTML標(biāo)記所具有的內(nèi)外邊距屬性具有不同的定義露久；

(2) 對(duì)同一個(gè)網(wǎng)頁(yè)元素重復(fù)設(shè)置多種樣式時(shí)，處理優(yōu)先級(jí)不一樣欺栗；

(3) 圖片的位置設(shè)置在不同的瀏覽器中顯示效果不同毫痕；

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

2.2代碼相關(guān)的兼容性問(wèn)題

代碼相關(guān)的兼容性問(wèn)題指在解析網(wǎng)頁(yè)Javascript代碼時(shí)產(chǎn)生的兼容性問(wèn)題迟几。這主要是由于不同瀏覽器在處理同一件事情時(shí)所調(diào)用的方法不同消请，編寫(xiě)出來(lái)的程序代碼也不同，造成同一段代碼在不同的瀏覽器下運(yùn)行的結(jié)果不同瘤旨，從而導(dǎo)致網(wǎng)頁(yè)效果不一致梯啤。以下給出幾種常見(jiàn)的情形：（1） 不同瀏覽器對(duì)HTML對(duì)象獲取的方式不一樣竖伯；

（2） 不同瀏覽器對(duì)表格操作方法不一樣存哲；（3）不同瀏覽器對(duì)集合類(lèi)對(duì)象定義和操作不一樣因宇；

（4） 不同瀏覽器對(duì)表單元素獲取不一樣。

三瀏覽器兼容性測(cè)試工具

????目前業(yè)界使用比較多的瀏覽器兼容性測(cè)試工具祟偷，主要通過(guò)多瀏覽器多版本同時(shí)對(duì)比的方式察滑，幫助發(fā)現(xiàn)兼容性問(wèn)題。此類(lèi)工具大部分為收費(fèi)版或需連接互聯(lián)網(wǎng)平臺(tái)修肠。

????IETester是一款I(lǐng)nternet Explorer瀏覽器的多版本測(cè)試工具贺辰，能方便地在ie5,ie6,ie7,ie8, ie9,ie10,ie11進(jìn)行切換，滿(mǎn)足大部分IE瀏覽器兼容性的測(cè)試需求嵌施，能測(cè)試同一網(wǎng)頁(yè)在不同版本IE瀏覽器中所出現(xiàn)展示效果不同的問(wèn)題饲化。

????Browsera 是一個(gè)測(cè)試和報(bào)告網(wǎng)頁(yè)在跨瀏覽器布局上差異和腳本錯(cuò)誤的收費(fèi)平臺(tái)。Browsera提供自動(dòng)化兼容性測(cè)試吗伤，它可以自動(dòng)突出顯示在瀏覽器上展示的差異吃靠，從而簡(jiǎn)化了測(cè)試過(guò)程。它還能檢測(cè)JavaScript錯(cuò)誤足淆。

Browsersync能讓瀏覽器實(shí)時(shí)巢块、快速響應(yīng)您的文件更改（html、JavaScript巧号、css族奢、sass、less等）并自動(dòng)刷新頁(yè)面丹鸿。更重要的是Browsersync支持分布式部署越走，可以同時(shí)在PC、平板卜高、手機(jī)等設(shè)備調(diào)試和檢查瀏覽器兼容性弥姻。

四解決瀏覽器兼容性問(wèn)題的思路

???針對(duì)我行的業(yè)務(wù)特點(diǎn)，本文介紹一個(gè)通過(guò)開(kāi)源靜態(tài)代碼掃描工具掺涛，進(jìn)行靜態(tài)代碼掃描的方式庭敦，提升前端代碼的規(guī)范性，保證前端代碼質(zhì)量的思路薪缆。作為解決瀏覽性兼容性問(wèn)題的思路秧廉，該方法檢查成本低，能規(guī)避和發(fā)現(xiàn)一些已知的瀏覽器兼容問(wèn)題拣帽。下文分別針對(duì)HTML代碼疼电、CSS代碼和JavaScript代碼的開(kāi)源檢測(cè)工具進(jìn)行介紹。

4.1 HTML代碼檢查工具

?????HTML（超文本標(biāo)記語(yǔ)言）减拭，瀏覽器對(duì)HTML 容錯(cuò)性強(qiáng)蔽豺，即使是錯(cuò)誤百出的HTML代碼也可以在瀏覽器里邊正常展示。因此拧粪，絕大部分網(wǎng)站的HTML 代碼都存在著各種各樣的小問(wèn)題修陡，比如缺少元信息（meta）沧侥，錯(cuò)亂亂的class、id 或?qū)傩缘娜≈灯茄唬鹊妊缟薄＿@些問(wèn)題一方面影響頁(yè)面在不同瀏覽器下的展示效果，另一方面增大了頁(yè)面的維護(hù)成本拾因。

由Bootstrap團(tuán)隊(duì)開(kāi)發(fā)的Bootlint （https://github.com/twbs/bootlint）是開(kāi)源社區(qū)關(guān)注度較大的HTML代碼風(fēng)格檢查工具旺罢。該工具的完善度較高，文檔齊全绢记，可在瀏覽器中引入扁达，或作為Grunt任務(wù)、Nodejs 模塊及命令行工具調(diào)用蠢熄。目前僅支持自身的檢查規(guī)則罩驻，不支持添加自定義規(guī)則。

HTMLlint （https://github.com/htmllint/htmllint）提供了較全面的HTM檢查規(guī)則护赊，文檔齊全惠遏，支持作為Grunt任務(wù)或 Nodejs 模塊的使用形式，可傳入規(guī)則配置骏啰，支持行內(nèi)注釋配置节吮。

4.2 CSS代碼檢查工具

CKStyle（http://ckstyle.github.io）是一款CSS檢查、美化判耕、修復(fù)透绩、壓縮工具。CKStyle直接解析 CSS 文件壁熄，然后結(jié)合返回的 AST 對(duì)象做一些規(guī)則的檢測(cè)帚豪。CKStyle?亮點(diǎn)是功能很豐富，檢查草丧、美化狸臣、修復(fù)和壓縮全都有，提供了一個(gè)服務(wù)?CKService昌执，幫助檢查網(wǎng)站的 CSS烛亦。

????CSSHint?（https://github.com/ecomfe/node-csshint）是百度出品的CSS代碼風(fēng)格檢查工具。目前CSSHint支持 Node.js 模塊以及 CLI 方式使用懂拾，提供對(duì) CSS 的解析和檢查等功能煤禽，通過(guò) JSON 文件來(lái)管理規(guī)則的配置。CSSHint?覆蓋規(guī)則多（包括CSSLint的規(guī)則）岖赋、提供更易用的擴(kuò)展方式檬果、提供更加靈活的行內(nèi)注釋指令匹配方式（開(kāi)啟、關(guān)閉、嵌套）等功能选脊。????

4.3 JavaScript代碼檢查工具

?????JSHunter是一款基于JSHint的代碼掃描工具衷畦，它具有檢查規(guī)則配置靈活，檢查結(jié)果展示清晰知牌、支持檢查HTML內(nèi)嵌Javascript代碼的檢查和過(guò)濾冗余信息。

?????ESLint工具容易拓展斤程、擁有大量的自定義規(guī)則角寸、容易通過(guò)插件來(lái)安裝。它給出準(zhǔn)確的輸出忿墅，而且包括規(guī)則名扁藕；規(guī)則容易查找，提供鏈接去編輯集成疚脐、插件和樣例亿柑。任何規(guī)則都可以開(kāi)啟閉合、規(guī)則容易拓展棍弄，使得ESLint在錯(cuò)誤檢查上更方便望薄。

五?總結(jié)與展望

???目前，主流的兼容性測(cè)試工具不太適合我行的業(yè)務(wù)特點(diǎn)呼畸，采用靜態(tài)代碼掃描的方法可以低成本痕支、大限度地減少瀏覽器兼容性問(wèn)題。為了更好開(kāi)展兼容性測(cè)試蛮原，我們需進(jìn)一步研究兼容性測(cè)試平臺(tái)和挖掘兼容性問(wèn)題的工具卧须，比如利用Browsersync搭建分布式多操作系統(tǒng)、多瀏覽器版本儒陨、多設(shè)備的兼容性測(cè)試平臺(tái)花嘶。