浏览器的渲染机制

参考链接：https://segmentfault.com/a/1190000014018604

浏览器的是多进程的。第一次打开一个页面，可以看到资源管理新打开两个进程，一个是主进程，一个是渲染进程。之后每打开一个tab页，就会新打开一个进程。

1、浏览器的进程：

（1）Broswer进程，浏览器的主进程，只有一个。协调和控制资源的分配。

（2）带三方插件进程。

（3）GPU进程，最多一个，3D绘制。

（4）浏览器渲染进程(浏览器的内核)，内部是多线程的。每个Tab页是一个进程，互补影响。主要的作用是：页面渲染、js脚本执行、事件处理。

2、浏览器的多进程的优点：每个进程发生崩溃或者阻塞，互不影响。

3、浏览器的渲染进程（即浏览器的内核）对于前端来说是最重要的，页面渲染、js加载、时间执行都是在这个进程中进行的。

总结：浏览器是多进程的，浏览器的渲染进程是多线程的。

浏览器的渲染进程包括5个线程：

（1）GUI渲染线程：html解析生成DOM树，css解析生成renderobject树，布局和绘制。

（2）js引擎线程，即js内核，js是单线程的，负责解析javascript代码，等待任务队列中可执行的任务。

（3）事件触发线程，该线程归属于浏览器而不是js引擎，可以理解为js引擎忙不过来，浏览器为其新开一个线程处理事件。例如点击事件或者定时任务等，会将任务放到对应的线程中，当触发到任务执行，则将该任务放到待执行的队列的队尾中，因为js引擎是单线程的，所以只有当js引擎空闲时，待执行队列中的任务才会被执行。

（4）定时触发线程，settimeout和setinterval定时，此处需要注意浏览器的定时器不是js引擎计时的，计时器的计数是在一个单独的线程计数的，因此如果js引擎阻塞，会导致计数不准确。当计数完成，则定时任务会被放在待执行队列，等到js引擎执行。

（5）http异步请求线程。比如ajax请求，会在单独的线程执行，当请求执行完毕有回调函数，则会将该回调函数放到待执行任务，等待js引擎执行。

4、浏览器的主进程和渲染进程的通信：

当用户打开一个新页面，任务管理器会增加两个进程，一个是Broswer主进程，一个是渲染进程。

（1）浏览器收到用户的请求，进行资源下载，然后通过renderHost接口，将资源传递给渲染进程

（2）渲染进程收到传递的资源，进行简单解析，然后交给渲染线程GUI，开始进行渲染

（3）GUI渲染线程收到请求，开始加载网页和渲染，着其中可能涉及到向主进程请求GPU进程辅助绘制

（4）也可能涉及，js引擎线程操作DOM

（5）渲染进程将结果传递给主进程

（6）主进程收到结果，则进行页面绘制

5、渲染进程的多个线程的关系：

（1）GUI线程和JS引擎互斥

（2）css加载和Dom树是否会阻塞，css异步加载不会阻塞DOM树构建，但是会阻塞render树构建。render树的构建需要等待css加载完毕，再绘制。

6、总结：浏览器的渲染过程

（1）解析DOM，生成DOM树

（2）解析CSS，生成对象形式的数据结构，与DOM树结合，生成render树

（3）布局render树，即计算出原色的位置和大小

（4）绘制render树，绘制页面像素信息

（5）浏览器将各层的信息告诉GPU，GPU会将各层进行合成，最终显示在屏幕上

7、普通图层和复合图层（硬件加速）

（1）如何变为复合图层

（2）复合图层使用注意：index

（3）复合图层的缺点

8、js事件执行机制 Eventloop