浏览器渲染原理
-
网络进程
-
浏览器渲染进程
- 浏览器网络进程获取到HTML字符串后添加一个渲染任务到事件循环中
- 浏览器的渲染进程的主线程接收到任务队列中存在任务会执行渲染任务
浏览器的渲染流程
渲染主线程执行
1.解析 HTML 生成 HTML Dom 树 生成 CSSOM 树；Parse
- Ast 树
2.计算CSS样式 Style
- 计算css属性 font-size:2rm 会解析成 font-size:20px ;
- #000 会解析成 rgb(0,0,0);
3.解析 HTML Dom 树 和 CSSOM 树 生成 布局树(layer)（render 渲染树 ）
- 这个阶段生成的布局树不会包含不需要显示的内容 如：display:none；head 标签
4. 这个阶段会 对布局树(layer)进行分层 （浏览器优化知识）
- 浏览器分层是一种优化
- 例如 执行大量动画的dom 对其进行分层可减少对整个视口进行重排 和重绘 使其在当前层上进行处理
- 通过 will-change：transform; 可使浏览器开启强制分层
5. 生成绘制指令 Paint
- 对不同的图层生成不同的 绘制指令
- 例如 指令一：在当前可视区域 20px 40px 的区域就行绘制 （优先绘制可视区域）
渲染进程的 其它线程 （合成线程 ）
6. 分块Tiles
- 每一层 都会有很多模块
- 对各图层进行分块处理 每一层分成很多小的块进行处理
- 分块会启动很多线程进行分块的处理
7. 光栅化Raster 在GPU 里处理
- 把每一个块生成位图 计算每一个位置的像数点
- 优先处理靠近视口的块
- 光栅化 交够GPU处理 使用到GPU加速 生成一块一块的位图
8. 画 Draw （transform 阶段在这里处理）
- 对页面进行绘制 （画）
- 浏览器调用 GPU ---> GPU 调用计算硬件 对页面进行绘制
优化知识：浏览器
- 使用动画的DOM 模块 可使用 浏览器渲染流程中的 分层处理 （减少整个页面的重排和重绘）will-change：transform; 开启图层
- css3 属性 是在 浏览器渲染流程 中的 8 （画） 阶段进行处理 所以当主线程执行阻塞时 不会影响到其它线程的执行
点击按钮影响主线程执行
总结：
浏览器渲染分为八个步骤 相信看完的小伙伴会有一定的收获;
