浏览器专题系列 - 阻塞渲染-阿里云开发者社区

CSS

1. 阻塞渲染

阻塞渲染，仅是指浏览器是否需要暂停网页的首次渲染，直至该资源准备就绪

CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 外网资源，无梯子无法访问 -->
    <link rel="stylesheet" href="https://www.youtube.com/s/player/4a1799bd/www-player-webp.css">
    <link rel="stylesheet" href="./1.css">
    <title>Document</title>
</head>
<body>
    <h1>content</h1>
</body>
</html>

1.css

h1{
    color: red;
}

在外网样式资源下载完成前，页面将会处于白屏现象

如阻塞渲染的样式资源下载超时报错，则会跳过，会使用已经下载完成的CSS资源做解析构建CSSOM

所以在等待一段时间后（资源下载超时后）页面才会显示出来

2. 阻塞html解析

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>red1</h1>
    <link rel="stylesheet" href="https://www.youtube.com/s/player/4a1799bd/www-player-webp.css">
    <h1>red2</h1>
</body>
</html>

可以看到页面依旧处于白屏状态，此时在开发者工具中，可查看到Dom树中link节点后的h1 节点并未被解析出来

点击浏览器的停止加载按钮，red1内容会被渲染出来，此时查看Dom树，发现是没有<h1>red2</h1>这个节点的

当资源下载失败时，<h1>red2</h1> 才会被解析到，然后渲染出来

3. 如何解除阻塞

在渲染树构建中，要求同时具有 DOM 树和 CSSOM树才能进行构建,任何一个🌲构建过程中出现阻塞，会导致页面显示异常，导致出现严重的性能问题

HTML 和 CSS 都是阻塞渲染的资源

HTML 显然是必需的，因为如果没有 DOM，我们就没有可渲染的内容
CSS 的必要性就不一定

浏览器会下载所有 CSS 资源，无论阻塞还是不阻塞
CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间

通过媒体类型或媒体查询可以将一些 CSS 资源标记为不阻塞渲染的资源

如果我们有一些 CSS 样式只在特定条件下（例如显示网页或将网页投影到大型显示器上时）使用,我们可以通过 CSS“媒体类型”或“媒体查询”来解决这类用例

<!-- 适用于所有情况，始终阻塞渲染 -->
<link href="style.css" rel="stylesheet">
<!-- 只在打印内容时适用，网页首次加载时 -->
<!-- 该样式表不需要阻塞渲染 -->
<link href="print.css" rel="stylesheet" media="print">
<!-- 由浏览器执行的“媒体查询”：符合条件时-->
<!-- 浏览器将阻塞渲染，直至样式表下载并处理完毕-->
<!-- (页面首次加载时，如果不满足条件，不会阻塞渲染，但依旧会请求下载对应的资源) -->
<link href="other.css" rel="stylesheet" media="(max-width: 400px)">

通过使用媒体查询，我们可以根据特定用例（比如显示或打印），也可以根据动态情况（比如屏幕方向变化、尺寸调整事件等）定制外观

<!-- 阻塞渲染，适用于所有情况 -->
<link href="style.css"    rel="stylesheet">
<!-- 默认all，等价于不写 -->
<link href="style.css"    rel="stylesheet" media="all">
<!-- 具有动态媒体查询，将在网页加载时计算 -->
<!-- 根据网页加载时设备的方向，portrait(纵向-高度大于宽度).css 可能阻塞渲染，也可能不阻塞渲染 -->
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<!-- 只在打印网页时应用，因此网页首次在浏览器中加载时，它不会阻塞渲染 -->
<link href="print.css"    rel="stylesheet" media="print">

利用媒体查询解决上面的问题:

只在加载时当屏幕宽度<=400px时才阻塞,其它情况不阻塞渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 外网资源，无梯子无法访问 -->
    <link rel="stylesheet" href="https://www.youtube.com/s/player/4a1799bd/www-player-webp.css" media="(max-width: 400px)">
    <link rel="stylesheet" href="./1.css">
    <title>Document</title>
</head>
<body>
    <h1>content</h1>
</body>
</html>

4. 小结

CSS 是阻塞渲染的资源，在CSSOM构建完毕之前浏览器将不会渲染任何已处理的内容
利用媒体类型 或 媒体查询来解除对渲染的阻塞
浏览器会下载所有 CSS 资源，无论阻塞还是不阻塞

