html、css、js阻塞

Question

1.html文件是边下载边解析成DOM树吗？
2.浏览器在什么时候向服务器发送获取css、js外部文件的请求？
3.浏览器在解析<style>或外部css文件，生成CSSOM树时会阻塞DOM树的构建吗？
<style>和<link>在阻塞解析方面有什么区别？
不同位置的<style>和<link>，尤其是位置靠后的css块，对于CSSOM的构建，有什么影响吗？
4.浏览器是等到DOM和CSSOM都构建完成以后才渲染页面吗？
本人前端小白，看了好多文章，感觉越来越乱，希望大牛能够指点一下浏览器在加载、解析html、css、js文件时，相互之间的阻塞到底是怎样的一个情况，感激不尽、感激不尽、感激不尽......

Answer 1

文件是从上往下执行的，这就是如果把link css放在标签class引用之后，页面打开的时候一开始有一会是乱的。你不需要纠结这个问题，无特殊原因原则就是：
1.link css放在head中
2.js放在body最下面

Answer 2

1.html文件是边下载边解析成DOM树吗？

=> 在transfer encoding为chunked模式下，边下载边解析，否则是下载完了之后在解析。具体可参考这里

2.浏览器在什么时候向服务器发送获取css、js外部文件的请求？

=> 解析DOM时碰到外部链接，如果还有connection，则立刻触发下载请求

3.浏览器在解析<style>或外部css文件，生成CSSOM树时会阻塞DOM树的构建吗？

=> CSSOM构建不影响DOM的构建。javascript才会影响两者的构建

<style>和<link>在阻塞解析方面有什么区别？

=> style不用下载，link中CSS需要下载， 如果紧靠在link之后有对JS对CSSOM的查询操作的话，该CSS的下载会block脚本执行，因此会block rendering过程。

不同位置的<style>和<link>，尤其是位置靠后的css块，对于CSSOM的构建，有什么影响吗？

=> 自身位置应该没有什么影响。有影响的是media query，只有满足当前环境的media query的link中的CSS才会block Render Tree的构建。

4.浏览器是等到DOM和CSSOM都构建完成以后才渲染页面吗？

=> 一般情况下是的，因为有了两者之后才能构建Render Tree，才能开始渲染。但是有些情况下不会等CSSOM构建完毕，比如CSS文件下载失败，你会看到没有样式的页面被渲染。