浏览器的渲染流程

发布时间：2024年01月21日

目录

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重排?

5.重绘 repaint?

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

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

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

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

  • 改变背景颜色
  • 改变字体颜色
  • 圆角边框
  • 背景图
  • ......
文章来源:https://blog.csdn.net/m0_60189088/article/details/135665202
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章