## 资源外链的下载 上面介绍了html解析，渲染流程。但实际上，在解析html时，会遇到一些资源连接，此时就需要进行单独处理了 简单起见，这里将遇到的静态资源分为一下几大类（未列举所有）： - CSS样式资源 - JS脚本资源 - img图片类资源 **遇到外链时的处理** 当遇到上述的外链时，会单独开启一个下载线程去下载资源（http1.1中是每一个资源的下载都要开启一个http请求，对应一个tcp/ip链接） **遇到CSS样式资源** CSS资源的处理有几个特点： - CSS下载时异步，不会阻塞浏览器构建DOM树 - 但是会阻塞渲染，也就是在构建render时，会等到css下载解析完毕后才进行（这点与浏览器优化有关，防止css规则不断改变，避免了重复的构建） - 有例外，`media query`声明的CSS是不会阻塞渲染的 **遇到JS脚本资源** JS脚本资源的处理有几个特点： - 阻塞浏览器的解析，也就是说发现一个外链脚本时，需等待脚本下载完成并执行后才会继续解析HTML - 浏览器的优化，一般现代浏览器有优化，在脚本阻塞时，也会继续下载其它资源（当然有并发上限），但是虽然脚本可以并行下载，解析过程仍然是阻塞的，也就是说必须这个脚本执行完毕后才会接下来的解析，并行下载只是一种优化而已 - defer与async，普通的脚本是会阻塞浏览器解析的，但是可以加上defer或async属性，这样脚本就变成异步了，可以等到解析完毕后再执行 注意，defer和async是有区别的： **defer是延迟执行，而async是异步执行。** 简单的说（不展开）： - `async` 是异步执行，异步下载完毕后就会执行，不确保执行顺序，一定在`onload`前，但不确定在`DOMContentLoaded`事件的前或后 - `defer` 是延迟执行，在浏览器看起来的效果像是将脚本放在了`body`后面一样（虽然按规范应该是在`DOMContentLoaded`事件前，但实际上不同浏览器的优化效果不一样，也有可能在它后面） **遇到img图片类资源** 遇到图片等资源时，直接就是异步下载，不会阻塞解析，下载完毕后直接用图片替换原有src的地方。 ### loaded和domcontentloaded 简单的对比： - DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片(譬如如果有async加载的脚本就不一定完成) - load 事件触发时，页面上所有的DOM，样式表，脚本，图片都已经加载完成了