前端渲染

首先基础的几点：

1:css不会阻塞dom的解析，会阻塞元素的渲染。原因浏览器解析时将html构建成dom🌲，将css构建成cssOS🌲，两者合一构建一颗渲染🌲。

2:js会阻塞dom的解析，但会将dom里面需要下载的文件，图片进行并行下载，其它文件进行异步下载，其中在script文件中加入async可以进行异步并行下载，加入defer可以等文档解析完成后执行。

3:若是css与js都放头部，最好js放在前面，原因若是css放在前面，假如css解析的很慢，那么js里面就算只有一行代码也会阻塞，因为解析到js的时候浏览器会先渲染一次（浏览器不知道脚本里面有啥），那么渲染肯定需要css解析完才行啊。

接着是我自己测试后的结果

将link放到body之前，并增加延迟

<link rel="stylesheet" href="../css/sleep5000-my.css">

在调试器可以看到dom已经解析完成了，但是没有渲染出来。等5秒css解析完，才能够渲染出来。

 

若是将 link放到body里面，并增加延迟

<link rel="stylesheet" href="../css/sleep5000-my.css">

在调试器可以看到dom解析停在css这块，没有继续解析，明显阻塞了。

 

同样将