浏览器内核发展

Yoram
1,534 阅读15分钟

浏览器与浏览器内核的发展历程

首先定义下何为浏览器及浏览器内核：

浏览器：用来检索、展示以及传递Web信息资源的应用程序。如Chrome、FireFox、Safiar、360

浏览器内核：驱动浏览器运行的核心部分。如Trident、Blink，Webkit，Gecko。

  • 1990年，蒂姆·伯纳斯-李（Tim Berners-Lee）[英]发明了世界上第一款浏览器WorldWideWeb浏览器（Nexus），这是一款为 NeXT 计算机开发的易于使用的图形化界面浏览器，超文本第一次通过公开网络被链接起来——即我们现在所熟知的 Web。这时浏览器的功能很简单，只支持文本、简单的样式表和有限格式的图片和声音。所以，那时的网页也很简单，承载的信息大多以文本为主。
蒂姆·伯纳斯-李 WorldWideWeb浏览器

蒂姆·伯纳斯-李 WorldWideWeb浏览器

  • *1993年， *网景公司。马克·安德森（Marc Andreessen ）[美]领导的团队推出了 Mosaic浏览器 ，而后又改名为 Netscape浏览器。一经推出，便大受欢迎，可以说是第一款真正意义上被用户广泛使用的浏览器。虽说如此，它所支持的功能也是特别有限，没有 CSS，没有 JavaScript，只能显示一些简单的 HTML 标签，更别说现在这些丰富的 HTML5 的功能了。但也满足了那个时代上网用户的需求，同时也取得了可观的市场份额。

Mosaic(马赛克)浏览器

Mosaic(马赛克)浏览器

image.png

  • 1995年，计算机软件巨头 Microsoft 获得了旧版 Mosaic 的代码授权，从而建立了自己的“Web 窗口”—— Internet Explorer。该浏览器的推出引发了战争。“第一次浏览器大战”开始，Netscape 与 Microsoft 竭力为各自的产品推出新版本，试图以更快、更好的产品来超越对方。

1995-08-Microsoft Internet Explorer 1

1995-08-Microsoft Internet Explorer 1

  • 1996年，Opera 2.10发布

image.png

Opera

  • 1995年 - 1997年，由于微软将Internet Explorer浏览器（IE）与自家的 Windows 操作系统强制捆绑。很快取得了更高的市场份额，获得了空前的成功，把 Netscape浏览器 挤出了市场直至消亡。自此，第一次浏览器大战，以 IE 大获全胜而告终。

image.png

  • 1997年，IE4.0发布，带来了Trident内核，IE4到IE11都使用此内核（国产浏览器的“兼容模式”）

Internet Explorer V4.0

Internet Explorer V4.0

  • 1998年，落败的Netscape公司开始研发下一代基于当时的Mosaic内核的排版引擎，最初起名为Raptor，以开源形式放在网上，因商标问题后改为NGLayout，最后又被修改为Gecko。 同年网景公司成立了“Mozilla组织”，让它来协调Mozilla应用包（Mozilla Application Suite）的开发，原网景公司的一批大神也都转入这个开源组织继续进行Gecko内核的开发工作，他们不甘心就此失败。

image.png

      同年另一方面，KDE(K Desktop Environment)团队意在开发一套Linux操作系统（或说是UNIX-like系统）可用的图形桌面环境，类似于Windows和MAC OS系列的个人桌面环境，而桌面中最重要的就是浏览器，所以KDE团队另起了一个小组KHTML，专门负责开发KDE桌面的浏览器的内核（该内核也叫做**KHTML**）

      苹果参与 KDE 开源社区发起的渲染引擎KHTML项目。

KDE & Apple

  • 2000年10月，内置Gecko的Netscape6.0发布，

      同年，KDE项目的ECMAScript、JS引擎——KJS由哈里·波顿开发。

  • 2001年，当年苹果在比较了 Gecko 和 KHTML 后，选择了后者来做引擎开发，是因为相比Gecko，KHTML 拥有清晰的源码结构和极快的渲染速度，也实现了JavaScript脚本的快速解释器调用。事实上，这个宝押对了。这种轻灵随后就赢得了Google的青睐（2008 年谷歌公司发布 chrome 浏览器，采用的 chromium 内核便 fork 了Webkit）。

      后来苹果因和 KDE 社区的分歧，创建 KHTML 分支— Webkit，Apple的Don Melton领导开发了WebKit ( 现称WebKitLegacy/WebKit1 ) 的项目，当时仅为KHTML及KJS的复刻，并重命名为WebCore及JavaScriptCore，后续计划将用于Safari和Mac OS。

