0%

2019-02-21-解析页面流程（3）HTML初始化遇到外链的处理

发表于 更新于 分类于

Chrome 中的调试

Chrome 的开发者工具中，Perfromance 中可以看到详细的渲染工程
image

资源外链的下载

在解析 html 时，会遇到一些资源链接，此时需要进行单独处理

一般情况，静态资源分为几个大类（未全列举）：

  • CSS 样式资源
  • JS 脚本资源
  • img 图片资源

遇到外链时的处理

当遇到上述外链的时候，会独立开启一个下载线程去下载资源（HTTP1.1）

遇到 CSS 样式资源

CSS 资源的处理有几个特点

  • CSS 下载时异步，不会阻塞浏览器构建 DOM 树
  • 但是会阻塞渲染，也就是在构建 render 时候，会等到 css 下载解析完毕才会进行。（这与浏览器优化有关，防止 css 规则不断改变，避免了重复的构建）
  • 「media query」声明的 CSS 是不会阻塞渲染的

遇到 JS 脚本资源

JS 脚本资源的处理有几个特点：

  • 阻塞浏览器的解析，也就是说发现一个外链脚本时，需等待脚本下载完成并执行后才会解析 HTML
  • 浏览器的优化，一般现代浏览器有优化，在脚本阻塞时，也会继续下载其他资源（当然也有并发上限），但是虽然脚本可以并行下载，但是解析过程仍然是阻塞的，也即是说必须这个脚本和执行完成后才能继续解析，并行下载只是一个优化操作
  • defer 与 async，普通德积小本是会阻塞浏览器解析的，但是可以加上 defer 或者 async 属性，这样脚本就会变成异步了，可以等待解析结束后执行脚本。

值得注意的是，defer 是延迟执行，async 是异步执行

简单的来说：

  • 「async」是异步执行，异步下载完毕后就会执行，不确保执行顺序，一定在 onload 钱，但是不确定在「DOMContentLoaded」事件的前或者后
  • 「defer」是延迟执行，在浏览器看起来的效果像是将脚本放在 body 后面一样。

DOMContentLoaded 事件和 onload 事件的区别

1
2
DOMContentLoaded: 当初始的HTML文档被完全加载和解析后，被触发，无需等待样式表、图像和子框架的加载完成。
onload:仅用于检测一个完全加载的页面（图像、CSS资源等）

遇到 img 图片类资源

遇到图片资源时候，直接是异步下载，不会阻塞解析，下载完成后直接使用图片替换原有 SRC

html 基本整理好了，明天和同事有个聚会，就暂时偷个懒，下周开始整理 CSS