likes
comments
collection
share

什么时候会阻塞HTML文档渲染过程？

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

HTML页面加载过程会发生什么？因为浏览器网络拉取资源是多线程的，但是dom树的操作都是在一个线程中的，所以网页资源的解析、js加载、dom树渲染都是一个线程执行，所以就会线程任务就会相互抢占，先来先执行。而当浏览器加载html文件时，会自上而下加载。我们先看一下下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"> 
    <style>
    #app {
            width: 100px;
            height: 100px;
            background-color: red;
    }
    </style>
    
    <script>
        alert('代码的script');
    </script>
    // alert('src的script');
    <script src="./test.js"></script>
</head>
<body>
   <div id="app"></div>
</body>
</html>

由于html文件的加载自上而下的，所以不管传入的脚本script是代码还是链接，都是先写先加载，可能我们会问问什么style没有加载，不是没有加载，而是已经解析并加载了，因为对css进行解析会生成cssom规则树，然后需要结合DOM树构建渲染树，而我们的dom元素是命名在body标签中定义，由于当前解析的是head标签，这阶段还没有渲染dom，所以一般在html中操作dom的时机都是在body中的。

什么时候会阻塞HTML文档渲染过程？ 在上面例子，我们有没有发现在解析html文档过程中，但执行script脚本之前是不是有一段时间在加载，其实是在加载link资源，也就是css资源，等css资源执行完毕后才会执行后面script，这就是CSS阻塞，这里阻塞了其后面的js语句的执行。

而style标签引入的样式是不会阻塞浏览器渲染也不会阻塞DOM解析，但是可能会出现闪屏现象（使用transition动画时）。 上面只是在head标签中引入样式，如果是在body标签中引入样式，css是否也会阻塞？

  • 在link引入前后定义DOM元素：css加载会阻塞后面DOM元素的渲染，以及前面元素的css样式渲染。

    <body>
    <button class="btn btn-primary">test1</button>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    <div>test2</div>
</body>

    什么时候会阻塞HTML文档渲染过程？

  • 在link引入前后引入脚本：在link引入样式前执行脚本，在link引入样式后执行版本，我们会发现link会阻塞后面脚本的执行，需要等css资源加载完毕才会执行。

    <body>
<script>
    alert('link加载前！')
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
<script>
    alert('link加载后！')
</script>
</body>

    什么时候会阻塞HTML文档渲染过程？

我们都知道在html中加载资源除了css，还有js资源加载，既然看了有CSS资源加载阻塞，是不是也有js阻塞？是的，script引入与使用分为两种方式：head中引入、body中引入。

  • 在head标签中引入script：如果是head中引入脚本是不能直接操作DOM渲染，因为DOM还没有加载与渲染。那么有办法可以解决吗？其实是有的，使用defer（延迟执行，等DOM解析完成再执行JS脚本）和async（异步执行，保证DOM树和JS脚本并行执行）。

    <head>
    <script src="./a.js" defer></script>
    <script src="./a.js" async></script>
</head>

  • 在body标签中引入script： 当引入的script脚本后下载并解析完成后，才去加载后面DOM元素，但是script脚本不会影响脚本执行前的DOM元素渲染。所以一般把所有脚本都会丢到</body>前。

    <body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script> 
<div>test</div>
</body>

所以一般是把引入式（链接）放在head标签内，内联式一般是放在body内。

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