浏览器的渲染流程

浏览器从网络或本地文件中获取到HTML源代码，然后从上到下解析源代码。若解析过程中，读取到css或者js，停止解析（阻塞），转而解析css或执行js。

文章共2,036字 · 阅读需要大约7分钟

一键AI生成摘要，助你高效阅读

问答

小李老笨了

1407人浏览 · 2024-01-18 11:36:38

小李老笨了 · 2024-01-18 11:36:38 发布

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <h1>Hello World!</h1>
    <script src="./index.js"></script>
    <p>123</p>
</body>
</html>

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

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

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

2.生成 DOM 树

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

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

<script>
    document.addEventListener("DOMContentLoaded",function(){
        console.log("dom树已全部生成完毕")
    })
</script>

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

<script>
    window.onload = function (){
        console.log("所有资源已加载完成")
    }
</script>

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            console.log("dom树已全部生成完毕")
        })
        window.onload = function (){
            console.log("所有资源已加载完成")
        }
    </script>
</head>
<body>
    <h1>Hello World!</h1>
    <img id="img1" src="https://img0.baidu.com/it/u=3232582821,3516640051&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1705683600&t=cf4e105ef81bbef014482f252dfe32f5" alt=""/>
    <img id="img2" src="https://img2.baidu.com/it/u=1814561676,2470063876&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1705683600&t=e428e9e5a966e872aa589f6df698e6fa" alt=""/>
    <p>123</p>
    <script>
        var img1 = document.getElementById("img1")
        img1.onload = function (){
            console.log("img1 loaded")
        }
    </script>
</body>
</html>

运行结果：

3.生成渲染树

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

4.布局 layout / 重排 reflow

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

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

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

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

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

<script>
    var img1 = document.getElementById("img1")
    img1.onload = function (){
        console.log("img1 loaded")
        img1.style.width = '100px'
        img1.style.height = '100px'
        img1.style.top = '10px'
        img1.style.left = '10px'
    }
</script>

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

<script>
    var img1 = document.getElementById("img1")
    img1.onload = function (){
        console.log("img1 loaded")
        img1.style.width = '100px'
        img1.style.height = '100px'
        img1.clientHeight // 读取高度，导致强行reflow
        img1.style.top = '10px'
        img1.style.left = '10px'
    }
</script>

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