浏览器专题系列 - 渲染原理与阻塞渲染
过程
1、将HTML文档解析成文档对象模型DOM。
2、将CSS文件解析成层叠样式表对象模型CSSOM。
3、在DOM和CSSOM之上,创建渲染树。
4、渲染树布局
5、渲染树绘制
回流 Reflow
改变布局。
重绘 Repaint
不改变布局。
CSS阻塞渲染
1、link在头部
<head>
<link rel="stylesheet" href="https://www.youtube.com/s/player/4a1799bd/www-player-webp.css">
</head>
黑屏,直到CSS加载出来。
2、link在中间
<body>
<h1>AAA</h1>
<link rel="stylesheet" href="https://www.youtube.com/s/player/4a1799bd/www-player-webp.css">
<h2>BBB</h2>
</body>
不会黑屏,会把前面的DOM先加载出来。
总结,CSS不阻塞DOM解析,会阻塞DOM渲染。
1、CSS在头部不会阻塞HTML解析,会阻塞渲染。因为HTML的解析和CSS的解析互不影响,但渲染树需要HTML和CSS一起,故而阻塞渲染。
2、CSS在body会阻塞HTML解析和渲染(很少这样做),因为HTML会把<link>当成DOM元素解析,故而阻塞后面的解析和渲染。
3、CSS会阻塞JS的执行,故而JS要放在CSS前面。
JavaScript阻塞渲染
1、内联(在<script>标签中写js代码)
<head>
<script>
let d = Date.now()
while (Date.now() < d + 1000 * 5) { }
</script>
</head>
黑屏,直到内联JS执行完。
<body>
<h1>AAA</h1>
<script>
let d = Date.now()
while (Date.now() < d + 1000 * 5) { }
</script>
<h2>BBB</h2>
</body>
黑屏,直到内联JS执行完。
2、外联(在<script>添加src引入外部文件,文件内容和上面一样)
<head>
<script src="test.js"></script>
</head>
黑屏,直到外联JS执行完。
<body>
<h1>AAA</h1>
<script src="test.js"></script>
<h2>BBB</h2>
</body>
不会黑屏,先加载出外联JS前面的DOM元素。
总结,JS会阻塞DOM的解析和渲染。