WebKit

      同年，Mozilla开源组织 以 Phoenix 为项目名创建 Firefox。

image.png

  • 2003年1月7日，在这段时间，Gecko再次犯了当年的错误——贪大求全，将邮件组、新闻组、聊天等流行应用都打包进了Firefox，导致内存占用问题。此外，Firefox对JavaScript的支持并不好，反应迟钝也开始被频频抨击。而Trident呢，几乎没怎么更新过，很多兼容问题导致开发者也是头大。再加上开放性问题，致使IE在安全性、速度等诸多问题上被群起而攻。从这个意义上来说，是垄断成就了IE，同样也是垄断毁灭了IE。

      勤劳的又追求极致的苹果推出的基于WebKit内核的Safari浏览器则引导了浏览器的本质回归潮流。Safari 在 2003 年 1 月 7 日首度发行测试版，并成为 Mac OS X v10.3 与之后版本的默认浏览器，也成为苹果其它系列产品的指定浏览器（也已支持 Windows 平台）。

image.png

      2003年7月15日，美国在线解散了网景公司，大部分网景开发者被解雇。而Mozilla基金会亦在当天成立，继续推动着Gecko的发展。时至今日，Gecko仍继续由Mozilla的雇员和义工所维护和发展。

      挪威产浏览器 Opera 开发出Presto内核， 2013年跟随Chromium项目，短暂使用WebKit内核后转为Blink内核。

Mozilla基金会 -- 一个致力于在互联网领域提供多样化选择和创新的公益组织

Mozilla基金会 -- 一个致力于在互联网领域提供多样化选择和创新的公益组织

  • 2004年11月9日，网景公司发布了全新的浏览器 Firefox，并搭配了 Gecko 内核。它功能丰富，支持用户拓展，一推出就深受大家喜爱，市场份额也稳步上升。“第二次浏览器大战”随即开始。

2004年11月9号， Firefox 1.0 发布

2004年11月9号， Firefox 1.0 发布

  • 2005 年，苹果开源了 Safari 的内核—— Webkit，意义之重大，不言而喻。

Webkit

  • 2008年，后起之秀，Google Chrome的登场。Google为发展浏览器Google Chrome而开启了免费开源软件项目Chromium，其JavaScript解析引擎采用Google自己开发的大名鼎鼎的V8引擎，渲染引擎仍然采用WebKit内核。Google使用Chromium代码来制作其Chrome浏览器，该浏览器比Chromium具有更多功能。。

Chromium

Chromium

      这个时候形成了三足鼎立的形势：

    • IE 的内核是 Trident;
    • 火狐FireFox是 Gecko；
    • Safari 和 Chrome 是 Webkit

      这就会导致同一个网页在不同的浏览器下访问，会出现不同的展示效果；并且不同的浏览器对新技术的支持力度也不一样。所以，公司会根据用户浏览器的不同而返回不同的网页内容，那它是如何鉴别用户浏览器的呢？答案就是 User-Agent。

Chrome logo发展变化图示

Chrome logo发展变化图示

  • 2010年4月，Apple 启动 WebKit2 项目，为 WebKit 实现了一个新的 API 层，后来原 WebKit 被重命名为 WebKitLegacy，WebKit2 被重命名为 WebKit。

    • WebKit ——> WebKitLegacy
    • WebKit2 ——> WebKit (当前)

  • *2012年， *Mozilla 启动 Servo 项目，希望开发一个高性能的、并行的浏览器引擎，用于替代 Gecko。

Servo

