从红芯事件聊聊浏览器内核(一)

8,858 阅读7分钟

大家这几天,想必都被红芯浏览器刷屏了,这货:




号称世界第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 一经面世,立刻震撼了世人,当然也包括我。预知后事如何,且看下回分解。