这张图其实向表达的是以下几点
1. CSS不会阻塞DOM的解析, 但会阻塞DOM的渲染
2. JS会阻塞DOM的解析和渲染
3. JS会等待CSSOM
第一点
关于第一点, CSS会阻塞DOM的渲染, 确实如此,看下面这个例子(link故意没放
head
里, 这个例子里link就算放head
结果也一样, 因为CSS不阻塞DOM解析), bootstrap.css阻塞了DOM的渲染, 所以在bootstrap.css加载解析完成前, 我们看不到h1
标签内的内容, 因为CSS阻塞了DOM的渲染.
<head>
<!-- style.css h1 {color: red;} -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>我是红色的</h1>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
<!-- test.js console.log('hi')} -->
<script src="test.js"></script>
<!-- style2.css h1 {color: blue;} -->
<link href="style2.css" rel="stylesheet">
</body>
但是并不是说只要bootstrap.css没加载好, DOM就不能渲染, 浏览器有自己的优化机制,如下例子
<head>
<!-- style.css h1 {color: red;} -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>我是红色的</h1>
<!-- test.js console.log('hi')} -->
<script src="test.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
<!-- style2.css h1 {color: blue;} -->
<link href="style2.css" rel="stylesheet">
</body>
图1
图2
图3 完全加载好, bootstrap.css 去掉了h1
的margin 等
结果如上图, 虽然bootstrap.css 没有加载好,但是浏览器已经渲染出了页面, style2.css加载完成后,它的画面也渲染出来了(个人感觉这是浏览器自己的优化机制),
CSS会阻塞DOM的渲染
这个观点感觉怪怪的, 的确CSSOM没有构建好, 页面不会渲染, 但是并不是要页面所有的css全部加载好, 才会去渲染页面,这还得看css link 的位置(可能和浏览器优化有关).
第二点
JS会阻塞DOM的解析和渲染, 指JS阻塞
script
标签后面内容的解析和渲染
第三点
JS会等待CSSOM, 应该是指JS会等待
script
之前的CSSOM,即需要loading parse CSS(异步加载可以不必等待CSSOM, 如async标签 )
总结
其实写一点小测试, 来揣摩浏览器的渲染机制就像是盲人摸象, 上面这3点, 暂时觉得没问题, 除了第一点中CSS会阻塞DOM的渲染
感觉怪怪的,
参考文献
http://www.fangbinwei.cn/articleDetail?id=5a3a1cfc0e43264834ec5897
https://segmentfault.com/a/1190000004292479
https://segmentfault.com/a/1190000007766425
https://zhuanlan.zhihu.com/p/29418126
https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_order_of_processing_scripts_and_style_sheets
https://juejin.im/post/59c60691518825396f4f71a1
https://yq.aliyun.com/articles/4049
https://www.zhihu.com/question/61309490
https://www.cnblogs.com/chenjg/p/7126822.html