浏览器渲染过程

一、进程与线程

进程 是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
线程 是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）

打个比方：

• 进程是一个工厂，工厂的资源 -> 系统分配的内存（独立的一块内存）
• 工厂之间的相互独立 -> 进程之间相互独立
• 多个工人协作完成任务 -> 多个线程在进程中协作完成任务
• 工厂内有一个或多个工人 -> 一个进程由一个或多个线程组成
• 工人之间共享空间 -> 同一进程下的各个线程之间共享程序的内存空间（包括代码段、数据集、堆等）

二、浏览器是多进程的

• 浏览器是多进程的
• 浏览器之所以能够运行，是因为系统给它的进程分配了资源（cpu、内存）
• 简单点理解，每打开一个Tab页，就相当于创建了一个独立的浏览器进程。
• 不同进程之间也可以通信
• 避免单个page 或者第三方插件crash影响整个浏览器，用于稳定浏览器性能，提高用户体验

浏览器都包含哪些进程？

• Browser进程：浏览器的主进程（负责协调、主控），只有一个。作用有：
  (1) 负责浏览器界面显示，与用户交互。如前进，后退等
  (2) 负责各个页面的管理，创建和销毁其他进程
  (3) 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
  (4) 网络资源的管理，下载等
• 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
• GPU进程：最多一个，用于3D绘制等
• 浏览器渲染进程（浏览器内核）（Renderer进程，内部是多线程的）：默认每个Tab页面一个进程，互不影响。主要作用为页面渲染，脚本执行，事件处理等

不同进程之间也可以通信
例如在浏览器的地址栏中输入url，首先就会触发进程之间的通信：

• Browser进程接收到用户请求，并开启一个下载线程进行资源(html页面)下载，经过DNS查询IP、TCP连接、五层(七层)协议将请求传给服务器....最后将服务器响应的资源返回浏览器。
• Browser进程将获取到的html资源递交给Renderer进程进行解析和渲染。
• Renderer进程解析html的过程中会遇到需要下拉的外链资源(css、js、img等)，会将url递交Browser进程下载资源。
• Renderer进程将渲染结果交给Browser进程，Browser进程将页面呈现给用户。
• Renderer进程渲染过程中，还可能需要渲染复合图层(与GPU进程通信)，使用页面中的插件(与第三方插件进程通信)......

引用参考文献的图：

三、浏览器的一个进程中是有多线程合作的（以浏览器内核为例）

Renderer进程中有哪些线程？

• GUI渲染线程：负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。与JS引擎线程互斥。
• JS引擎线程：负责解析Javascript脚本，运行代码。一个Renderer进程中无论什么时候都只有一个JS线程在运行JS程序。
• 事件触发线程：用来控制事件循环，当异步事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎空闲后的处理。
• 定时触发器线程：setInterval与setTimeout所在线程，负责定时器计时，计时完毕后，添加到事件队列中，等待JS引擎空闲后执行。
• 异步http请求线程：在XMLHttpRequest在连接后是通过浏览器新开一个线程请求将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。

为什么JS是单线程的？大概是因为避免多个线程同时操作DOM树而导致渲染混乱......

浏览器内核中线程之间的关系

• GUI渲染线程与JS引擎线程互斥：
  如果在修改DOM元素属性同时渲染界面（即JS线程和UI线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了，容易造成渲染的混乱，因此为了防止渲染出现不可预期的结果，浏览器设置GUI渲染线程与JS引擎为互斥的关系，当JS引擎执行时GUI线程会被挂起，GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行。
• JS阻塞页面加载：如果JS中需要大量计算，就会使得JS脚本运行时间过长，页面变得非常卡，渲染不连贯，非常影响用户体验。

WebWorker与SharedWorker

• Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面（不操作DOM树）。创建Worker时，JS引擎向浏览器申请开一个子线程（子线程是浏览器开的，完全受主线程控制）。JS引擎线程与worker线程间通过特定的方式通信。
• SharedWorker是浏览器所有页面共享的，不能采用与Worker同样的方式实现，因为它不隶属于某个Render进程，可以为多个Render进程共享使用。所以Chrome浏览器为SharedWorker单独创建一个进程来运行JavaScript程序，在浏览器中每个相同的JavaScript只存在一个SharedWorker进程，不管它被创建多少次。
• 二者的区别就是SharedWorker由独立的进程管理，WebWorker只是属于render进程下的一个线程。

四、页面渲染流程

附张MDN上的渲染流程图

渲染分几个步骤：

1. 解析html建立dom树
2. 解析css构建render树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树）
3. 布局render树（Layout/reflow），负责各元素尺寸、位置的计算
4. 绘制render树（paint），绘制页面像素信息

