瀏覽器的主要功能是向服務(wù)器請求數(shù)據(jù)和資源，并在瀏覽器窗口對數(shù)據(jù)和資源進(jìn)行展示。而瀏覽器對數(shù)據(jù)和資源的展示分析是通過瀏覽器內(nèi)核來解析和處理。
根據(jù)功能的不同，瀏覽器內(nèi)核可分為兩部分：渲染引擎( 或者 ) 和 引擎。它負(fù)責(zé)取得網(wǎng)頁的內(nèi)容 (HTML、XML、圖像等等）、整理訊息（例如加入 cSS 等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其亡需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。JS 引擎則是解析 語言，執(zhí)行 語言來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果。
當(dāng)前主流渲染內(nèi)核有 、Gecko, 、。下面分別介紹四大渲染內(nèi)核：
(1） （代表瀏覽器 ），它的引擎被設(shè)計成一個模塊，使得其他軟件開發(fā)人員很容易將網(wǎng)頁瀏覽功能加到他們自行開發(fā)的應(yīng)用程序里，其接口內(nèi)核設(shè)計相當(dāng)成熟，它所支持的特性有：HTML4.01、HTVL5 集、（不完全支持 CSS2 和3）、 5、 1（不完全支持 。因此，在早期 IE 占有大量的市場份額，有很多網(wǎng)頁是根據(jù)這個 的標(biāo)準(zhǔn)來編寫的發(fā)現(xiàn)新版本瀏覽器,一樣的簡單易用,速度提升30%，但是 內(nèi)核對真正的網(wǎng)頁標(biāo)準(zhǔn)支持不是很好，同時存在許多安全 Bug。
(2） Gecko（代表瀏覽器 )，它的代碼完全開源，可擴(kuò)展性強(qiáng)，同時它也是一個跨平臺內(nèi)核，可以在 、BSD、Linux 和Nac os X 中使用，亡支持的特性有：HTML 4.0、 1（不完全支持 CsS2 和3），.6 和DOM1、2（不完全支持 DON3）。優(yōu)點(diǎn)就是功能強(qiáng)大、豐富，可以支持很多復(fù)雜網(wǎng)頁效果和瀏覽器擴(kuò)展接口，缺點(diǎn)是消耗很多的資源，比如內(nèi)存。
(3） （代表瀏覽器 、 ），優(yōu)點(diǎn)就是擁有清晰的源碼結(jié)構(gòu)、極快的渲染速度，缺點(diǎn)是對網(wǎng)頁代碼的兼容性較低，會使一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁無法正確顯示。
(4） （代表瀏覽器 Opera）： 內(nèi)核被稱為公認(rèn)的瀏覽網(wǎng)頁速度最快的內(nèi)核，同時也是處理 腳本最兼容的內(nèi)核發(fā)現(xiàn)新版本瀏覽器,一樣的簡單易用,速度提升30%，能在 、Mac 及Linux 操作系統(tǒng)下完美運(yùn)行。 渲染頁面的速度的優(yōu)化達(dá)到了極致，然而犧牲了網(wǎng)頁的兼容性。
瀏覽器兼容性問題分析
瀏覽器兼容性問題可以歸納為渲染相關(guān)和代碼相關(guān)兩個方面。
渲染相關(guān)的兼容性問題
渲染相關(guān)的兼容性問題主要指表現(xiàn)在網(wǎng)頁布局效果上的兼容性問題。
DIV+CSS 網(wǎng)頁布局實(shí)現(xiàn)了網(wǎng)頁結(jié)構(gòu)與表現(xiàn)的分離，代碼精簡、重構(gòu)容易，目前主流網(wǎng)站已廣泛采用 DIV+CSS 進(jìn)行網(wǎng)頁布局。不同的瀏覽器渲染內(nèi)核、同一瀏覽器的不同版本對 HTM 與CSS 的支持與解析不同，導(dǎo)致同一網(wǎng)頁在不同的瀏覽器中的效果不同。下面給出幾種常見的情形：
(1） 不同瀏覽器對 HTM 標(biāo)記所具有的內(nèi)外邊距屬性具有不同的定義；
(2）對同一個網(wǎng)頁元素重復(fù)設(shè)置多種樣式時，處理優(yōu)先級不一樣；
(3） 圖片的位置設(shè)置在不同的瀏覽器中顯示效果不同；
(4） 盒模型解析不一致。
代碼相關(guān)的兼容性問題
代碼相關(guān)的兼容性問題指在解析網(wǎng)頁 代碼時產(chǎn)生的兼谷性問題。這主要是由于不同瀏覽器在處理同一件事情時所調(diào)用的方法不同，編寫出來的程序代碼也不同，造成同一段代碼在不同的瀏覽器下運(yùn)行的結(jié)果不同，從而導(dǎo)致網(wǎng)頁效果不一致。以下給出幾種常見的情形：
(1）不同瀏覽器對 HTM 對象獲取的方式不一樣；
(2）不同瀏覽器對表格操作方法不一樣；
(3)不同瀏覽器對集合類對象定義和操作不一樣；
（4）不同瀏覽器對表單元素獲取不一樣。
瀏覽器兼容性測試工具
目前業(yè)界使用比較多的瀏覽器兼容性測試工具，主要通過多瀏覽器多版本同時對比的方式，幫助發(fā)現(xiàn)兼容性問題。此類工具大部分為收費(fèi)版或需連接互聯(lián)網(wǎng)平臺。
是一款 瀏覽器的多版本測試工具，能方便地在ie5, ie6, ier, ie8, ie9, ie10,ie11 進(jìn)行切換，滿足大部分 IE 瀏覽器兼容性的測試需求，能測試同一網(wǎng)頁在不同版本 IE瀏覽器中所出現(xiàn)展示效果不同的問題。
是一個測試和報告網(wǎng)頁在跨瀏覽器布局上差異和腳本錯誤的收費(fèi)平臺。 提供自動化兼容性測試，亡可以自動突出顯示在瀏覽器上展示的差異，從而簡化了測試過程。亡還能檢測 錯誤。
能讓瀏覽器實(shí)時、快速響應(yīng)您的文件更改 html 、、css、sass、less 等）并自動刷新頁面。更重要的是 支持分布式部署，可以同時在 PC、平板、手機(jī)等設(shè)備調(diào)試和檢查瀏覽器兼容性。
解決瀏覽器兼容性問題的思路
本文介紹一個通過開源靜態(tài)代碼掃描工具，進(jìn)行靜態(tài)代碼掃描的方式，提升前端代碼的規(guī)范性，保證前端代碼質(zhì)量的思路。作為解決瀏覽性兼容性問題的思路，該方法檢查成本低，能規(guī)避和發(fā)現(xiàn)一些已知的瀏覽器兼容問題。下文分別針對 印ML 代碼、CSS 代碼和 代碼的開源檢測工具進(jìn)行介紹。
HTML 代碼檢查工具
HTML （超文本標(biāo)記語言），瀏覽器對 HTML 容錯性強(qiáng)，即使是錯誤百出的HTML代碼也可以在瀏覽器里邊正常展示。因此，絕大部分網(wǎng)站的 HTML 代碼都存在著各種各樣的小問題，比如缺少元信息（meta），錯亂亂的 class、id 或?qū)傩缘娜≈担鹊取＿@些問題一方面影響頁面在不同瀏覽器下的展示效果，另一方面增大了頁面的維護(hù)成本。
由 團(tuán)隊開發(fā)的 (/twbs/）是開源社區(qū)關(guān)注度較大的 HITML 代碼風(fēng)格檢查工具。該工具的完善度較高，文檔齊全，可在瀏覽器中引入，或作為 Grunt 任務(wù)、模塊及命令行工具調(diào)用。目前僅支持自身的檢查規(guī)則，不支持添加自定義規(guī)則。
(/）提供了較全面的 HIM檢查規(guī)則，文檔齊全，支持作為 Grunt 任務(wù)或 模塊的使用形式，可傳入規(guī)則配置，支持行內(nèi)注釋配置。
CSS 代碼檢查工具
(..io）是一款 CSS 檢查、美化、修復(fù)、壓縮工具。 直接解析 CSS 文件，然后結(jié)合返回的 AST 對象做一些規(guī)則的檢測。 亮點(diǎn)是功能很豐富，檢查、美化、修復(fù)和壓縮全都有，提供了一個服務(wù) CK ，幫助檢查網(wǎng)站的 CSS。
(//node-）是百度出品的 CSS 代碼風(fēng)格檢查工具。目前 支持 Node js模塊以及 CLI 方式使用，提供對CSS 的解析和檢查等功能，通過 JSON 文件來管理規(guī)則的配置。 覆蓋規(guī)則多（包括 的規(guī)則）、提供更易用的擴(kuò)展方式、提供更加靈活的注釋指令匹配方式（開啟、關(guān)閉、嵌套）等功能。
代碼檢查工具
是一款基于 的代碼掃描工具，它具有檢查規(guī)則配置靈活，檢查結(jié)果展示清晰、支持檢查 HTML 內(nèi)嵌 代碼的檢查和過濾冗余信息。
工具容易拓展、擁有大量的自定義規(guī)則、容易通過插件來安裝。它給出準(zhǔn)確的輸出，而且包括規(guī)則名；規(guī)則容易查找，提供鏈接去編輯集成、插件和樣例。任何規(guī)則都可以開啟閉合、規(guī)則容易拓展，使得 在錯誤檢查上更方便。
總結(jié)與展望
目前，主流的兼容性測試工具不太適合我們的業(yè)務(wù)特點(diǎn)，采用靜態(tài)代碼掃描的方法可以低成本、大限度地減少瀏覽器兼容性問題。為了更好開展兼容性測試，我們需進(jìn)一步研究兼容性測試平臺和挖掘兼容性問題的工具，比如利用 搭建分布式多操作系統(tǒng)、多瀏覽器版本、多設(shè)備的兼容性測試平臺。
