你所不知道css加载阻塞DOM或js的执行机制

时间 2019-11-07

标签所不知道 css 加载阻塞 dom 执行机制栏目 CSS 繁體版

原文原文链接

前言

可能你们都知道js执行会阻塞DOM树的解析和渲染，那么你们有没有想过css加载会阻塞DOM树的解析和渲染或者会阻塞js的运行吗？css

今天咱们来谈谈一下css加载会不会阻塞DOM树的解析和渲染或者会阻塞js的运行html

如何利用chrome来设置下载速度

咱们打开打开chrome控制台(按下F12),能够看到下图,切换到Network能够看到我圈起来的地方，点击add ,从这里咱们能够模拟设置当前的网络状况， chrome

这样，咱们对资源的下载速度上限就会被限制成5kb/s，好，那接下来就进入咱们的正题 bootstrap

css加载会阻塞DOM树的解析渲染吗？

只有实践才出真理：数组

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

<head>
    <title>css阻塞测试</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        p {
            color: orange !important
        }
    </style>
    <script>
        function test() {
            console.log(document.querySelectorAll('p'))
        }
        setTimeout(test, 0)
    </script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
</head>

<body>
    <p>你好，css阻塞测试</p>
</body>

</html>
复制代码

若是css阻塞DOM解析和渲染的话，在css还没加载完以前，下面的内容不会被解析渲染，那么咱们一开始看到的应该是白屏，p不会显示出来。而且此时console.log的结果应该是一个空数组。浏览器

可是实际上在css没有加载完成以前，在控制台已经能够获取到p标签了，从这里咱们能够得知， css加载是不会阻塞DOM解析的。

可是咱们能够看到，只有当css加载完以后，p标签才会显示你好，css阻塞测试的橙色文本。从这里咱们得出CSS加载会阻塞DOM的渲染的。bash

对于这种机制，我我的理解是对浏览器渲染的一种优化机制。由于加载css的时候，可能会修改下面DOM节点的样式，若是css加载不阻塞DOM树渲染的话，那么当css加载完以后，DOM树可能又得从新重绘或者回流了，这就形成了一些没有必要的损耗。因此干脆就先把DOM树的结构先解析完，而后等css加载完以后，在根据最终的样式来渲染DOM树，造成render树，这种作法明显提升性能。网络

css加载会阻塞js运行吗？

只有实践才出真理：post

<!DOCTYPE html>
<html lang="en">
<head>
    <title>css阻塞js</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            color: orange !important
        }
    </style>
    <script>
        console.log('before css')
        var startDate = new Date()
    </script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
</head>

<body>
    <p>你好，css阻塞测试</p>
    <script>
        var endDate = new Date()
        console.log('after css')
        console.log('通过了' + (endDate - startDate) + 'ms')
    </script>
</body>
</html>
复制代码

由上图咱们能够看出，位于css加载语句前的那个js代码先执行了，可是位于css加载语句后面的代码迟迟没有执行，直到css加载完成后，它才执行。这也就说明了，css加载会阻塞后面的js语句的执行。性能

总结

1.css加载不会阻塞DOM树的解析 2.css加载会阻塞DOM树的渲染 3.css加载会阻塞后面js语句的执行

若是想知道原理的话，能够查看以前写的文章juejin.im/post/5d5929…