浏览器解析资源

一、css样式

浏览器构建 DOM树 和 构建 CSSOM树是并行的，解析CSS样式资源时，CSS会异步下载，不会阻塞浏览器构建DOM树，但是会阻塞渲染，在构建渲染树时，会等css下载解析完毕后才进行，防止css规则发生变化。（CSS加载会阻塞后面的的JS语句的执行，因为HTML5标准中有一项规定，浏览器在执行Script脚本前，必须保证当前的的外联CSS已经解析完成，因为JS可能会去获取或者变更DOM的CSS样式，如果此时外联CSS还没解析好，获取到的结果就是不准确的）

二、image图片

浏览器解析Img图片时，直接异步下载，不会阻塞解析，下载完毕后用图片替换原有src的地方。

三、JS文件

浏览器解析JS脚本资源时，需要等待JS脚本下载完成并执行后才会继续解析HTML，但是当脚本属性为defer和async时解析过程会改变，defer是延迟执行，async是异步执行。

async和defer的区别：

1、async 和 defer 都仅对外部脚本有效
2、async 标志的脚本文件一旦加载完成就立即执行；而 defer 标志的脚本文件会在 HTML解析完成且DOM构建完毕后再执行
3、如果有多个js脚本，async标记的脚本哪个先下载结束，就先执行那个脚本，而defer标记则会按照js脚本书写顺序执行
4、如果同时使用async和defer属性，defer不起作用，浏览器行为由async属性决定
5、浏览器解析到带 async 属性的 script 标签时，不会中断 html 解析，而是并行下载脚本，当脚本下载完成后，中断解析并执行脚本
6、浏览器解析到带 defer 属性的 script 标签时，不会中断 html 解析，而是并行下载脚本，当浏览器解析完HTML时、DOMContentLoaded 事件即将被触发时，此时再执行下载完成的脚本

css放在头部：

1、外链css无论放在html的任何位置都不会影响html的解析，但是会影响html的渲染
2、如果将css放在尾部，html的解析不受影响，浏览器会在 css 样式加载解析完后，重新计算样式绘制，会造成回流重绘、页面闪动等现象
3、如果将css放在头部，css的下载解析时可以和html的解析并行，并且会等待css下载解析完毕后开始绘制

Script放在尾部：

1、当浏览器解析到 script 时，就会立即下载执行，中断 html 的解析过程，因为 js 可能会修改 dom 元素
2、如果外部脚本加载时间长，就会造成网页长时间未响应