浏览器渲染页面机制和原理，回流，重绘的概念和原理

1，浏览器渲染页面机制

1.  处理HTML并构建DOM树。
2.  处理CSS并构建CSSOM树。
3. DOM与CSSOM合并成 render Tree 渲染树
4. 将 DOM 与 CSSOM 合并成一个渲染树。
5. 根据渲染树来布局，计算每个节点的位置。
6. 调用 GPU 绘制，合成图层，显示在屏幕上。

2，浏览器渲染原理

 我们从在浏览器地址栏输入一个地址说起！！！

1. 在输入地址栏输入www.baidu.com回车确认，
2. 这时地址会经过DNS的解析成百度的IP地址180.97.33.107，
3. 访问180.97.33.107建立TCP连接，
4. 发送HTTP请求，
5. 服务端返回请求报文，
6. 浏览器拿到代码后在内存中开辟一块栈内存，给代码执行提供环境，
7. 同时浏览器会分配一个主线程去一行行解析和执行代码，
8. 解析遇到link，img等需要请求的资源时，浏览器开辟新的线程将请求放到任务队列中
9. 第一次自上而下走完后只会生成DOM树，
10. CSS执行完后生成CSSOM，
11. 将DOM树和CSS树结合，生成渲染树（Render Tree）
12. 回流：根据生生成的渲染树，计算他们再设备视口（viewport）内的确切位置和大小，过滤无效的DOM
13. 重绘：根据渲染树以及回流得到的信息，填充样式等内容，
14. 这时交给GPU绘制，加载图层，显示页面，

浏览器渲染原理图：

3，回流

回流：当render tree中的一部分或全部，因为元素的大小、布局、隐藏或显示等发生改变时，浏览器就会重新渲染部分DOM或全部DOM的过程，叫做回流。

4、重绘

重绘：当元素样式改变，但不影响元素在文档流中的位置时，比如：background-color，border-color，visibility等，浏览器只会将新样式赋予元素并进行重新绘制操作。

何时会发生回流和重绘？

• 页面一开始渲染的时候（这肯定避免不了）；
• 添加或删除可见的DOM元素；
• 元素的位置发生变化；
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）；
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代；
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）；
• 获取布局信息，比如：offsetTop、scrollTop、clientTop、getBoundingClientRect以及getComputedStyle()；
• 设置style属性的值；

何时会发生重绘？

• 回流一定会触发重绘，但重绘不一定会回流。

避免回流与重绘

• 合并多次对DOM和样式的修改，然后一次处理掉。
• 批量修改DOM。
• 避免触发同步布局事件。
• 对于复杂动画效果,使用绝对定位让其脱离文档流。
• css3硬件加速（GPU加速）。
• 更多方法欢迎评论区交流~

创作不易，欢迎交流指正，感谢大家~