我們每天都在使用瀏覽器瀏覽各種各樣的網(wǎng)頁(yè)，而每個(gè)頁(yè)面都是由代碼組成，點(diǎn)擊瀏覽器右鍵查看源代碼，可以看到網(wǎng)頁(yè)的源碼內(nèi)容，瀏覽器根據(jù)這些代碼，解析成可視的頁(yè)面。

無(wú)數(shù)前端程序員的心酸凝聚成了我們普通用戶眼中的網(wǎng)頁(yè)。那為什么這一堆代碼可以變成如此漂亮的網(wǎng)頁(yè)呢?答案要?dú)w功于瀏覽器的“渲染引擎”，也就是我們常說(shuō)的“內(nèi)核”。今天我就為大家科普一下瀏覽器的內(nèi)核發(fā)展編年史。

瀏覽器內(nèi)核分成兩部分：渲染引擎和js引擎，由于JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎，渲染引擎解析HTML文檔，并將文檔中的標(biāo)簽轉(zhuǎn)化為DOM節(jié)點(diǎn)樹(shù)，即” 內(nèi)容樹(shù)” 。

同時(shí)，它也會(huì)解析外部CSS文件以及style標(biāo)簽中的樣式數(shù)據(jù)。 這些樣式信息連同HTML中的"可見(jiàn)內(nèi)容" 一道被用于構(gòu)建成“渲染樹(shù)(Render樹(shù))” 。

渲染樹(shù)構(gòu)建完畢之后，將會(huì)進(jìn)入” 布局” 處理階段，即為每一個(gè)節(jié)點(diǎn)分配一個(gè)屏幕坐標(biāo)。 再下一步就是繪制(painting)，即遍歷render樹(shù)，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)。

渲染引擎決定了瀏覽器如何顯示網(wǎng)頁(yè)的內(nèi)容以及頁(yè)面的格式信息。不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁(yè)代碼的解釋也有不同，因此同一網(wǎng)頁(yè)在不同內(nèi)核的瀏覽器里中渲染效果也可能不太相同，這也是網(wǎng)頁(yè)編寫者需要在不同內(nèi)核的瀏覽器中測(cè)試網(wǎng)頁(yè)顯示效果的原因。

1990年，Tim Berners-Lee(蒂姆·伯納斯·李)發(fā)明了人類歷史上最深遠(yuǎn)、最廣泛的傳播媒介——萬(wàn)維網(wǎng)(WorldWideWeb)。這位老兄順便也做出了史上第一個(gè)瀏覽器，跟萬(wàn)維網(wǎng)同名，也叫WorldWideWeb。這個(gè)瀏覽器只能在NeXT系統(tǒng)上運(yùn)行，而NeXT軟件公司的老板大家就很熟悉了，就是當(dāng)年被蘋果掃地出門的喬布斯。后來(lái)蘋果將NeXT收購(gòu)，喬布斯也重新掌管蘋果，NeXT系統(tǒng)也成為了優(yōu)雅的macOS的基礎(chǔ)。

緊接著在1991年，老李和他的團(tuán)隊(duì)又用從“入門到放棄”的C語(yǔ)言重新寫了一遍在NeXT上運(yùn)行萬(wàn)維網(wǎng)的各種組件，叫做Libwww，這套組件里面自帶了史上第二個(gè)瀏覽器，叫做Line Mode Browser。由此開(kāi)始繼續(xù)向后演化。

人類的祖先剛開(kāi)始只是一個(gè)原始的細(xì)胞，同樣，剛剛誕生的瀏覽器也只能顯示文本信息，就連顯示圖片都成了一種奢望。

人們對(duì)美好生活的向往總是推動(dòng)著生產(chǎn)力的不斷進(jìn)步，于是伊利諾伊大學(xué)大學(xué)的NCSA(美國(guó)國(guó)家超級(jí)計(jì)算應(yīng)用中心)在1993年成功發(fā)布了第一款可以顯示圖像的瀏覽器，可能是因?yàn)槿澜缛嗣穸枷矚g日本電影的緣故，他們給瀏覽器取名為Mosaic(馬賽克)。

在PC時(shí)代，瀏覽器是一個(gè)巨大的流量入口和資源入口，可以帶來(lái)難以估量的商業(yè)價(jià)值。這也是Mosaic團(tuán)隊(duì)領(lǐng)導(dǎo)人馬克•安德森(Marc Andreessen)帶領(lǐng)團(tuán)隊(duì)辭職并自主創(chuàng)業(yè)建立Netscape(網(wǎng)景公司)的原因。

當(dāng)時(shí)有很多人都看到了這個(gè)風(fēng)口，但只有馬克•安德森率先成功了，于1994年發(fā)布了網(wǎng)景瀏覽器。微軟很快嗅到了商機(jī)，不像近幾年反應(yīng)那樣遲鈍。開(kāi)發(fā)者業(yè)內(nèi)有句話叫“不要重復(fù)造輪子”，為了快速搶占這個(gè)“藍(lán)海市場(chǎng)”，微軟收購(gòu)了一家名為Spyglass的公司，這家公司已經(jīng)從NCSA處買了Mosaic的授權(quán)，可以基于此直接開(kāi)始開(kāi)發(fā)，于1995年迅速發(fā)布了IE 1.0。

