從紅芯事件聊聊瀏覽器內核（一）

你們這幾天，想必都被紅芯瀏覽器刷屏了，這貨：

號稱世界第5個自主內核、中國首款，難道作個瀏覽器內核真有這麼簡單嗎？

正巧我多年一直在收集各類瀏覽器的資料和趣聞，就讓咱們來看下瀏覽器內核究竟是什麼，以及難度如何。

提及瀏覽器，就得從當年IE大戰網景提及

IT界的洪荒時代

在IT界的洪荒年代（1992年），人們在互聯網上仍是隻能看黑白屏幕上一行又一行的字符的時候，伊利諾斯州大學（NCSA）的馬克·安德森 就突發奇想的搞出一個名爲 Mosaic 的瀏覽器，能夠顯示圖文信息。在放到網上免費傳播後，你們紛紛對這種交互方式很是感興趣。但他們意識到，不管Mosaic瀏覽器多麼受歡迎，它終究只是一個學校的產物。令兩人不爽的是，他們沒法說服伊利諾斯州大學轉讓 Mosaic 瀏覽器。安德森最終決定從新編寫一個瀏覽器，在你們的努力下，一個新的付費瀏覽器又出來了，它就是 Navigator，而公司的名字就是 Netscape，1994年成立。

Netspace 上市不久，Microsoft 就發佈了人們指望已久的新操做系統 Windows 95，同時還有瀏覽器 Internet Explore 1.0。

IE的功能那時很辣雞，不支持Java,不支持插件,速度也很慢。其實這時候的IE1.0，仍是從NCSA Mosaic瀏覽器爲基礎改造而來，它的發佈時間是1995年8月份。同年11月，微軟心急火燎地推出2.0版本。

也就是說，當年的 IE 和 Netspace ，來源都是當年的 Mosaic。

有意思的是，多年後，微軟 NT4 和 win2k 的代碼泄漏了，裏面正好包含 IE2 和 IE5.5 的代碼。因而2011的某一天，我也突發奇想的把這兩貨從微軟泄漏代碼里扣了出來，並費了老大一肚子勁編譯了出來，代碼見：

bbs.pediy.com/thread-1376…

IE2的代碼相對好編譯一點，須要補上缺乏的一堆頭文件，以及個別實現不完整的補充，並在理解架構的基礎上，把一些小bug改掉。

上個IE2的圖。

IE2就是不帶當年微軟 trident 排版引擎的、聽說改自 Mosaic 的上古瀏覽器，此時 css 都還沒發明，和如今的瀏覽器差距極其巨大。

不過IE2並非說沒用，至少我把這玩意移植到了個人界面庫，而且成爲了一個牛逼無比的 richedit 了，嘿嘿…

其實IE2的結構很是清晰，扣出來的過程頗有意思。IE2就一個函數，用來顯示全部的 gif、文本。另外有幾個函數負責解析 html。

當年我扣出來後，作了一個文本顯示控件，很是爽，哈哈。文本的選擇等邏輯也很完整，並且很容易讀懂，由於是純 C 打造。

SGML_write 把 html 解析到_w3doc 裏後，調個 TW_Draw 就把全部內容包括圖像都顯示出來了。

時間線來到 IE6的時代

在此期間，發生了一件重大的事情，就是 CSS 也被髮明出來了。據

www.zhihu.com/question/29…

裏的描述，發明 CSS 的人叫 Haakon Wium Lie，是 Opera 的 CTO。

有意思的是，另外一款瀏覽器內核 webkit 的前身，KHTML，來自 Trolltech 公司的 QT 項目。KHTML 和 Opera 都是挪威的公司，兩家基本是上下樓的關係，並且部分代碼是共享的，因此我不得不懷疑當年兩家是同時開始擼瀏覽器內核的，而後由於某些緣由開始分道揚鑣。

因此也能夠看到，如今流行的五大內核（Opera 、blink、webkit、firfox、IE），其中三家都是源自當年的挪威派系，甚至不少 CSS 標準，可能都是專門爲 Opera 而設計再提出成爲標準的。

