瀏覽器內核及兼容性

這周學習主要難點針對在瀏覽器的兼容問題，常常聽到的一句話就是：：爲何會有IE6，，，對於瀏覽器兼容性初學的我，對這周學習先有個初初的總結。

先談各個瀏覽器的內核問題：

「Rendering Engine「

 

主要分紅如下三大類：

一、Trident（IE內核）

Trident(IE內核)：該內核程序在1997年的IE4中首次被採用，是微軟在Mosaic代碼的基礎之上修改而來的，並沿用到IE11，也被廣泛稱做」IE內核」。Trident其實是一款開放的內核，其接口內核設計的至關成熟，所以纔有許多采用IE內核而非IE的瀏覽器(殼瀏覽器)涌現。

因爲IE自己的「壟斷性」（雖然名義上IE並不是壟斷，但實際上，特別是從Windows 95年代一直到XP初期，就市場佔有率來講IE的確藉助Windows的東風處於「壟斷」的地位）而使得Trident內核的長期一家獨大，微軟很長時間都並無更新Trident內核，這致使了兩個後果——一是Trident內核曾經幾乎與W3C標準脫節（2005年），二是Trident內核的大量 Bug等安全性問題沒有獲得及時解決，而後加上一些致力於開源的開發者和一些學者們公開本身認爲IE瀏覽器不安全的觀點，也有不少用戶轉向了其餘瀏覽器， Firefox和Opera就是這個時候興起的。非Trident內核瀏覽器的市場佔有率大幅提升也導致許多網頁開發人員開始注意網頁標準和非IE瀏覽器的瀏覽效果問題。

2、Gecko(Firefox內核)

Gecko(Firefox內核)：Netscape6開始採用的內核，後來的火狐也採用了該內核，Gecko的特色是代碼徹底公開，所以，其可開發程度很高，全世界的程序員均可覺得其編寫代碼，增長功能。由於這是個開源內核，所以受到許多人的青睞，Gecko內核的瀏覽器也不少，這也是Gecko內核雖然年輕但市場佔有率可以迅速提升的重要緣由。

事實上，GECKO的由來跟IE不無關係，前面說過IE沒有使用W3C的標準，這致使了微軟內部一些開發人員的不滿；他們與當時已經中止更新了的 Netscape的一些員工一塊兒創辦了Mozilla，以當時的Mosaic內核爲基礎從新編寫內核，因而開發出了Gecko。不過事實上，Gecko 內核的瀏覽器仍然仍是Firefox 用戶最多，因此有時也會被稱爲Firefox內核。此外Gecko也是一個跨平臺內核，能夠在Windows、 BSD、Linux和Mac OS X中使用。

補充：JavaScript引擎是SpiderMonkey。

Gecko內核常見的瀏覽器： 火狐、Mozilla SeaMonkey、Epiphany（早期版本）、Flock（早期版本）、K-Meleon

 

3、Presto(Opera前內核)

Presto(Opera前內核) (已廢棄)： Opera12.17及更早版本曾經採用的內核，現已中止開發並廢棄，該內核在2003年的Opera7中首次被使用，該款引擎的特色就是渲染速度的優化達到了極致，然而代價是犧牲了網頁的兼容性。

實際上這是一個動態內核，與前面幾個內核的最大的區別就在腳本處理上，Presto有着天生的優點，頁面的所有或者部分都可以在迴應腳本事件時等狀況下被從新解析。此外該內核在執行Javascrīpt的時候有着最快的速度，根據在同等條件下的測試，Presto內核執行同等Javascrīpt所需的時間僅有Trident和Gecko內核的約1/3（Trident內核最慢，不過二者相差沒有多大），本文的其中一個修改者認爲上述測試信息過於老舊且不完整，由於他曾作過的小測試顯示Presto部分快部分慢，各內核整體至關。那次測試的時候由於Apple機的硬件條件和普通PC機不一樣因此沒有測試WebCore內核。只惋惜Presto是商業引擎，使用Presto的除開Opera之外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770網絡瀏覽器等，這很大程度上限制了Presto的發展。Opera現已改用Google Chrome的Blink內核。

 

 

4、Webkit(Safari內核,Chrome內核原型,開源)

Webkit(Safari內核,Chrome內核原型,開源):它是蘋果公司本身的內核，也是蘋果的safari瀏覽器使用的內核。 

WebKit內核常見的瀏覽器：傲遊瀏覽器三、Symbian手機瀏覽器、Android 默認瀏覽器。

 

5、Blink

