前端小记

# 页面渲染被阻塞的原因

在浏览器页面进行渲染的时候，我们知道一些标签会导致页面渲染被阻塞，那么被阻塞的原因到底是什么呢，下面来详细看看：

首先浏览器渲染页面前，会构建出DOM与CSSOM树，因此我们需要尽快的降渲染所需的css与js提供给页面

# css

css不会阻塞DOM树的构建，但是会阻塞页面渲染，浏览器不会渲染任何内容直到CSSOM构建完毕

所以我们需要尽早的加快css的下发，对于暂不需要的css文件，可以通过媒体查询解决这个问题

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
1
2
3

# script

当浏览器解析道script标签时，会将渲染控制权交给js，暂停构建DOM，延缓页面渲染

script能力：

  • JavaScript 可以查询和修改 DOM 与 CSSOM
  • JavaScript 执行会阻止构建 CSSOM
  • 除非将 JavaScript 显式声明为异步，否则它会阻止构建 DOM

那么如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，会怎样？答案很简单，对性能不利：浏览器将延迟脚本执行和 DOM 构建，直至其完成 CSSOM 的下载和构建

# 参考资料

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript?hl=zh-cn

←