浏览器——浏览器的解析过程以及CSS、JS、DOM之间的加载关系

最新推荐文章于 2023-04-11 23:20:04 发布

ムラサキ

最新推荐文章于 2023-04-11 23:20:04 发布

阅读量761

点赞数 1

文章标签：大数据

本文链接：https://blog.csdn.net/zkh129/article/details/125498367

版权

一、浏览器的渲染过程

解析HTML构成DOM树
解析CSS构成CSSOM树
合并DOM树和CSSOM树为render树
进行回流，确定各DOM的尺寸、位置
进行重绘，绘制页面的像素信息
将信息发送给GPU，GPU将页面绘制到屏幕上

如上图，我们可以得到两个信息：

CSS和HTML的加载是异步的，二者互不干扰
CSS的加载会阻塞DOM的渲染，因为必须等DOM树和CSSOM树合并为渲染树之后，才能进行DOM的渲染

二、JS阻塞DOM解析

如果script标签内不带defer/async，那么浏览器在解析到script标签时会停止DOM的解析，一直等到script标签的加载与执行完成后，再进行之后的DOM解析。

如果添加defer标签，则script标签的加载不阻塞DOM加载，并在DOM加载完成后按照引入的顺序执行。

如果添加async标签，则script标签的加载也不阻塞DOM加载，但是在加载完之后立马执行，不能保证执行的顺序。

三、CSS阻塞JS执行

CSS的加载会阻塞JS的执行，进而阻塞DOM的解析。

<head>
  <link rel="stylesheet" href="./style.css?sleep=3000"> // 假设css的加载会花3s
  <script src="./index.js"></script>
</head>
<body>
  <p>hello world</p>
</body>

css和js同时加载，但是由于css未加载完毕，js代码不执行 -> 由于js代码还未执行，DOM元素不加载 -> 3秒后css加载完毕，js代码开始执行 -> js代码执行完毕，开始解析DOM

四、JS会触发页面的渲染

因为JS代码需要操作DOM，遇到script标签后，会先渲染一次标签之前的所有DOM，然后再加载和执行JS 。

<body>
    <p id="box1">world</p>
    <script>
        console.log(document.getElementById('box1'));
        console.log(document.getElementById('box2'));
    </script>
    <p id="box2">hello</p>
</body>

上述代码能获取到box1，但是无法获取到box2，因为js执行时box1已经解析和渲染，而box2还未解析和渲染。