js的渲染进程

参考：https://blog.csdn.net/qq_39669807/article/details/89388014

浏览器的进程

1. boswer进程：主进程，只有一个，负责页面的创建销毁，前进后退，网络资源的管理下载等
2. GPU进程：硬件加速图形绘制
3. 渲染进程：内部是多线程的，每个页面一个渲染进程。用于页面的解析、渲染、执行脚本等
4. 第三方插件进程：每个插件对应一个进程

为什么多进程 

1. 防止单个面崩溃而影响浏览器
2. 多进程充分利用多核优势
3. 提高浏览器的稳定性 

 渲染进程

包含多个线程

1. GUI渲染线程：解析html构建树，渲染，重排重绘
2.  js引擎线程：执行JavaScript脚本，依靠任务队列和事件循环
3. 事件触发线程：不归js引擎线程控制，用于控制事件，当事件被触发的时候就把该事件添加到任务队列中等待js引擎空闲后执行
4. 定时器触发线程：不是js线程计数的，通过单独的线程计时并触发，计时完成后添加到任务队列中
5. 异步http请求线程：新开一个线程监控readyState状态变更，将回调函数推入任务队列中

js引擎线程和GUI渲染线程互斥

 浏览器的渲染过程

1. 构建DOM树：浏览器将html解析成树形数据结构，同时浏览器主进程负责css文件下载
2. css下载完成后解析css，构建cssom树
3. 根据DOM树和CSSOM树生成渲染树
4. 根据渲染树进行布局计算各元素节点的尺寸位置，生成布局树
5. 绘制树，绘制页面像素信息
6. 浏览器主进程将默认图层和符合图层交给GPU，GPU将各图层合成，显示

 普通文档流理解为：默认复合层

硬件加速声明一个新的复合层，新复合层之间无论如何变化都不会影响默认复合层的重排重绘

各图层之间单独绘制互不干扰

如何变成符合图层：

• translate  
• vedio iframe canvas
• 该元素在复合层上面渲染
• 该元素的父元素为复合层

可以加z-index人为创建复合层，避免chrome创建不必要的合成层