性能优化之html、css、js三者的加载顺序

DOM的解析
控制台立即打印出了p元素，因此CSS不会阻塞DOM的解析。
但是页面的渲染还在等待

由此可以看出DOM Tree的解析和CSSOM Tree的解析是互不影响的，两者是并行的。
因此CSS不会阻塞页面DOM的解析，
但是由于render tree的生成是依赖DOM Tree和CSSOM Tree的，因此CSS必然会阻塞DOM的渲染

JS会阻塞DOM解析了，JS执行初控制台打印null,而不是p标签

CSS 会阻塞 JS 的执行

1、CSS与DOM的关系

CSS不会阻塞DOM的解析，但会阻塞DOM的渲染

2、CSS与JS的关系

CSS、JS会阻塞页面渲染 (render Page)，
CSS会阻塞JS的执行，但它们不会阻塞HTML的解析

CSS会阻塞JS执行，但不会阻塞JS文件的下载

页面中包含外部JS与外部CSS

CSS会阻塞JS的执行，所以JS必须要等到CSSOM构建完成之后再执行

JS会阻塞DOM的构建，因此也就会阻塞页面的渲染

3、JS延迟加载

3.1 script（默认脚本）

HTML解析器在解析过程中如果遇到script标签🏷️，
就会暂停解析，先去请求下载script脚本，
下载完接着执行该脚本代码，执行完之后再继续解析HTML。

所以script 阻塞了浏览器对 HTML 的解析，
如果获取 JS 脚本的网络请求迟迟得不到响应，
或者 JS 脚本执行时间过长，都会导致白屏，用户看不到页面内容。

3.2 script async（异步脚本）

HTML解析器在解析过程如果遇到script async标签，

该脚本的请求下载是异步的，不会阻塞HTML的解析，

但是如果脚本下载回来时，HTML还没有解析完成，

这时候会暂停HTML的解析，先去执行脚本内容，执行完成后，再继续解析HTML。

当然它还有一种情况就是当异步脚本下载回来时，HTML解析已经完成了，

那该脚本就对HTML没啥影响，下载完直接执行就好了。

3.3 script defer（异步延迟脚本）

HTML解析器在解析过程如果遇到script defer标签，

该脚本的请求下载也是异步的，不会阻塞HTML的解析，

并且在脚本下载完之后如果HTML还没解析完成，

该脚本也不会阻塞HTML解析，而是会等HTML解析完成之后再执行。

如果存在多个script defer标签时，

他们之间的执行顺序会按他们在HTML文档中的顺序来进行

，这样能够保证JS脚本之间的依赖关系。

如果脚本是模块化的，并且脚本之间没有依赖关系，使用async
如果脚本之间有依赖关系，使用defer
如果脚本内容比较小，并且被一个异步脚本依赖，使用默认脚本(不放任何属性)

2者结合更容易理解
参考链接1
参考链接2
参考链接3