同年，“第一次瀏覽器大戰(zhàn)”爆發(fā)，并在1999年以Netscape徹底失敗并被AOL(美國(guó)在線)收購(gòu)而結(jié)束。關(guān)于網(wǎng)景瀏覽器的失敗原因，很多人歸因于網(wǎng)景瀏覽器收費(fèi)而IE免費(fèi)而導(dǎo)致，這的確是一個(gè)很重要的原因，但并不全面，因?yàn)榫W(wǎng)景它雖是一個(gè)商業(yè)軟件，但它也提供了可在Unix，VMS,MacOS,和Windows 等操作系統(tǒng)上運(yùn)行的免費(fèi)版本。

關(guān)鍵還是在于產(chǎn)品質(zhì)量，用戶會(huì)用腳投票的，誰(shuí)家產(chǎn)品好就用誰(shuí)家的。微軟用兩年時(shí)間就從IE1.0更新到了IE4.0，并率先推出了Trident內(nèi)核。這種開(kāi)發(fā)效率太恐怖了，然后將IE直接集成至Windows里，讓用戶買了電腦開(kāi)機(jī)就能用。

要知道人懶會(huì)懶到極致的，現(xiàn)在有了個(gè)開(kāi)機(jī)就能用而且性能還不錯(cuò)的瀏覽器，誰(shuí)會(huì)那么麻煩再去下載一個(gè)瀏覽器呢?當(dāng)然那幾年網(wǎng)景自己也不爭(zhēng)氣，軟件穩(wěn)定性頻頻出現(xiàn)問(wèn)題。

同時(shí)我們也能看出競(jìng)爭(zhēng)的重要性，有公司之間的競(jìng)爭(zhēng)，用戶才能用上好產(chǎn)品。IE在擊敗網(wǎng)景之后，在Chrome未出世之前的這幾年，幾乎就沒(méi)怎么更新過(guò)自己的內(nèi)核，瀏覽器各種功能越做越爛。直到08年Chrome問(wèn)世，微軟為了狙擊Chrome，守護(hù)住自己的既得利益，才開(kāi)始頻繁更新IE和Trident內(nèi)核。最后被Chrome連鍋端了。所以競(jìng)爭(zhēng)是殘酷的，但壟斷只會(huì)更加殘酷!

在1995-1999的“第一次瀏覽器大戰(zhàn)”期間，除了97年微軟IE4.0發(fā)布并帶來(lái)了Trident內(nèi)核之外，還有幾件值得一提的事。首先是96年Opera瀏覽器首次亮相，這是一個(gè)一直沒(méi)有掀起什么波瀾，卻一直存在至今，活得還挺好的一個(gè)瀏覽器。

然后就是98年網(wǎng)景公司為了挽回?cái)【肿隽俗詈笠淮闻?，開(kāi)放自己的源代碼并搞出了Gecko內(nèi)核，雖然公司最終失敗了，但是卻留下了Gecko內(nèi)核這顆希望的種子。

同年Mozilla組織出現(xiàn)，原網(wǎng)景公司的一批大神也都轉(zhuǎn)入這個(gè)開(kāi)源組織繼續(xù)進(jìn)行Gecko內(nèi)核的開(kāi)發(fā)工作，他們不甘心就此失敗，于02年開(kāi)發(fā)出了Phoenix瀏覽器，取其“鳳凰涅槃”之意。

后面因?yàn)楹网P凰科技(Phoenix Technologies)的名稱沖突，改名Firebird，但沒(méi)想到有一個(gè)開(kāi)源數(shù)據(jù)庫(kù)居然也叫Firebird，最后只能定名為Firefox(火狐瀏覽器)。所以可以將Firefox理解為涅槃重生的網(wǎng)景瀏覽器，瀏覽器戰(zhàn)爭(zhēng)又一次打響了，至今也遠(yuǎn)遠(yuǎn)看不到結(jié)束，中間還有各路豪強(qiáng)紛紛入局，頗有楚漢三國(guó)、群雄并起、逐鹿中原的味道!

時(shí)間來(lái)到了2003年，蘋果發(fā)布了Safair瀏覽器并在05年開(kāi)源了Safair的內(nèi)核，也就是現(xiàn)在占領(lǐng)了瀏覽器大半江山的Webkit內(nèi)核。

Chrome早期也用的是Webkit內(nèi)核，后面基于Webkit開(kāi)發(fā)出了Blink內(nèi)核。并且開(kāi)源了一個(gè)瀏覽器項(xiàng)目Chromium，而目前幾乎所有的瀏覽器都是基于Chromium的套殼再創(chuàng)造，所以Webkit的占有率高的嚇人。

同樣是2003年，Opera悶聲發(fā)大財(cái)，悄悄的發(fā)布了Opera7并帶來(lái)了Presto內(nèi)核。玩了幾年自己的內(nèi)核后，又跑去跟Google一起開(kāi)發(fā)Blink內(nèi)核。跟大佬一起共事的肯定也是大佬，那這個(gè)Opera究竟是何方神圣呢?

