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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

時間來到了2003年，蘋果發布了Safair瀏覽器并在05年開源了Safair的內核，也就是現在占領了瀏覽器大半江山的Webkit內核。

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

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

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

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

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

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

2011年，Firefox5發布，自此Gecko內核的版本號于Firefox的版本號完全同步，比如你用的是Firefox55，那么你的內核版本就是Gecko55。

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

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

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

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

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

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