從紅芯事件聊聊瀏覽器內核 (一)

來自專欄盟主來了340 人贊了文章

（開寫前來波硬廣：https://weolar.github.io/miniblink/ 我的史上最小巧的chromium內核控制項新鮮出爐，10幾M大小，純C介面，幾行代碼就能集成到軟體里。目前僅支持windows。）

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

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

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

說起瀏覽器，就得從當年IE大戰網景說起。

在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的某一天，我也突發奇想的把這兩貨從微軟泄漏代碼里扣了出來，並費了老大一肚子勁編譯了出來，代碼見：

https://bbs.pediy.com/thread-137616.htm

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

上個IE2的圖。

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

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

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

當年我扣出來後，做了一個文本顯示控制項，非常爽，哈哈。文本的選擇等邏輯也很完整，而且很容易讀懂，因為是純C打造。

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

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

https://www.zhihu.com/question/290564335/answer/472165753#comment-503954538

里的描述，發明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年時間整個瀏覽器部門都沒事情可以做，然後被解散了…可能當時微軟認為天下已經掌握手中，瀏覽器基本沒什麼可發展了吧。

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

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

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

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

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

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

通過代碼可以看出，haslayout是element的一個成員變數，用來減少排版的計算。感興趣的人可以仔細讀下haslayout的具體邏輯。

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

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