話說回到 IE6，這但是當年一個劃時代的瀏覽器。雖然在今天被人黑出翔了，但這也側面說說明當年 IE6 有多牛逼，時至今日還在發揮餘溫。

IE6 以及前身 IE5.5 當年提出了許多今天看來很是黑科技的東西。好比：

1.提出 XMLHttpRequest，被谷歌發掘後成了風靡全球的 AJAX。

2.提出 VML，矢量渲染語言，繪製各類炫酷矢量圖不在話下。

3.提出濾鏡功能，能給網頁實現各類炫酷效果。其實你們常常見到的 word 裏的百葉窗什麼的動畫，就是濾鏡功能。並且有意思的是，word 裏的此功能，和IE是共用同個模塊的，我還嘗試過在我本身的程序裏直接調用 COM 接口來實現一樣的炫酷效果。

4.提出 HTA 的概念，能夠直接把 html 變成本地應用。和如今的 hybrid app、PWA 之流是否是很像？

5.各類先進的 CSS 排版功能。

正是這麼多神奇和強大的功能，讓 IE6 在推出後，打爆了老對手 Netscape（固然，微軟也是用了很多猥瑣手段，例如和360同樣的捆綁安裝）。微軟今後一家獨霸瀏覽器市場，以致於10年時間整個瀏覽器部門都沒事情能夠作，而後被解散了…可能當時微軟認爲天下已經掌握手中，瀏覽器基本沒什麼可發展了吧。

IE 代碼界面庫

想重溫 IE5.5\IE6的人，能夠在剛纔個人帖子裏下載。當年我被IE震驚之餘，也嘗試從 win2k 泄漏代碼里扣出IE部分。最後在我擼到一半的時候，發現另一個豌豆莢的哥們已經擼出來了，他把 IE5.5 的代碼整理成了他的一個界面庫（聽說萬兄敲這個代碼的時候敲的肩膀都出問題了，也是很拼）：

萬兄整理的基於 IE 代碼界面庫，不但有基礎的 div + css 功能，還支持 activex 控件，支持界面的 Filter 特效。不過 vml 不支持，我估計 vml 的代碼這個 IE5.5版本還沒開發出來。

這個版本的IE架構我以前寫了幾篇文章，原本發在百度空間上，結果百度空間倒閉了，文章也不見了…

憑一點點殘存的印象，我記得這個版本代碼寫的有點難懂。說混亂倒不至於，裏面各類類的劃分很清晰的，只是多是從 DOS 時代走出來的老程序員的習慣，代碼裏的變量、函數名什麼的，不少是簡寫，看起來有累，要時刻回憶 pPbsz 之類的變量具體啥意思。

估計微軟要找我麻煩，畢竟是泄漏代碼

不過這注釋寫的仍是挺完善的。

有意思的是，曾經在前端界大名鼎鼎的 IE hasLayout 問題，能夠在這個代碼裏找到問題的成因。

估計微軟要找我麻煩，畢竟是泄漏代碼

haslayout 的註釋

經過代碼能夠看出，haslayout 是 element 的一個成員變量，用來減小排版的計算。感興趣的人能夠仔細讀下 haslayout 的具體邏輯。

這個版本的IE架構有個小小問題，沒有把排版和渲染獨立出來，都混合在同一套數據結構裏（而以後的 webkit，就區分紅 Node、RenderObject），並且也沒作跨平臺準備，全都使用的 windows 的數據結構，如 HDC。不知道後來IE實現跨平臺到 MAC 上是否是要作吐血。

話說 IE6 出了 N 年以後，谷歌站出來打臉了。谷歌原本是主推 Firfox 的（也就是 Netscape 交給開源社區後，重整後涅槃重生的全新瀏覽器），但谷歌一直在集中巨大資金研發本身的開源瀏覽器：chrome。果真，2008年，chrome 一經面世，馬上震撼了世人，固然也包括我。預知後事如何，且看下回分解。