JS

1. 阻塞渲染

JavaScript 可以查询和修改 DOM 与 CSSOM

所以当 HTML 解析器遇到一个 script 标记时，它会暂停构建 DOM，将控制权移交给 JS 引擎，等 JS 引擎运行完毕，浏览器会从中断的地方恢复 DOM 构建

内联脚本阻塞渲染示例

刚加载时页面白屏，5秒后才会渲染出内容
说明内联js会阻塞DOM解析和渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>AAA</h1>
    <script>
        let d = Date.now()
        while (Date.now() < d + 1000 * 5) { }
    </script>
    <h2>BBB</h2>
</body>
</html>

外联同步脚本阻塞渲染示例

可以看到会先渲染出 AAA,5 s 后才渲染出 BBB
说明外联脚本也会阻塞DOM解析与渲染，但是因为无法确定脚本中的内容，所以会优先渲染一次已经构建DOM，确保加载的脚本能取得最新的DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>AAA</h1>
    <script src="./test.js"></script>
    <h2>BBB</h2>
</body>
</html>

test.js

let d = Date.now()
while (Date.now() < d + 1000 * 5) { }

2. 解除阻塞

将 JavaScript 脚本显式声明为异步，即可防止其阻塞DOM构建与渲染

向 script 标记添加异步关键字可以指示浏览器在等待脚本可用期间不阻止 DOM 构建

defer：异步进行下载，然后等待 HTML 解析完成后（DOM完成构建）按照下载顺序进行执行
async：异步进行下载,下载完成后会立即执行，执行时仍然会阻塞

defer使用示例

5 s 后可以看到渲染出AAA和BBB
又经过 5 s后控制台打印 render success,render success2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>AAA</h1>
    <script defer src="./test.js"></script>
    <script defer src="./tes2.js"></script>
    <script>
        let k = Date.now()
        while (Date.now() < k + 1000 * 5) { }
    </script>
    <h1>BBB</h1>
</body>
</html>

test.js

let d = Date.now()
while (Date.now() < d + 1000 * 5) { }
console.log('render success');

tes2.js

console.log('render success2');

async使用示例

4 s 后可以看到渲染出AAA
又经过 4 s后渲染出BBB
然后控制台打印 render success,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>AAA</h1>
    <script async src="./test.js"></script>
    <script>
        let k = Date.now()
        while (Date.now() < k + 1000 * 4) { }
    </script>
    <h1>BBB</h1>
</body>
</html>

test.js

let d = Date.now()
while (Date.now() < d + 1000 * 4) { }
console.log('render success');

3. 小结

无论是内联还是外联，js脚本会阻塞DOM的解析与渲染但

外联：因为无法确定外联脚本中的内容，所以会优先渲染一次已经构建DOM，确保加载的脚本能取得最新的DOM

将 JavaScript 脚本显式声明为异步，即可防止其阻塞DOM构建与渲染

在 script 标签中添加异步关键字即可指示浏览器在等待脚本下载期间不阻止 DOM 构建

异步关键字

defer：异步进行下载，然后等待 HTML 解析完成后（DOM完成构建）按照下载顺序进行执行
async：异步进行下载,下载完成后会立即执行，执行时仍然会阻塞

总结

JS 与 CSS 都是阻塞页面渲染的资源
可以通过媒体查询解除解决CSS在特定场景阻塞的问题
可通过为script添加异步属性来防止阻塞

补充： CSS 其实可以通过打包工具转化成js，在页面加载时，通过异步加载js资源，然后应用样式。这也是可以防止css阻塞渲染的一种方式

参考

developers-关键路径渲染

原文首发于个人博客，专题系列会整理多篇，与大家一起学习，共同进步，如有错误，还请斧正

浏览器专题系列 - 阻塞渲染

CSS

1. 阻塞渲染

2. 阻塞html解析

3. 如何解除阻塞

4. 小结

JS

1. 阻塞渲染

2. 解除阻塞

3. 小结

总结

参考

浏览器专题系列文章

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

浏览器专题系列 - 阻塞渲染

CSS

1. 阻塞渲染

2. 阻塞html解析

3. 如何解除阻塞

4. 小结

JS

1. 阻塞渲染

2. 解除阻塞

3. 小结

总结

参考

浏览器专题系列文章

热门文章

最新文章

相关电子书