Servo

  • 2011-2013，在chrome发展壮大过程中，微软才意识到chrome开始对它逐步侵蚀自己的市场有了危机感，才开始频繁更新IE，2011年IE9发布，2012年IE10发布，2013年IE11发布，最后IE的代码实在适应不了新要求的web技术，就重新开发了一个名为“edge”的浏览器用来取代IE，但还是挡不住chrome成为市场份额第一的命运。

  • 2013年，Google 和 苹果 出现了对内核发展的分歧。于是 4 月份，Google 创建 Blink，它 fork 自 WebKit WebCore（并不是WebKit2），实现了沙箱和多进程模型，删除了与 Chromium 无关的代码，并开始大刀阔斧地对内核进行改革。

    • Chromium内核的渲染引擎由 WebKit 改为 Blink，JS引擎V8集成在Blink内。

      Blink 引擎问世后，Opera及国产各种 chrome 系的浏览器也纷纷投入 Blink 的怀抱。

      2013年7月，Opera 发布基于 Chromium 开发的 Opera 15

opera

Opera logo

  • 2015年，微软放弃 IE，发布 Microsoft Edge， 渲染引擎放弃Trident使用EdgeHtml内核。

image.png

Microsoft Edge

  • 2018年12月，Microsoft 宣布新版 Microsoft Edge 将基于 Chromium 开发。

发展图

现代浏览器内核家谱对照图

浏览器的内核概览

      现在国内常见的浏览器有：Google Chrome、IE、Firefox、QQ浏览器、Safari、Opera、Edge浏览器、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等。

      浏览器内核是驱动浏览器运行的核心部分，在概念逻辑及实际的设计中，实际包含了渲染引擎和JS引擎。但在日常生活中，我们常把渲染引擎称为某个浏览器的内核，如Blink内核、Gecko内核，两个名词都属于渲染引擎的名字，但在实际的内核架构中，Blink内核包含了渲染引擎Blink，也包含了其JS引擎V8，Gecko内核也是如此，而WebKit内核中的渲染引擎是WebCore，JS引擎是JSCore。所以本文的观点是：浏览器内核包含两部分：渲染引擎与JS引擎。

Blink 内核 - 架构图

Gecko - 架构图

