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

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

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

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

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

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

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

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

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

人們對美好生活的向往總是推動著生產(chǎn)力的不斷進步，于是伊利諾伊大學(xué)大學(xué)的NCSA(美國國家超級計算應(yīng)用中心)在1993年成功發(fā)布了第一款可以顯示圖像的瀏覽器，可能是因為全世界人民都喜歡日本電影的緣故，他們給瀏覽器取名為Mosaic(馬賽克)。

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

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

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

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

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

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

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

然后就是98年網(wǎng)景公司為了挽回敗局做了最后一次努力，開放自己的源代碼并搞出了Gecko內(nèi)核，雖然公司最終失敗了，但是卻留下了Gecko內(nèi)核這顆希望的種子。

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

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

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

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

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

Google的Blink來源于蘋果開源的Webkit，而蘋果的開源的Webkit來源于KHTML項目，很多KHTML的貢獻者其實是來自于Trolltech。因此，Google Chrome和Safari這個分支其實是來自于Trolltech。

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

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

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

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

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

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

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

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

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

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