5. 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。
   更具体的流程图，来源见参考文献：

   
   

DOMContentLoaded和load事件的区别

• 当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片。
• 当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片都已经加载完成了。
• 顺序是：DOMContentLoaded -> load

css和js对页面加载的阻塞情况

• js阻塞DOM构建由于js是解释性语言，js下载完了以后就去执行了，在脚本执行的时候，GUI线程是挂起的（JS线程和GUI线程互斥），所以js会阻塞页面加载。
• css不会阻塞DOM构建，但是会阻塞页面渲染：css是由单独的下载线程异步下载的，所以不会阻塞DOM树的构建，当css还没有拉取完成的时候，页面上会先出现body的DOM节点内容，等到css下载并解析完成的时候才会出现应该有的样式。
  因为css会修改DOM节点的样式，假如边构建DOM树边渲染，css后面的样式发生改变了以后（例如隐藏/显示变化，或者节点的尺寸/颜色变化等），会触发回流和重绘，从而造成不必要的开销。

为了获得最佳的页面展示效果，通常有这几种优化方式

• 把script放在html底部，让DOM解析和CSS渲染完成后再去执行脚本，防止页面出现空白的情况；css文件用<link>标签放在头部，避免一开始展现给用户的是未经渲染的DOM内容.
• css资源使用preload或prefetch预加载：<link rel="preload" href="" as="style">。
  其中，preload能预加载当前页面的资源，而prefetch将预加载在下一次导航/页面中使用的资源，对当前页面没有用。
• js使用使用defer或async执行。其中，defer表示延迟执行，延迟到文档完全被解析和显示之后再执行，只对外部脚本文件有效；async表示异步加载，应该立即下载脚本，但不应妨碍页面中的DOM树构建。

普通图层和复合图层

• 普通图层：普通文档流内可以理解为一个复合图层（默认复合层，里面不管添加多少元素，其实都是在同一个复合图层中）。所以absolute布局（fixed也一样），虽然可以脱离普通文档流，但它仍然属于默认复合层。这个图层是在Renderer进程中绘制的。
• 复合图层：通过硬件加速的方式，声明一个新的复合图层，它会单独分配资源（当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流重绘），这个图层是在GPU进程中绘制的。在GPU中，各个复合图层是单独绘制的，所以互不影响。

开启复合图层的方法

• 最常用的方式：translate3d、translateZ(0)
• opacity属性，或者过渡动画
• <video><iframe><canvas><webgl>等元素

absolute、fixed 与 float 的区别

• 三者都是脱离文档流，但是无法脱离默认复合层。
• absolute相对于position不为static的包含块内容定位，float相对于display: block 的包含块内容定位，fixed相对于浏览器窗口定位，并且随着页面滚动不发生移动。
• 在设置float的时候，元素仍然会占据位置，其他元素会环绕着浮动元素；absolute 定位时，直接覆盖在其他元素之上。可以用index来确定层叠的顺序。
• absolute的元素会覆盖float元素。

absolute(fixed) 与硬件加速的区别

• absolute虽然可以脱离普通文档流，但是无法脱离默认复合层。所以，就算absolute中信息改变时不会改变普通文档流中render树，但是，浏览器最终绘制时，是整个复合层绘制的，所以absolute中信息的改变，仍然会影响整个复合层的绘制。绘制是在Renderer进程中进行的。
• 硬件加速直接在另一个复合层了，所以它的信息改变不会影响默认复合层，只是最后与其他图层合成的时候会影响整体的页面展示

复合图层与index
一般一个元素开启硬件加速后会变成复合图层，可以独立于普通文档流中，改动后可以避免整个页面重绘，提升性能，复合图层过多，反而会使资源过度消耗，页面更卡。为了避免开启过多的复合图层，要注意index的使用，如果a是一个复合图层，而且b在a上面，那么b也会被隐式转为一个复合图层，所以尽量使复合图层位于默认图层的上方，结合index可以有效的避免这个问题。

五、如果浏览器遇上解析不了的css怎么办？

如果遇上属性错误或者值错误，或者选择器解析不了，又或者属性比较新、浏览器不能兼容这个属性，则浏览器将忽略它并继续进行下一个声明。

为了在不同的浏览器及其版本下更好地展示界面，浏览器会有优雅降级和渐进增强两种方案。

• 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容，相当于是向下兼容的。

div{
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}

• 渐进增强： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验，相当于是向上兼容的。

div{
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

• 浏览器前缀名：
  -webkit-：Chrome/Safari
  -moz-: Firefox
  -o-: Opera
  -ms-: IE

参考文献

https://segmentfault.com/a/1190000012925872#item-5-6
https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_works