WebKit内核 架构图

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。一般称的内核即指渲染引擎，但也有例外，如WebKit的渲染引擎是WebCore。
浏览器内核JS引擎
Chrome(也称为Chromium/Chrome内核)以前是Webkit，现在是BlinkJavaScriptCore/V8
FirefoxGeckoSpiderMonkey
SafariWebkit（渲染引擎为WebCore）JavaScriptCore
Edge旧版是EdgeHTML，新版是BlinkChakra/V8
Opera最初是自己的Presto，后来是Webkit，现在是BlinkCarakan/JavaScriptCore/V8
360浏览器、猎豹浏览器Trident+Chrome（Blink）双内核Chakra + V8
搜狗、遨游、QQ浏览器内核Trident（兼容模式）+Webkit（高速模式）Chakra + JavaScriptCore
IE、百度浏览器、世界之窗内核IE内核（Trident/MSHTML）JScript（IE3.0-IE8.0 / Chakra（IE9+之后）
移动端 - 安卓浏览器基本都是基于WebKit(4.4前) 或 Chrome（Blink）内核开发的内核(4.4后基于chromium)注：1、uc浏览器：基于WebKit内核开发的U3内核【增加云端架构(实现压缩流量、加速加载功能】 2、qq浏览器等微信浏览服务：基于WebKit内核开发的X5内核（现已升级至Blink） 3、360浏览器：基于Chrome内核开发的G5内核 4、百度浏览器：基于WebKit内核开发的T5内核JavaScriptCore / V8引擎
移动端 - IOSWebKitJavaScriptCore

表1 - 主流浏览器的内核及JS引擎一览表

什么是WebView

补充问题探讨：

  1. 什么是WebView，它与浏览器有什么关系？它的内核指的是什么？
  2. WebKit, Chromium, Android WebView, UIWebView/WKWebView 之间是什么关系？

image.png

表2 - Android与iOS的WebView

      WebView，直译是网页视图，WebView是在移动端的Android和IOS开发中都有的概念，是一个基于浏览器内核、展现Web网页的系统控件，是iOS SDK或Android SDK的一个重要组件，在ios上，WebView可以用于显示pdf、docx等更多类型的文档。WebView可以内嵌在移动端，实现前端的混合式开发。

image.png

      Android上的WebView一直是其核心组件，Android 4.4之前是Android WebKit WebView（基于 WebKit内核），Android 4.4之后是Chromium WebView（基于Chromium内核），在Android 5.0之后，WebView作为一个独立的App在应用商店中即可更新，之前则是随系统更新。Android可以在App中集成其他WebView组件，如TBS X5 内核的 WebView，也可集成其他JS引擎，如为 React Native 专门优化的 Hermes。iOS 上只能使用系统内置的 WebView。

image.png

2022.3发布v2.22.1

      在了解iOS的WebView之前，我们可以插一个熟悉的内容，小程序的运行环境的理解，在小程序的官方文档中提到，小程序运行环境本质是也是渲染网页和执行js的环境，但在不同的系统中，底层的依赖是不相同的，当前的小程序，在Apple家族(含Mac)中，逻辑层运行在WebKit的JSCore中，视图层则是由马上提到的WKWebView来渲染的；而在安卓环境下，逻辑层运行在Chromium的V8中，视图层是由基于 Mobile Chromium 内核的微信自研 XWeb 引擎来渲染的；在windows中，逻辑层和视图层都由Chromium内核处理。

运行平台页面渲染引擎JS解析引擎备注
iOS APPWKWebViewJavaScriptCoreApple的强制标准
Android APP腾讯自研XWebV8基于BOM的碎片化问题
MacOS ClientWKWebViewJavaScriptCore与iOS完全一致
Window ClientChromeChrome
开发者工具Chromium WebviewNW.js自定义

表3 - 小程序的运行环境

      😆提到这里，还不能立刻开始iOS的WebView，值得再提一下的是腾讯的TBS X5渲染引擎与XWeb渲染引擎，腾讯浏览服务是致力于优化移动端webview体验的整套解决方案。该方案由SDK、手机QQ浏览器X5内核和X5云端服务组成，腾讯X5内核在腾讯家的很多产品使用，包括微信，QQ，QQ浏览器。从微信6.1版本起，android用户全部使用的QQ浏览器的X5内核。前面提到，安卓可以使用第三方WebView组件，而iOS不行，还是用的WebKit的内核，x5浏览器内核的UA特征字符串是：

Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044903

      XWeb引擎，上文提到是现在小程序的安卓端的页面渲染引擎，大概从2020年起，微信团队放弃了X5内核，自研并默认更换为XWeb内核，其UA特征字符串是：

Chrome/67.0.3396.87 XWEB/882 MMWEBSDK/190506

      同时JS引擎也从基于 Mobile Chrome 57 内核的X5，改为基于 Mobile Chrome 67 内核的V8引擎，意味着正在向标准靠近，XWeb主要是渲染小程序的视图层，而最新的微信内置浏览器使用的也是XWeb引擎。

      最后来了解下iOS、MacOS中的WebView，UIWebView自iOS2就有，WKWebView从iOS8才有，毫无疑问WKWebView将逐步取代笨重的UIWebView。所以现在的iOS有UIWebview和WKWebview两种webview，UIWebView对应旧的WebKit内核（改名为WebKitLegacy），WKWebView对应于新的WebKit2（2010）。从iOS13开始苹果将UIWebview列为过期API 。2020年4月起App Store将不再接受使用UIWebView的新App上架、2020年12月起将不再接受使用UIWebView的App更新。 相比Android WebView更好的一点是：WKWebView（及其前身 UIWebView）可以显示 HTML 以外的文档类型（如 PDF、RTF、JPEG 等。Android WebView则不支持如pdf的直接预览。

      再次梳理下关系：Google以WebKit的WebCore开发了开源项目 - Chromium，渲染引擎为WebCore，JS引擎为V8，后面更新Chromium的渲染引擎为Blink，Chrome是商业版，又更多功能，因为Android是Google家的，它内部的WebView控件用的就是Chromium内核；看Apple这边，一直在更新和维护WebKit，自家的iOS内的UIWebView、WKWebview都是使用的WebKit内核。

      好的，以上就是本文的全部内容，希望你有所收获，有错误或遗漏，请多多指正。

参考索引

avatar
文章
阅读
粉丝