Google的Blink來(lái)源于蘋果開(kāi)源的Webkit，而蘋果的開(kāi)源的Webkit來(lái)源于KHTML項(xiàng)目，很多KHTML的貢獻(xiàn)者其實(shí)是來(lái)自于Trolltech。因此，Google Chrome和Safari這個(gè)分支其實(shí)是來(lái)自于Trolltech。

Trolltech也是一家挪威公司，有著名框架項(xiàng)目QT，而且公司就在Opera的樓下。很多員工彼此都是好朋友，連代碼都是部分共享的，KHTML和Opera的自有引擎Presto架構(gòu)非常類似”。換句話說(shuō)，這三個(gè)瀏覽器內(nèi)核，可能有很大一部分的代碼與思路是一樣的。

2008年，Google攜Chrome參戰(zhàn)!Chorme相比于其他競(jìng)爭(zhēng)者，界面更加簡(jiǎn)潔，異常好用。2009年底，谷歌推出了Chrome擴(kuò)展庫(kù)，使用戶可以安裝具有額外功能的第三方插件，受到了用戶的熱烈歡迎。僅一年就有了8500多個(gè)擴(kuò)展和1500多個(gè)瀏覽器主題。這也使得Chrome用戶激增，從年初的4000萬(wàn)增長(zhǎng)到2010年底的1.2億!。2012年夏天，Chrome占有31%的市場(chǎng)份額，取代IE成為全球最受歡迎的瀏覽器。

微軟為了遏制Chrome，從09年開(kāi)始頻繁更新IE和Trident內(nèi)核版本號(hào)，當(dāng)年就發(fā)布了Trident4.0，11年5.0，12年6.0，13年7.0，在2015年極致優(yōu)化并改名為EdgeHTML并跟隨Win10同步發(fā)布，但最終無(wú)力回天，轉(zhuǎn)投Chromium懷抱，在2020年1月發(fā)布了全新的Edge!

2011年，F(xiàn)irefox5發(fā)布，自此Gecko內(nèi)核的版本號(hào)于Firefox的版本號(hào)完全同步，比如你用的是Firefox55，那么你的內(nèi)核版本就是Gecko55。

2013年，Google和Opera決定合作開(kāi)發(fā)Blink內(nèi)核，并在13年4月發(fā)布第一版。但是早在2010年，蘋果就已經(jīng)發(fā)布了Webkit2。Webkit2的目標(biāo)是將元件抽象化，并提供更干凈的網(wǎng)頁(yè)渲染，而谷歌卻希望在瀏覽器的開(kāi)發(fā)上擁有更大的自由度，同時(shí)避免與上游沖突，更可透過(guò)移除Chrome沒(méi)有使用的組件而簡(jiǎn)化自己的程序庫(kù)。

于是Blink早期完全復(fù)制了Webkit，之后刪除了與自身無(wú)關(guān)的代碼，開(kāi)始大刀闊斧的對(duì)內(nèi)核進(jìn)行改革。

從13年至今，Google積極利用其市場(chǎng)地位，擴(kuò)大Chrome在全球的覆蓋范圍，并開(kāi)發(fā)新的工具，以適應(yīng)人們不斷變化的網(wǎng)絡(luò)生活方式。

現(xiàn)在我們知道了，蘋果是在KHTML的基礎(chǔ)上開(kāi)發(fā)的Webkit，谷歌又從Webkit的基礎(chǔ)上開(kāi)發(fā)了Blink，Opera開(kāi)發(fā)了一段時(shí)間Presto后，就去和谷歌開(kāi)發(fā)Blink去了，可見(jiàn)內(nèi)核開(kāi)發(fā)何其困難。雖然國(guó)內(nèi)瀏覽器百花齊放，其實(shí)都是Webkit、Blink、Gecko的套殼瀏覽器。

僅僅十多年，Chrome憑借一己之力重新定義了瀏覽器。我們的瀏覽器內(nèi)核發(fā)展編年史到這里也就接近尾聲了。縱觀整個(gè)發(fā)展史，我們既可以看到Netspace被擊敗后又改頭換面重新爬起一直活到現(xiàn)在的傳奇經(jīng)歷，也可以看到IE因“高處不勝寒”而不思進(jìn)取最終落得了“基于Chromium”的悲慘境地，還可以看到小眾卻優(yōu)雅的Opera深藏功與名，卻參與開(kāi)發(fā)了目前占有率最大的Blink內(nèi)核的逆襲故事，最后還得感嘆一下蘋果強(qiáng)大的實(shí)力，真是個(gè)干啥啥就能成為主流、高端的神奇公司。

像極了我們的人生，有人大起大落依舊過(guò)的很不錯(cuò)，有人因跟不上時(shí)代發(fā)展而漸漸被邊緣化，有人默默無(wú)聞卻飛黃騰達(dá)，有的人天生就牛逼。當(dāng)我們看透了這些，也就能釋然地度過(guò)一生。