js常见问题总结-阻塞渲染

最新推荐文章于 2025-04-29 10:17:17 发布

原创最新推荐文章于 2025-04-29 10:17:17 发布 · 1.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

javascript常见问题专栏收录该内容

8 篇文章

订阅专栏

本文详细探讨了JavaScript如何影响浏览器的渲染，包括head中的CSS是否阻塞DOM渲染，body中的CSS是否阻塞DOM渲染，JS是否阻塞DOM解析和渲染等问题。通过实验验证，解析了JS执行与CSS加载的关系，并提出了解决DOM渲染阻塞的解决方案，如使用defer和async属性。

阻塞渲染问题

文章目录

浏览器渲染机制：解析DOM生成DOM Tree，解析CSS生成CSSOM Tree，两者结合生成render tree渲染树，最后浏览器根据渲染树渲染至页面。

1.测试

搭建一个服务器，目的是为了返回css样式和js脚本，并且让服务器根据传递的参数，固定延时返回数据。

目录结构如下，其中index.js和style.css就是用于返回的数据，app.js为服务器启动文件，index.html是用来测试案例的文件，剩余文件或文件夹可以忽略。

├── static
│ ├── index.js
│ ├── style.css
│ ├── color.js
├── app.js
├── index.html
├── package.json
├── node_modules/

static目录下的内容：

//static/color.js
var p = document.querySelector('p');
var style = window.getComputedStyle(p, null);
console.log(style.color);

// static/index.js
var h1 = document.querySelector('h1');
console.log(h1);

// static/style.css
p { color: lightblue; }

app.js:

    // app.js
    const express = require('express')
    const fs = require('fs')
    const app = new express()
    const port = 3000   
    const sleepFun = time => {
        return new Promise(res => {
            setTimeout(() => {
                res()
            }, time)
        })
    }   
    const filter = (req, res, next) => {
        const { sleep } = req.query || 0
     
        if (sleep) {
            sleepFun(sleep).then(() => next())
        } else {
            next()
        }
    }    
    app.use(filter)     
    app.use('/static/', express.static('./static/'))     
    app.get('/', function (req, res, next) {
        fs.readFile('./index.html', 'UTF-8', (err, data) => {
            if (err) return
            res.send(data)
        })
    })    
    app.listen(port, () => {
        console.log(`app is running at http://127.0.0.1:${port}/`)
    })

2.head中css是否阻塞DOM渲染？

在index.html中插入<link>标签，在浏览器中输入http://127.0.0.1:3000/访问此页面。index.html内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            var p = document.querySelector('p')
            console.log(p)
        })
    </script>
<link rel="stylesheet" href="./static/style.css?sleep=3000">
</head> 
<body>
    <p>hello world</p>
    <h1>h1标签</h1>
</body>
</html>

现象：虽然DOM很早就被解析完成，但是p标签却迟迟没有渲染，原因在于CSS样式还未请求完成，在样式获取后hello world才被渲染出来，所以说**CSS会阻塞页面渲染**。

结论：可以看出DOM Tree的解析和CSSOM Tree的解析是互不影响的，两者是并行的。因此CSS不会阻塞页面DOM的解析，但是由于render tree的生成是依赖DOM Tree和CSSOM Tree的，因此head中CSS必然会阻塞DOM的渲染，单但不会阻塞DOM的解析。

3.body中的css是否阻塞DOM渲染？

index.html内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            var p = document.querySelector('p')
            console.log(p)
        })
    </script>
</head>
<body>
    <p>hello</p>
    <link rel="stylesheet" href="./static/style.css?sleep=3000">
    <p>world</p>
</body>
</html>

现象：页面初始就渲染出hello,3s后页面渲染出浅蓝色hello world并且打印p标签。

分析：首先是浏览器解析并运行<script>标签，然后在解析文本为hello的p标签，当解析到<link>标签时，触发一次渲染，然后浏览器发起CSS请求，但是此时浏览器不会继续向下解析，而是将<link>标签当做是DOM的一部分，换句话说浏览器将其认为是特殊的DOM元素，这个DOM元素的特殊性就在于需要进行加载，因此浏览器不会继续向下解析，所以也就没有DOMContentLoaded的输出结果。

