文档的预解析

1. 预解析的核心目标

浏览器在正式解析（Parsing）HTML 前，会启动一个轻量级的  预解析器（Pre-Parser），快速扫描文档内容，实现：

• 提前发现并加载关键资源（如 CSS、JavaScript、图片）。
• 推测性构建部分 DOM 结构，减少主解析器的等待时间。
• 优化网络请求的优先级，避免资源加载阻塞渲染。

2、具体步骤

1. 快速扫描：预解析器逐字节扫描 HTML，识别 资源标签（如<script>、<link>、<img>)
2. 推测性构建DOM：预解析器尝试构架简化的DOM结构，供主解析器后续填充
3. 主解析器接管：主解析器基于预解析结果继续处理，跳过已扫描的部分，直接填充或修正 DOM
4. 主解析器追上时停止：当主解析器处理到预解析器已扫描的位置时，预解析器退出。

3、预解析的触发条件与限制

(1)触发条件：

• HTML 文档开始加载时自动启动。
• 遇到 <script async> 或 <link preload>等标签时增强预加载。

(2)无法预解析的情况：

• 内联JS会强制主解析器暂停。
• 同步脚本（无async/defer）会阻塞预解析和主解析。
• 主解析器暂停时，预解析器也会被迫停止（因为预解析器需要与主解析器保持同步，避免预测错误）。

4、主解析器暂停时预解析器的两种情况：

（1）同步脚本导致的暂停

• 主解析器必须立即下载并执行 脚本（可能修改 DOM）。
• 预解析器强制停止：因为脚本可能通过 document.write()动态插入标签，预解析器必须等待主解析器执行完毕才能保证预测准确性。

（2）async脚本执行导致的暂停

• 主解析器暂停执行脚本，但预解析器继续扫描。
• 原因：async 脚本不会通过 document.write()修改 DOM（现代规范已废弃此用法），且其执行时间极短，预解析器可安全继续工作。

5. 关注资源优先级

• 预解析器会根据资源类型分配优先级：
  • 高优先级：CSS、字体、首屏图片。
  • 低优先级：非首屏图片、异步脚本。

拓展：

1、资源下载的过程：

触发下载的时机（预解析器扫描+主解析器处理）—>网络请求的生命周期（检查缓存—>建立连接（如果没有缓存）—>发送请求—>接收响应）

2、资源优先级的设置作用：

• 预解析器在快速扫描 HTML 时，会为发现的资源分配初始优先级
• 解析器不直接控制下载，而是由 浏览器网络栈 根据优先级调度下载任务，保证关键路径资源快速就位

3、主解析器和预解析器的步调：

 预解析器在扫描到同步脚本时，会停止，等到主解析器走到这个脚本执行完脚本后，两个解析器才同时开始往后走，避免脚本修改后续DOM导致预测错误