Blink是一個由Google和Opera Software開發的瀏覽器排版引擎，Google計劃將這個渲染引擎做爲Chromium計劃的一部分，而且在2013年4月的時候公佈了這一消息。這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，而且在Chrome（28及日後版本）、Opera（15及日後版本）和Yandex瀏覽器中使用。

 

 

瀏覽器內核的優缺點

Trident：這種瀏覽器內核是ie用的內核，由於在早期IE佔有大量的市場份額，因此這種內核比較流行，之前有不少網頁也是根據這個內核的標準來編寫的，可是實際上這個內核對真正的網頁標準支持不是很好，甚至在2005年，與網頁標準制定組織(W3C理事會)所制定的標準發生了脫節，同時 Trident 內核自己的BUG比較多，對一些符合W3C標準的網頁代碼支持不是很好，這在早期的IE版本中比較明顯，好比IE5.5之前(包括IE5.5)，其實ie6對W3C標準的支持也不是很好，而咱們如今不少人都在使用IE6，事實上它也屬於一個比較早的版本。

可是因爲IE的高市場佔有率，微軟也很長時間沒有更新Trident內核，這致使了二個結果
1，Trident內核和W3C標準脫節。
2，Trident內核的大量Bug等安全問題沒有獲得解決，加上一些專家學者公開本身認爲IE瀏覽器不安全的觀點，使不少用戶開始轉向其餘瀏覽器，FF,Opera就是這時期興起的。
Gecko：這是Firefox 和 Flock 所採用內核，這個內核的優勢就是功能強大、豐富，能夠支持不少複雜網頁效果和瀏覽器擴展接口，可是代價是也顯而易見就是要消耗不少的資源，好比內存。
Presto：Opera 採用的是 Presto內核，Presto內核被稱爲公認的瀏覽網頁速度最快的內核，這得益於它在開發時的天生優點，在處理JS腳本等腳本語言時，會比其餘的內核快3倍左右，缺點就是爲了達到很快的速度而丟掉了一部分網頁兼容性。

Webkit：Webkit 是 Safari 採用的內核，不過 Safari 是蘋果系統下的瀏覽器(雖然也有windows版，可是比較少)，因此只簡單介紹一下這個內核的優勢和缺點，優勢就是網頁瀏覽速度較快，雖然不及 Presto 可是也勝於 Gecko 和 Trident，缺點是對於網頁代碼的容錯性不高，也就是說對網頁代碼的兼容性較低，會使一些編寫不標準的網頁沒法正確顯示。

總結：就瀏覽器來講，互聯網經歷了十年的高速發展期，近幾年市場上也推出了不少新的瀏覽器，可是他們並不是是採用自主開發的內核，因此瀏覽器內核自己實際沒有實質突破。

 

主流瀏覽器所使用的內核分類

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上

Webkit內核：Safari,Chrome等

 

 

 

 

1、兼容性產生緣由：

由於不一樣瀏覽器使用內核及所支持的HTML等網頁語言標準不一樣；以及用戶客戶端的環境不一樣（如分辨率不一樣）形成的顯示效果不能達到理想效果。最多見的問題就是網頁元素位置混亂，錯位。兼容性產生緣由主要是內核或內核的版本不同；

 

2、瀏覽器對網頁兼容支持的解析模式：

一、爲何會有那麼多模式？

因爲歷史的緣由，各個瀏覽器在對頁面的渲染上存在差別，甚至同一瀏覽器在不一樣版本中，對頁面的渲染也不一樣。在W3C標準出臺之前，瀏覽器在對頁面的渲染上沒有統一規範，產生了差別(Quirks mode或者稱爲Compatibility Mode)；因爲W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱爲Strict mode也有叫作Standars mode)，這就是兩者最簡單的區別。

 

二、瀏覽器採用哪一種模式進行解析呢？

火狐一直工做在標準模式下，但IE（6，7，8）標準模式與怪異模式差異很大， 主要體如今對盒子模型的解釋上，

那麼瀏覽器究竟該採用哪一種模式渲染呢？這就 引出的DTD，既是網頁的頭部聲明，瀏覽器會經過識別DTD而採用相對應的渲染模式：

1. 瀏覽器要使老舊的網頁正常工做，但這部分網頁是沒有doctype聲明的，因此 瀏覽器對沒有doctype聲明的網頁採用quirks mode解析。
2. 對於擁有doctype聲明的網頁，什麼瀏覽器採用何種模式解析，這裏有一張詳細列表可參考：http://hsivonen.iki.fi/doctype。
3. 對於擁有doctype聲明的網頁，這裏有幾條簡單的規則可用於判斷： 對於那些瀏覽器不能識別的doctype聲明，瀏覽器採用strict mode解析。
4. 在doctype聲明中， 沒有使用DTD聲明或者使用HTML4如下（不包括HTML4）的DTD聲明時，基本全部的瀏覽器都是使用quirks mode呈現，其餘的則使用strict mode解析。
5. 能夠這麼說，在 現有有doctype聲明的網頁，絕大多數是採用strict mode進行解析的。

