现代浏览器——Chrome探秘

前言

原文是谷歌上更新的文章，也参考了国内的译文,做个整理。
国内译文部分出现理解困难时，建议参考原文，结合来看。
下面参考有地址

Chrome:架构

Chrome正常运行是由多个进程协同完成的。
Chrome不仅为每一个标签提供一个进程，而且现在尝试为每个站点提供它自己的进程，其中就包括iframe。

浏览器进程：Browser Process

控制程序的“chrome”部分，包括地址栏、书签、后退、前进等，还处理Web浏览器不可见的、和特权部分，如网络请求、文件访问等

渲染进程：Render Process

负责显示网站选项卡内的所有内容

插件进程：Plugin Process

控制网站使用的所有插件

GPU进程：GPU Process

独立与其他进程的GPU处理任务，被分成多个不同的进程，因为GPU处理来自多个程序的请求并将它们绘制在同一个面中

多进程架构优缺点

优点：

选项卡的独立性，可以理解为因为多进程，从而多选项卡不会因为其中一个选项卡崩溃而导致集体崩溃。
安全性和沙盒，由于操作系统提供了限制进程权限的方法，因此浏览器可以从某些功能中对某些进程进行沙箱处理，如Chrome 限制任意用户访问在输入进程（如渲染进程）下的文件访问权限

缺点：

耗费内存，因为进程有自己的私有的内存空间，也通常包含公共基础结构的副本。

为了节省内存，Chrome限制了可以启动的进程数量，限制数量因设备的内存和CPU功率而异，但当Chrome达到限制时，它会在一个进程中运行从同一个站点打开的多个选项卡。

Chrome:导航

导航阶段-流程示意图：

导航阶段结束后，就是文档加载阶段，进入渲染器进程。

Chrome:渲染

渲染器进程负责处理选项卡内发生的所有事，其中主线程处理大部分代码，排版、栅格线程、work线程也是在渲染器进程中。
其核心工程就是将HTML、CSS、JavaScript转换为用户使用的网页。

渲染阶段-流程示意图：

在子资源加载过程中，Chrome会启用“预加载扫描器”，它会检查HTML中的标签，若存在img、link等标签，会在浏览器进程向网络线程发送请求。

当然JavaScript会阻止DOM的继续解析，因为JavaScript代码中可以使用document.write，它会改变DOM结构和文档，所以默认阻塞。如果代码中无document.write，则可以向script标签添加async或defer属性，来进行异步加载和运行JavaScript代码。

主线程通过遍历布局树，生产层树，然后确定绘制顺序，告知合成器线程。
合成器线程栅格化每个图层，并且分成图块，再将图块发送到光栅线程。
光栅线程将图块进行格式化并存储在GPU中，
然后合成器线程会根据图块信息创建合成帧，发送给GPU来显示。
如果发生滚动，合成线程会创建另一个合成帧发送到GPU。

合成的好处是，可以在不涉及主线程的情况下（即不涉及样式计算、JavaScript执行）就可以完成显示的操作。但如果再次发生了回流、重绘过程，则一定会涉及主线程。

Chrome:事件处理

用户在进行动作交互时
浏览器进程先接受到位置，
然后交由渲染器进程进程处理事件

在渲染器进程中，当合成页面时，合成器线程通过将标记，将事件处理区域标记为“非快速可滚动区域”，以确保可以将该区域的事件发送给主线程。如果事件不在该区域，则合成器线程可以不用等待主线程反馈，进行合成新的合成帧。

在程序开发中，可以在事件监听器是传递passive:true属性，来告知浏览器，在主线程监听事件同时，合成器线程也可以继续合成新的合成帧。

document.body.addEventListener('touchstart', event => {
    if (event.target === area) {
        event.preventDefault()
    }
 }, {passive: true});

最小化事件发送到主线程

因为事件被发送到主线程会执行相应的JavaScript代码，如果高频连续触发，会对性能造成影响。
为了最大限度地减少对主线程的过度调用，Chrome会合并连续事件（例如wheel, mousewheel, mousemove, pointermove, touchmove），并进行延迟调度，直到下一个 requestAnimationFrame。
当然可以在事件中使用getCoalescedEvents方法来获取有关这些合并事件的信息。

window.addEventListener('pointermove', event => {
    const events = event.getCoalescedEvents();
    for (let event of events) {
        const x = event.pageX;
        const y = event.pageY;
        // draw a line using x and y coordinates.
    }
});

但任何离散事件，例如 keydown、 keyup、 mouseup、 mousedown、 touchstart、和 touchend 都会被立即发送。

参考

Chromium_doc_zh
原文：
Inside look at modern web browser (part 1)
Inside look at modern web browser (part 4)
Inside look at modern web browser (part 4)
Inside look at modern web browser (part 4)
译文：
现代浏览器探秘(part 1)：架构
 现代浏览器探秘(part2):导航
 现代浏览器探秘(part3)：渲染
 现代浏览器探秘(part4)：事件处理