本文共 857 字，大约阅读时间需要 2 分钟。

JS加载时间线

当JS加载开始时，浏览器会记录并执行这段过程。这个过程可分为几个关键阶段，每个阶段都有特定的处理逻辑。以下是详细的时间线分析：

1. 创建Document对象并开始解析web页面。浏览器首先会解析HTML元素和文本内容，将其添加为Element对象和Text节点到文档中。此时，document.readyState的值为'loading'。

2. 遇到外部CSS链接时，浏览器会创建线程来加载并继续解析文档。这一步属于资源加载阶段，属于同步执行。

3. 遇到外部JS脚本（未设置async和defer属性）时，浏览器会立即加载并阻塞，等待脚本执行完成后再继续解析文档。这一步属于同步执行阶段。

4. 遇到设置了async或defer属性的外部JS脚本时，浏览器会创建线程加载并继续解析文档。对于async脚本，加载完成后会立即执行，但禁止使用document.write()方法。

5. 遇到图片（img标签）时，浏览器会先解析DOM结构，然后异步加载图片src并继续解析文档。这属于资源加载阶段，通常是异步执行的。

6. 当文档解析完成后，document.readyState的值变为'interactive'，此时程序已进入浏览器的交互阶段。

7. 文档解析完成后，所有设置了defer属性的脚本会按照顺序执行。需要注意的是，这与async脚本的执行顺序不同，但同样禁止使用document.write()方法。

8. 当所有async脚本加载并执行完成，图片加载完成后，document.readyState的值变为'complete'，此时会触发window.load事件。

9. 从此以后，页面将以异步响应方式处理用户输入和网络事件，开始进入浏览器的交互阶段。

通过代码观察，可以更直观地验证上述时间线。例如：

通过以上代码可以观察到document.readyState的状态变化，验证时间线的准确性。图片部分的加载过程也会展示资源加载的异步特性。