likes
comments
collection
share

浏览器渲染页面的流程

作者站长头像
站长
· 阅读数 38

1、浏览器渲染页面

我们知道，不管是一个单独的静态页面还是一个系统，本质上都是一个html文件，那浏览器渲染页面，其实就是在解析html文件，我们都知道项目打包之后html，css和js都被压缩到一个index.html文件中，那么，html，css和js的渲染顺序到底是怎么样的呢？

2、浏览器的渲染顺序

首先，浏览器会选取解析html，生成DOM树，但是在解析的过程中一旦遇到css，就会开始解析css生成CSSDOM树（DOM树和CSSDOM树的渲染可以同时进行），然后如果在遇到JavaScript代码，那他就会去执行JavaScript代码，需要注意的是，浏览器执行JavaScript代码时，会先将当前的CSSDOM解析完成，但是DMO树的解析则会停止，流程就是（CSSDOM->JavaScript->DOM），当JavaScript执行完成之后才会重新去构建DOM树，但DOM树和CSSDOM树都构建完成之后，就会合并成渲染树，然后通过渲染树Layout布局，最后进行页面的绘制。

3、注意点

因为从上面那个顺序我们知道一旦在渲染过程中遇到JavaScript，那么执行JavaScript的优先级要高于html，但是我们经常在JavaScript中进行一些DOM操作，所以如果将JavaScript放在前面的话，就会导致因为获取不到节点而出现错误，比如举一个简单的例子

3.1直接使用style和script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let text = document.getElementById('text')
        console.log(text);
    </script>
    <style>
        #text {
            font-size: 20px;
            color: brown;
        }
    </style>
    <div>
        <div id="text">123</div>
    </div>
</body>
</html>

在一个html文件中，我们可以看到JavaScript代码放到了最上面，然后是css，最后才是div标签，而我们JavaScript代码的操作就是去获取id为text的div标签，那么实际上因为浏览器渲染的顺序，就会导致获取到的节点为null

浏览器渲染页面的流程

而想要获取到DOM节点，就需要将JavaScript的代码放到标签的下面，这样才能保证在DOM树生成之后去执行JavaScript代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <style>
        #text {
            font-size: 20px;
            color: brown;
        }
    </style>
    <div>
        <div id="text">123</div>
    </div>
    <script>
        let text = document.getElementById("text");
        console.log(text);
    </script>
</body>
</html>

这时候我们就能获取到id为text的div了

浏览器渲染页面的流程

3.2导入的css和JavaScript

如果是通过link和script引入外部的css和JavaScript，也需要注意引入的位置。

转载自:https://juejin.cn/post/7201811572738342969
评论
请登录