chrome 浏览器加载一个页面

从输入一个地址开始说起

此处省略浏览器发起 DNS 解析请求、发送 http 请求等（后面可能会补充）。就说开始接收数据后浏览器做了啥。

获取到一个 html 文件

完成 Finish Loading（html 文件）后，开始进入 Parse 阶段。在此阶段，会从上到下依次解析，但是，会对 html 中指定的资源提前发起请求（就是说还没解析到这，但为了网络性能的提升，提前利用某种方式找到需要的资源文件，比如 link 中的 css、script 中的 js、以及 img 等等。）。证据如下：

这是流程图：

这是 parse 首页 html 的，表示在解析 0-22 行（不包含 22 行）。

来看看内容是什么：

表示还没执行到下面的 script src 标签时，就对 4d77 的 js 文件发起了请求。

在 htm 解析阶段的请求收到响应

这个就是刚刚说的那个提前加载的 js 文件。可以看到，这里仅仅是接收完数据，并没有 evaluate（执行），因为 html 解析并没有解析到该 script 的行数。对吧？没毛病。

搞点小破坏

为了一探究竟 webkit（或者应该说 chrome，可能加载方式是各个浏览器的不同移植的不同实现，也可能加载方式是存在于 webkit 内核中）的加载顺序，我把 0-22 行中有一个 css 文件给 pending 住了。为什么要这么做？今天涛哥给我一个思考题，如果一个 css 资源（或者不是 css 资源，任意资源）被 pending 住了（不是挂掉了），浏览器会如何加载？会影响哪些？ 我知道的是挂掉的情况。一个链接挂掉了，浏览器会继续往后解析。但一个链接 pending 住了，会怎样？我原以为浏览器会继续解析，仿佛好像可以这样：我继续解析我的 DOM，等你 css 资源回来了，你叫我，我把控制权给你。虽然这样可能会产生这样的情况：页面我全都已经 Layout → render 了，但你还没回来；等你回来了，构建样式树，然后再来 Layout → render 一遍。不过 可能会有性能问题。

事实确实是这样的：当有 css 资源 pending 住了，浏览器停止解析 DOM。如下图：

在 finish loading css 文件后，浏览器才继续 parse 剩下的 DOM。什么意思呢？如果 head 头部中某个 css 文件被 pending 住了，那么页面就是白屏！！因为浏览器就要等待 css 回来了才继续解析。同时在第二个红框下面，也看到了对 js 文件的执行（也验证了前面说的，对脚本的执行是在解析到这一行时才执行，而资源的加载是 parse html 一开始的时候就进行的）

如果是其他资源（比如一个图片）pending 了呢？
这个还好，不会阻塞 DOM 的解析，只会导致 window.onload 延迟触发。

后话 —- 异步加载时 pending 一个 css 来试试。。。

后面异步加载的资源都属于并行加载了。互不影响。