主流瀏覽器內(nèi)核有哪幾種？
1.背景介紹
什么是瀏覽器的內(nèi)核？
瀏覽器最重要或者說最核心的部分叫做“Rendering Engine”，可大概譯為“渲染引擎”，不過我們一般習(xí)慣將之稱為“瀏覽器內(nèi)核”。負(fù)責(zé)對網(wǎng)頁語法的解釋并渲染網(wǎng)頁。所以，通常所謂的瀏覽器內(nèi)核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息。
2.它在瀏覽器中的作用是什么？
瀏覽器內(nèi)核對于瀏覽器而言，是基礎(chǔ)，是依托。如果沒有了瀏覽器內(nèi)核，那么瀏覽器是無法獨立存在且產(chǎn)生作用的。它的存在，決定了網(wǎng)頁的呈現(xiàn)的內(nèi)容、格式以及效果。所以說，一個好的瀏覽器，一定是基于有一個穩(wěn)定、高端、作用明顯的瀏覽器內(nèi)核的。
2.知識剖析
1.四大瀏覽器內(nèi)核介紹
(1)Trident內(nèi)核
(2)Gecko內(nèi)核
(3)WebKit內(nèi)核
(4)Blink內(nèi)核
(1)TRIDENT內(nèi)核
該內(nèi)核程序在1997年的IE4中首次被采用，是微軟在Mosaic代碼的基礎(chǔ)之上修改而來的，并沿用到IE11，也被普遍稱作”IE內(nèi)核”。Trident實際上是一款開放的內(nèi)核，其接口內(nèi)核設(shè)計的相當(dāng)成熟，因此才有許多采用IE內(nèi)核而非IE的瀏覽器(殼瀏覽器)涌現(xiàn)。由于IE本身的“壟斷性”（雖然名義上IE并非壟斷，但實際上，特別是從Windows 95年代一直到XP初期，就市場占有率來說IE的確借助Windows的東風(fēng)處于“壟斷”的地位）而使得Trident內(nèi)核的長期一家獨大。
微軟很長時間都并沒有更新Trident內(nèi)核，這也導(dǎo)致了后面的兩個后果： 一是Trident內(nèi)核曾經(jīng)幾乎與W3C標(biāo)準(zhǔn)脫節(jié)（2005年） 二是Trident內(nèi)核的大量 Bug等安全性問題沒有得到及時解決，然后加上一些致力于開源的開發(fā)者和一些學(xué)者們公開自己認(rèn)為IE瀏覽器不安全的觀點，也有很多用戶轉(zhuǎn)向了其他瀏覽 器，F(xiàn)irefox和Opera就是這個時候興起的。Trident內(nèi)核的常見瀏覽器有：IIE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；以及國產(chǎn)瀏覽器中的兼容模式。
(2)GECKO內(nèi)核
Netscape6開始采用的內(nèi)核，后來的Mozilla FireFox(火狐瀏覽器) 也采用了該內(nèi)核，Gecko的特點是代碼完全公開，因此，其可開發(fā)程度很高，全世界的程序員都可以為其編寫代碼，增加功能。因為這是個開源內(nèi)核，因此受到許多人的青睞，Gecko 內(nèi)核的瀏覽器仍然還是Firefox (火狐) 用戶最多，所以有時也會被稱為Firefox內(nèi)核。Gecko核心設(shè)計的相對成熟，在無法獲取源碼的情況下，開放程度僅次于IE。
(3)WEBKIT內(nèi)核
Webkit:是蘋果公司自主研發(fā)的內(nèi)核，也是Safari瀏覽器使用的內(nèi)核。 Webkit引擎包含渲染引擎WebCore和javascript引擎JSCore，均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟件，在GPL條約下授權(quán)，同時支持BSD系統(tǒng)的開發(fā)。所以Webkit也是自由軟件，同時開放源代碼。Google Chrome、Opera及各種國產(chǎn)瀏覽器高速模式也使用Webkit作為內(nèi)核。
(4)BLINK內(nèi)核
Blink是一個由Google和Opera Software開發(fā)的瀏覽器排版引擎，Google計劃將這個渲染引擎作為Chromium計劃的一部分，并且在2013年4月的時候公布了這一消息。這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）中使用。
4.各瀏覽器及版本的市場份額
3.常見問題
為什么瀏覽器的兼容性是前端開發(fā)者所詬病的一個頑疾呢？
4.解決方案
所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都應(yīng)該是統(tǒng)一的顯示效果。所以瀏覽器的兼容性問題是前端開發(fā)人員經(jīng)常會碰到和必須要解決的問題。
在上古時期，IE橫行的年代，前端開發(fā)人員通過CSS hack技術(shù)達到想要的想過,CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。
JS方面：IE的早期版本對w3c標(biāo)準(zhǔn)的支持相當(dāng)?shù)牟挥押?，以至于Chrome,FireFox的市場占有率與其平起平坐的時候，前端開發(fā)人員在寫JS功能時不得不同時兼容2到3種瀏覽器，開發(fā)效率及其低下。<隨之出現(xiàn)的>jQuery以良好的兼容性深得開發(fā)人員的追捧，成為一代神話。
如今，webkit內(nèi)核的瀏覽器成為主流，開源化的內(nèi)核得到了許多瀏覽器廠商的青睞，瀏覽器之間的兼容性問題也就不是什么問題了。
5.編碼實戰(zhàn)
如何在國產(chǎn)雙核瀏覽器中強制使用webkit內(nèi)核
6.擴展思考
在我們的日常開發(fā)過程中，是否還需要向下兼容其它瀏覽器，例如：ie8 ?
看業(yè)務(wù)需求，如果產(chǎn)品或者老板讓代碼向下兼容，就得寫兼容代碼
7.參考資料
1.http://www.itdecent.cn/p/b6a893cc1b0c
2.http://gs.statcounter.com/
http://#baidu.com/data/browser
1.FireFox和Chrome瀏覽器的js引擎各是什么？
主流瀏覽器 js引擎
IE -> Edge JScript（IE3.0-IE8.0） / Chakra（IE9+之后，查克拉，微軟也看火影么..）
Chrome V8（大名鼎鼎）
Safari Nitro（4-）
Firefox SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-）
Opera Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-）
2.（瀏覽引擎哪家強）哪個引擎將會成為主流？
肯定是谷歌v8引擎
3.遇到過當(dāng)高級瀏覽器之間的一些差異以及解決方法？
IE6雙邊距
行內(nèi)屬性設(shè)置了塊級屬性（display: block;）后，會產(chǎn)生雙倍邊距。
解決方案是在添加一個 display: inline; 或者 display: table;
雙倍margin
浮動元素設(shè)置了margin在IE6下會產(chǎn)生雙倍margin。
只要給浮動元素設(shè)置 display: inline;就可以了。或者說使用IE6的hack：_margin；
盒模型差異
IE盒模型：margin 、 content（包含border、padding）
W3C盒模型： margin 、border、 padding、 content
CSS3中的box-sizing的屬性就是為了這兩種模式，border-box（IE盒明星）和content-box（W3C）
img標(biāo)簽-圖片存在邊距
使用 vertical-align 屬性可以清楚這種邊距
順便說下a標(biāo)簽同樣會存在邊距，具體的解決方法可以看看去除inline-block元素間間距的N種方法;
IE6 高度無法小于10px
添加overflow的屬性
設(shè)置font-size的屬性為高度的大小
js部分
獲取屬性
根據(jù)很多的人的反饋來看，無論是常規(guī)的獲取自定義屬性，或是jq的attr()在不同的環(huán)境下都是存在著些許兼容性問題，所以為了保險起見，最好是使用原生的getAttribute()來獲取屬性；
ID
在IE下，我們是可以通過document.idName來獲取元素，但是Firefox是不允許的。
而且Firefox中我們使用與html對象ID相同的變量名，所以，獲取元素最好使用document.getElementById(”idName”) 代替 document.idName，避免不必要的bug
input.type
IE下不允許修改input的類型，F(xiàn)irefox可以修改。盡量避免修改input的類型。
