「前端」万字详文：深刻理解阅读器原理

一、阅读器概论阅读器阅历了不少年的发展，阅读器引擎也在不停地迭代以及演进。从PC时期到移动端，以独立阅读器的形态还是以系统WebView组件内嵌的形态存在，在互联网的生态系统中一直扮演侧重要的角色。了解阅读器及其原理可让咱们打开另外一个世界。

1. 阅读器引擎文章源自微观生活（93wg.com）微观生活-https://93wg.com/24454.html

下列是市面留存的主流阅读器的引擎介绍。文章源自微观生活（93wg.com）微观生活-https://93wg.com/24454.html

1.1 阅读器引擎文章源自微观生活（93wg.com）微观生活-https://93wg.com/24454.html

Trident：IE阅读器引擎文章源自微观生活（93wg.com）微观生活-https://93wg.com/24454.html

Gecko：Firefox阅读器引擎文章源自微观生活（93wg.com）微观生活-https://93wg.com/24454.html

Presto：Opera阅读器引擎文章源自微观生活（93wg.com）微观生活-https://93wg.com/24454.html

Webkit：Safari，Google Chrome阅读器引擎。文章源自微观生活（93wg.com）微观生活-https://93wg.com/24454.html

1) Chromium：基于webkit，08年开始作为Chrome的引擎，Chromium阅读器是Chrome的试验版，试验新特性。2) Webkit2：2010年随OS X Lion一块儿面世。WebCore层面实现过程隔离与Google的沙箱设计存在冲突。3) Blink：基于Webkit2分支，13年谷歌开始作为Chrome 28的引擎集成在Chromium阅读器里。Android的WebView一样基于Webkit2。1.2 微软阅读器目前PC场景操作系统仍是windows一统天下，对桌面用户来讲，尽管IE的市场份额在降落，然而IE曾经经也风光过。IE内核以Trident为主，最新的Edge也兼容了Chromium内核。Microsoft Edge：内核为：EDGE，Windows 10默许阅读器，不能单独下载安装。兼容Chromium内核，同时保存EDGE内核来兼容企业网站文章源自微观生活（93wg.com）微观生活-https://93wg.com/24454.html

Internet Explorer 11：Windows 8.1，引擎Trident 7.0文章源自微观生活（93wg.com）微观生活-https://93wg.com/24454.html

Internet Explorer 10：Windows 8默许阅读器，引擎Trident文章源自微观生活（93wg.com）微观生活-https://93wg.com/24454.html

Internet Explorer 9

Internet Explorer 8：Windows 7集成

Internet Explorer 7：Windows Vista集成，2016年休止支撑

Internet Explorer 6：2014年休止支撑

2. 阅读器架构

目前chromium阅读器的架构主要由下以几个部份形成。

下列为架构的介绍：

操作系统：WebKit可以运行在不同的操作系统上，如Chromium阅读器支撑Windows、Linux、Android等系统；

第三方库：这些库是WebKit运行的基础，包含2D图形库、3D图形库、网络库、存储库、音视频库等；

WebCore：WebKit加载以及渲染网页的基础，是不同阅读器所使用的WebKit中同享的部份，包含HTML解析器、CSS解析器、SVG、布局、渲染树等等；

JavaScript引擎：JavaScript解析器，WebKit默许的引擎是JavaScriptCore，Google的Blink为V8引擎；

WebKit Ports：WebKit中的移植部份，包含网络栈、音视频解码、硬件加速等模块，这部份对WebKit的功能以及性能影响比较大。

WebKit嵌入式接口：WebKit对外暴露的接口层，这个接口是提供给阅读器调用的，如给chromium调用，由于接口与具体的移植也有关系，所以中间会有一个WebKit绑定层

JavaScriptCore渲染，它就会将IPC发送回阅读器过程。UI线程休止选项卡的加载转圈。

8. 导航到其他站点

导航完成后，再次将不同的URL放到地址栏导航，阅读器会检查当前渲染网站的beforeunload事件。如有设置导航或关闭选项卡时发出警报“离开这个网站吗？” 包括JavaScript代码的选项卡内的所有内容都由渲染过程处理。

渲染过程导航操作单击链接或客户端JavaScript已运行window.location = “https://newsite.com“ ，进程与流程器过程启动导航进程相同，不同点在于导航要求是从渲染过程启动到阅读器过程。

页面生命周期：https://developers.google.com/web/updates/2018/07/page-lifecycle-api

图片引自上面的页面生命周期

四、页面渲染

1. 渲染过程处理页面内容

渲染过程负责选项卡内产生的所有事情。在渲染器过程中

主线程：处理您发送给用户的大部份代码。

工作线程：处理WebWorker或ServiceWorker

排版线程：Compositor

栅格线程

图片引自Mariko Kosaka的《Inside look at modern web browser》

2. 解析

2.1 构建DOM

当渲染过程接管提交的导航动静以及HTML数据，主线程开始解析文本串并延迟调度，直到下一个requestAnimationFrame执行。

离散事件则当即执行，如keydown，keyup，mouseup，mousedown，touchstart，touchend

(图片引自Mariko Kosaka的《Inside look at modern web browser》)

图片引自Mariko Kosaka的《Inside look at modern web browser》

7. 使用getCoalescedEvents得到帧内事件

大多数Web利用程序，合并事件应足以提供优良的用户体验。构建绘制利用程序并依据touchmove坐标放置路径等可能会丢失中间坐标以绘制平滑线，可使用getCoalescedEvents指针事件中的办法来获取这些合并事件的信息。

图片引自Mariko Kosaka的《Inside look at modern web browser》

window.addEventListener(&

阅读器是一个繁杂的系统，这里介绍的只是冰山一角，chromium项目也在不停地迭代更新，所以可能一段时间后，某些功能已经产生了变化。更为细节及最新的可以关注一下最新的chromium源码。

以上就是微观生活（93wg.com）关于“「前端」万字详文：深刻理解阅读器原理”的详细内容，希望对大家有所帮助！