浏览器进程和网页渲染过程

[coconilu]

前言

在开始讲之前，相信大家应该听过类似下面的语句：

1. JS代码在执行的时候会阻塞DOM的渲染
2. 网页推荐CSS放在后部，而JS放在尾部

这篇博客的目的就是为了讲述浏览器的进程并解释清楚浏览器渲染的过程。

进程与线程的介绍

1. 进程是系统进行资源分配和调度的一个独立单位；
2. 线程是进程的一个实体，是CPU调度和分派的基本单位。

浏览器的进程

1. 浏览器主线程

1. 主要负责其它进程的创建和销毁
2. 浏览器的一些通用操作，如后退、前进、主页、刷新等
3. 下载资源管理，包括用户请求的网页

2. GPU线程

1. 把每个网页渲染进程生成的render-tree绘制成网页；
2. 3D绘制。

3. 第三方插件进程

为每个第三方插件创建一个独立的进程

4. 网页渲染进程

为每个网页创建一个独立的渲染进程；
该进程是多线程，主要有如下的几个常驻线程：

1. 所有线程都可以和JS引擎线程交互，因为JS引擎线程是渲染进程的核心，也是网页交互能力的体现。
2. JS引擎线程和GUI线程是互斥的，GUI线程会收集JS引擎线程里对DOM的修改，并在恰当的时机传给GPU进程渲染呈现。

4.1 网页渲染过程的伪逻辑

1. 构建

根据 HTML 结构生成 DOM 树；根据 CSS 生成 CSSOM；将 DOM 和 CSSOM 整合形成 渲染树（RenderTree）

2. 布局

结合浏览器的一些属性，计算RenderTree的几何信息，包括位置和大小等

3. 绘制

把RenderTree传给GPU进程，由它渲染绘制到网页上展示

4.2 渲染过程的细节

1. 执行JS

当遇到<script>标签时，会触发网页的渲染，因为JS有可能需要操作DOM和CSSOM，在执行JS的过程中会阻塞DOM的解析，也就会阻塞网页的渲染。但是如果script标签有async和defer属性的话，加载JS文件的过程是不会阻塞DOM的解析的（执行的时候还是会阻塞）。

2. 解析CSS

每当解析CSS的时候，会阻塞渲染RenderTree，但是不会阻塞DOM的解析

这就是为什么网页推荐CSS放在头部，JS放在尾部的原因。

浏览器进程的总结

1. 加载和初步渲染

当用户请求访问一个网址的时候，首先由浏览器的主进程DNS解析、建立TCP连接、http/https请求网页资源（包括HTML、CSS、JS等）；然后新建一个网页渲染进程，并把网页资源传递给GUI线程和JS引擎线程，由它们创建渲染树；最后交给GPU进程绘成页面。

2. 交互和重新渲染

用户和页面交互过程产生的重绘（repaint）和回流（reflow），就会重新生成渲染树，并由GPU进程更新页面。

浏览器主进程->网页渲染进程->GPU进程

参考链接：

https://juejin.im/post/5a72779c6fb9a01cb64f1d86
https://segmentfault.com/a/1190000012925872
http://imweb.io/topic/58e3bfa845e5c13468f567d5
https://juejin.im/post/5ad43c106fb9a028e25e062b
xiaoyu2er/blog#8