浏览器的渲染流程

目录

1.解析HTML

 2.生成DOM树

 3.生成渲染树

 4.布局 layout  / 重排 reflow 

5.重绘repaint

---

1.解析 HTML 

浏览器从网络或本地文件中获取到HTML源代码，然后从上到下解析源代码。

若解析过程中，读取到css或者js，停止解析（阻塞），转而解析css或执行js。

 以下代码执行顺序： 读取html => 解析html => 读取css => 解析css => 解析html => 读取js => 执行js => 解析html 

    
    
    


    
Hello World!
    
    
123

为什么要将CSS写到页面的开头，而JS写到页面的最后？

1.将CSS写到页面开头，是为了让浏览器尽快读取并解析样式，避免给用户看到丑陋的页面，也是为了避免页面闪烁。将JS代码写到最后，是为了让浏览器尽快呈现页面给用户，然后再执行JS完成交互功能。

2.js写在html之前，由于dom树还没有完成生成，所以获取不到html中的dom元素。

 2.生成 DOM 树

浏览器会一边解析html，一边生成DOM树，我们在js中获取到的DOM就是DOM树中的DOM。

当DOM树完全生成好后，会触发 DOMContentLoaded 事件。

当页面的所有外部资源全部加载完毕后，会触发 load 事件

 load 事件的触发晚于 DOMContentLoaded 事件。

 load 事件也可以针对单个外部资源使用，资源加载完成后触发。

    
    
    


    
Hello World!
    
    
    
123
    

 运行结果：

 3.生成渲染树

浏览器一边生成DOM树，一边计算DOM树中每个节点的样式规则，最终形成渲染树。
CSS属性的计算过程，发生在这一个步骤。

 4.布局 layout  / 重排 reflow 

这个步骤又称之为 reflow (回流、重排)，是指浏览器一边生成渲染树，一边计算每个元索最终的尺寸和位置。

完成后，页面中的所有元素的位置和尺寸就确定下来了，即将被渲染到页面。

这个步骤会在页面之后的运行过程中不断的重复，下面的JS操作均会导致reflow：

• 获取元泰的尺寸和位置
• 直接或间接改变元素的尺寸和位置

 reflow 非常耗时，浏览器为了提升性能，对JS中连续导致 reflow 的代码，把 reflow 的时问点延迟到结束后进行，但在此过程中，如果遇到了获取尺寸和位置的代码，浏览器会迫不得已立即 reflow 。

执行顺序： 改变宽度 => 改变高度 => 改变横坐标 => 改变纵坐标 => reflow重排 

执行顺序： 改变宽度 => 改变高度 => 读取高度 => reflow重排 => 改变横坐标 => 改变纵坐标 => reflow重排 

5.重绘 repaint 

浏览器一边 reflow ，一边进行生成对应的图形绘制到页面，绘制的过程称之为 repaint 。

所有会导致 reflow 的代码，均会导致 repaint 。

绘制的过程是靠GPU完成的，速度非常快，因此，相对于导致 reflow 的代码，仅会导致 repaint 的代码效率会高出很多

凡是不会影响盒子排列，仅影响盒子外观的代码都不会导致 reflow ，仅导致 repaint ，例如：

• 改变背景颜色
• 改变字体颜色
• 圆角边框
• 背景图
• ......