html、js和css的加载和执行顺序

1）js加载后立即执行；

2）js执行时会阻塞页面后续的内容（包括页面的渲染和其他资源的下载）。
原因：因为浏览器需要一个稳定的dom树结构，而js中很可能有代码直接改变了dom树的结构，比如使用了document.write或者appendChild，甚至使用页面跳转。

3）如何优化js
（1）将所有的script标签放到页面底部，也就是body闭合标签之前，这能确保这脚本执行前页面已经完成了DOM树的渲染；
（2）尽可能合并脚本，页面的script标签较少，加载也就越快，响应速度也就越快，无论是外链还是内链脚本；
（3）采用无阻塞下载js脚本
a. script标签中使用defer属性：defer = true，会让js和DOM并行加载，带页面加载完成后再执行js文件，这样则不回阻塞；
b. async = true 可以设置js文件异步加载与执行；
c. 使用动态创建的script元素来下载并执行代码；
d. async 和 defer 都支持js文件的异步加载，但是只有后者能保证载DOM加载后才执行；
e. 若同时使用defer和async，则defer属性会失效

4）css 和 html 是并行加载的，过程中如果遇到css 或者 img，则会向浏览器返回一个请求，待资源返回后，将其添加到dom的相应位置中