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

龍泉寺掃地僧發表於2019-03-01

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

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

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


號稱世界第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 一經面世,立刻震撼了世人,當然也包括我。預知後事如何,且看下回分解。


相關文章