我们每天都在使用浏览器浏览各种各样的网页,而每个页面都是由代码组成,点击浏览器右键查看源代码,可以看到网页的源码内容,浏览器根据这些代码,解析成可视的页面。
无数前端程序员的心酸凝聚成了我们普通用户眼中的网页。那为什么这一堆代码可以变成如此漂亮的网页呢?答案要归功于浏览器的“渲染引擎”,也就是我们常说的“内核”。今天我就为大家科普一下浏览器的内核发展编年史。
浏览器内核分成两部分:渲染引擎和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内核的逆袭故事,最后还得感叹一下苹果强大的实力,真是个干啥啥就能成为主流、高端的神奇公司。
像极了我们的人生,有人大起大落依旧过的很不错,有人因跟不上时代发展而渐渐被边缘化,有人默默无闻却飞黄腾达,有的人天生就牛逼。当我们看透了这些,也就能释然地度过一生。