3s后<link>这个特殊的DOM元素解析完成，浏览器继续向下解析world文本的p标签，此时触发DOMContentLoaded事件，再进行正常的渲染，页面渲染出浅蓝色hello world，由于此过程非常快，所以控制台输出和渲染浅蓝色hello world几乎是同时的。

结论：body中css会阻塞DOM解析和渲染。

4.js会阻塞DOM解析和渲染吗?

在<script>标签中加入更多的for循环，让js执行更多的时间。index.html内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            var p = document.querySelector('h1')
            console.log(p)
        })
    </script>
    <!-- <link rel="stylesheet" href="./static/style.css?sleep=3000"> -->
</head>
<body>
    <script>
        const p = document.querySelector('p')
        console.log(p)    
        for (var i = 0, arr = []; i < 100000000; i++) {
            arr.push(i)
        }
    </script>
    <p>hello world</p>
    <h1>h1标签</h1>
</body>
</html>

现象：浏览器访问页面，初始时为空白且控制台打印null，浏览器loading短暂延时后，控制台打印出p标签同时页面渲染出hello world。

分析：JS会阻塞DOM解析了，JS执行初控制台打印null，因为此时p标签还未被解析，for循环执行时，可以明显感觉到执行耗时，执行完成p标签被解析，此时触发DOMContentLoaded事件，控制台打印出p标签，同时页面渲染出hello world。

解释：首先浏览器无法知晓JS的具体内容，倘若先解析DOM，万一JS内部全部删除掉DOM，那么浏览器就白忙活了，所以就干脆暂停解析DOM，等到JS执行完成再继续解析。

结论：<script>标签的加载、解析和运行都会阻塞DOM的解析和渲染。因为js可以操作DOM，浏览器为了防治渲染过程出现不可预期的结果，让GUI渲染线程和js引擎线程互斥，即解析器在遇到<script>标记时会立即执行（或请求）脚本。文档解析停止，直到脚本执行完毕后才会继续。

5.css会阻塞js的执行？

在页内JS脚本前插入<link>标签，并且延时3s获取CSS样式。index.html内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>p
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            var p = document.querySelector('p')
            console.log(p)
        })
    </script>
    <link rel="stylesheet" href="./static/style.css?sleep=3000">
    <script src='static/index.js'></script>
</head>
<body>
    <p>hello world</p>
    <h1>h1标签</h1>
</body>
</html>

现象：初始页面空白，浏览器loading加载3s后，控制台打印出null，紧接着打印出p标签，同时页面渲染出浅蓝色p标签。

分析：CSS不会阻塞DOM的解析，所以只可能是JS阻塞了DOM解析。但是JS只有两行代码，不会阻塞长达3s左右的时间。所以**CSS阻塞JS的执行。**

解释：设想JS脚本中的内容是获取DOM元素的CSS样式属性，如果JS想要获取到DOM最新的正确的样式，势必需要所有的CSS加载完成，否则获取的样式可能是错误或者不是最新的。因此要等到JS脚本前面的CSS加载完成，JS才能再执行，并且不管JS脚本中是否获取DOM元素的样式，浏览器都要这样做。

结论：将<script>放在<link>标签前面。

6.JS 是否会触发页面渲染？

index.html内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <style>
        p {
            color: lightgreen;
        }
    </style>
</head>
<body>
    <p>hello</p>
    <script src="./static/color.js?sleep=2000"></script>
    <p>beautiful</p>
    <style>
        p {
            color: pink;
        }
    </style>
    <script src="./static/color.js?sleep=4000"></script>
    <p>world</p>
    <style>
        p {
            color: lightblue;
        }
    </style>
</body>
</html>

现象：页面初始渲染出浅绿色hello，紧接着2s后渲染出粉色hello beautiful且控制台打印rgb(144, 238, 144)，然后又2s后渲染出浅蓝色hello beautiful world且控制台打印rgb(255, 192, 203)。