6. 在ie6中，若是在doctype聲明前有一個xml聲明(好比:<?xml version=」1.0″ encoding=」iso-8859-1″?>)，則採用quirks mode解析。這條規則在ie7中已經移除了。

 

三、如何設置爲怪異模式（quirks mode）和標準模式（strict mode）：

3.一、設置怪異模式：

方法一：在頁面項部加 <!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01 Transitional//EN」>

方法二：什麼也不加。

 

3.二、設置爲標準模式：

加入如下任意一種：HTML4提供了三種DOCTYPE可選擇：
<!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01 Transitional//EN」 「http://www.w3.org/TR/html4/loose.dtd」>

<!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01//EN」 「http://www.w3.org/TR/html4/strict.dtd」>

<!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01 Frameset//EN」 「http://www.w3.org/TR/html4/frameset.dtd」>

XHTML1.0提供了三種DOCTYPE可選擇：

(1)過渡型（Transitional ）
<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」 「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」>

(2)嚴格型（Strict ）
<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Strict//EN」 「http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd」>

(3)框架型（Frameset ）

<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Frameset//EN」 「http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd」>

 

備註：過渡型和嚴格型的區別：

Transitional DOCTYPEs只是爲了實現從舊時代到新時代的過渡，並且Strict DOCTYPEs是默認的文檔聲明， 對構造HTML 4.01和XHTML 1.0都適用。

使用Transitional DOCTYPE通常是因爲代碼中含有過多陳舊的寫法，而且一會兒很難徹底轉換到Strict DOCTYPE來。可是Strict DOCTYPE才應該是你的目標。它鼓勵甚至有時是強迫你把結構與表現區分開來，把表現層的代碼都寫在CSS裏，將結構和表現分開，使得維護一個站點很是容易。

對於準備向Strict進發的人來講，二者的有些區別極可能會使開發者犯錯誤，接下來我將會談到。 在Strict DOCTYPEs下不支持的標籤 ：center font iframe srike u 在Strict DOCTYPEs下不支持的屬性 align (表格相關的支持：col, colgroup, tbody, td, tfoot, th, thead, and tr) language background bgcolor border (table支持) height (img和object支持) hspace name (在HTML 4.01 Strict中支持，XHTML 1.0 Strict中的form和img不支持) noshade nowrap target text, link, vlink, 和alink vspace width (img, object, table, col, 和 colgroup都支持) 內容模型的區別

元素類型的內容模型描述了什麼樣的元素類型實例能夠被包含。這一點上，兩種文檔聲明的最大區別在於blockquote, body, 和form元素僅可以包含塊級元素，如： 文本和圖像不容許直接包含在body中，必須被p或者div等塊級元素包含 input元素不能直接是form元素的下一層 blockquote元素內的文本，必須被p或者div等塊級元素包含 將全部的表現都交給CSS，恪守Strict標準

在向Strict DOCTYPEs過渡的過程當中，瞭解每一個元素是作什麼的比知道每一個元素長啥樣有效的多。

 

四、如何斷定如今是標準模式仍是怪異模式：

方法一：執行如下代碼
alert(window.top.document.compatMode) ;
//BackCompat  表示怪異模式
//CSS1Compat  表示標準模式

方法二：jquery爲咱們提供的方法，以下：
alert($.boxModel)

alert($.support.boxModel)

3、不一樣瀏覽器間的兼容問題及解決方法

一、 CSS resert： 抹去不一樣瀏覽器的默認屬性，使得不一樣瀏覽器兼容性問題降到最低，最好能夠根據項目狀況設置css resert代碼。

       缺點主要是：抹去瀏覽器默認屬性、在瀏覽器調式工具備大量繼承鏈

 

二、CSS hack

2.1 定義：CSS hack因爲不一樣廠商的瀏覽器，好比Internet Explorer,Safari,火狐,Chrome等，或者是同一廠商的瀏覽器的不一樣版本，如IE6和IE7，對CSS的解析認識不徹底同樣，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效果。 這個時候咱們就須要 針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果， CSS hack書寫順序，通常是將適用範圍廣、被識別能力強的CSS定義在前面。

 

2.2   分類

CSS Hack大體有3種表現形式， CSS屬性前綴法、選擇器前綴法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不一樣版本之間的表現差別而引入的。