分析：浏览器首先解析第一个<style>标签和hello文本的p标签，此时继续向下解析发现了第一个<script>标签，紧接着触发一次渲染，由于此过程非常快所以页面初始就能看到浅绿色hello。

然后浏览器发出JS请求，2s后JS获取完成立即运行控制台输出rgb(144, 238, 144)，JS运行完成后浏览器继续向下解析到beautiful文本的p标签和第二个<style>标签，再继续向下解析发现了第二个<script>标签，触发一次渲染，这个过程也是非常快，所以可以看到控制台输出结果和渲染粉色hello beautiful几乎是同时的。

解析到第二个<script>标签时，浏览器不会发出请求（稍作解释），2s后获取到JS脚本并执行，控制台输出rgb(255, 192, 203)，紧接着浏览器继续向下解析到world文本的p标签和第三个<style>标签，此时DOM解析完成，再进行正常的渲染，这个过程也是非常快，所以也能看到控制台输出结果和渲染浅蓝色hello beautiful world几乎是同时的。

理解：浏览器解析DOM时，虽然会一行一行向下解析，但是它会预先加载具有引用标记的外部资源（例如带有src标记的<script>标签），而在解析到此标签时，则无需再去加载，直接运行，以此提高运行效率。所以就会有上述两个输出结果间隔2s的情况，而不是4s。

结论：CSS会阻塞JS的执行的真正原因，浏览器无法预先知道脚本的具体内容，因此在碰到<script>标签时，只好先渲染一次页面，确保<script>脚本内能获取到DOM的最新的样式。倘若在决定渲染页面时，还有尚未加载完成的CSS样式，只能等待其加载完成再去渲染页面。

7.如何引用script来缓解DOM渲染阻塞?

直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载及执行分过程中，会阻塞后续的DOM渲染。
现在script提供了async和defer两个属性来解决DOM渲染阻塞的问题。

   <script type="text/javascript" src="path/to/script1.js" defer ></script>  
   <script type="text/javascript" src="path/to/script2.js" async></script>

如果是引入式script，放在头部的话可以使用defer（延迟执行）和async（异步执行）
如果是内联式script,那还是老老实实的放在body标签结束前

defer（延迟执行）的作用：保证等DOM树解析完毕后，再执行JS脚本。
async（异步执行）的作用：保证 DOM树解析和JS脚本异步并行执行。

应用场景：

defer
如果你的脚本代码依赖于页面中的DOM元素（文档是否解析完毕），或者被其他脚本文件依赖。
例：评论框、代码语法高亮、polyfill.js

async
如果你的脚本并不关心页面中的DOM元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。
如：百度统计、Google Analytics
如果不太能确定的话，用defer总是会比async稳定。。。

8.一个问题：内联式script标签应该放到body标签之前或者之后是否可行？

按照HTML5标准中的HTML语法规则，如果在</body>后再出现<script>或任何元素的开始标签，都是parse error，浏览器会忽略之前的</body>，即视作仍旧在body内。所以实际效果和写在</body>之前是没有区别的。
总之，这种写法虽然也能work，但是并没有带来任何额外好处，实际上出现这样的写法很可能是误解了“将script放在页面最末端”的教条。所以还是不要这样写为好。

总结

综合上述所有情况，可以得出如下结论。

CSS不会阻塞DOM解析，但是会阻塞DOM渲染，严谨一点则是CSS会阻塞render tree的生成，进而会阻塞DOM的渲染
JS会阻塞DOM解析
CSS会阻塞JS的执行
浏览器遇到<script>标签且没有defer或async属性时会触发页面渲染
Body内部的外链CSS较为特殊，请慎用

综合上述所有情况，总结书写规范：

把内联式<script>放在<body>闭合标签之前
<link>标签放在<head>内部
而页面通过CDN引入第三方框架或库时，基本都是将其<script>标签放在<link>标签前面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <link rel="stylesheet" href="./static/style.css?sleep=3000">           
</head>
<body>
    <p>hello world</p>
    <h1>h1标签</h1>
    <script src='static/index.js'></script> 
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            var p = document.querySelector('p')
            console.log(p)
        })
    </script>
</body>
</html>