UD5工具箱
预加载扫描器模拟
模拟浏览器预加载扫描器（Preload Scanner），分析HTML中静态声明的资源，
按优先级排序展示浏览器将如何提前发现并加载它们。
🌐 输入页面URL
可能受CORS限制
或
—— 或者 ——
📋 粘贴HTML代码
快速加载预设示例：
等待扫描
输入URL或粘贴HTML代码，然后点击扫描按钮
常见问题与知识点
🔍 什么是浏览器的预加载扫描器（Preload Scanner）？
预加载扫描器是浏览器中的一个独立子解析器，它在主HTML解析器之前快速扫描HTML文档，
寻找需要提前加载的资源（如CSS、JS、图片、字体等）。它的核心价值在于：不等主解析器遇到资源标签，
就提前发起网络请求，从而减少页面加载的等待时间。Chrome的Blink引擎中称之为
HTMLPreloadScanner，Firefox中称为Speculative Parser。
⚡ 预加载扫描器和主解析器有什么区别？
主解析器负责构建DOM树、执行JavaScript、应用CSS样式；而预加载扫描器只做一件事——
快速扫描HTML标记，发现资源URL并提前发起下载。关键区别：
• 扫描器不执行JavaScript，因此看不到JS动态添加的资源
• 扫描器运行速度极快，通常比主解析器快数倍
• 扫描器遇到阻塞脚本时会暂停（因为脚本可能改变后续HTML）
• 扫描器可以超前主解析器很多个标签
• 扫描器不执行JavaScript，因此看不到JS动态添加的资源
• 扫描器运行速度极快，通常比主解析器快数倍
• 扫描器遇到阻塞脚本时会暂停（因为脚本可能改变后续HTML）
• 扫描器可以超前主解析器很多个标签
📋 哪些资源会被预加载扫描器发现？
扫描器主要识别以下静态声明的资源：
•
•
•
•
•
•
•
•
•
•
<link rel="stylesheet"> — CSS文件•
<link rel="preload"> — 显式预加载资源•
<link rel="dns-prefetch / preconnect"> — DNS/连接优化•
<script src="..."> — JS文件（含async/defer属性）•
<img src="..."> 及 srcset — 图片资源•
<picture> 中的 <source> — 响应式图片•
<video>/<audio> 及其 <source> — 媒体资源•
<iframe> — 嵌入式框架•
<style> 内联CSS中的 url() — 背景图等（部分浏览器支持）
🎯 资源优先级是如何确定的？
浏览器根据资源类型和对页面渲染的关键程度分配优先级（以Chrome为例）：
Highest：CSS样式表（阻塞渲染）、同步JS（阻塞解析）
High：字体文件、
Medium：
Low：图片、
Lowest：tracking像素、
优先级会影响资源的加载顺序和带宽分配。
Highest：CSS样式表（阻塞渲染）、同步JS（阻塞解析）
High：字体文件、
preload as="font"、script asyncMedium：
preload默认优先级、script defer、Fetch/XHRLow：图片、
prefetch、<link rel="dns-prefetch">Lowest：tracking像素、
prefetch（低优先级场景）优先级会影响资源的加载顺序和带宽分配。
🆚 preload、prefetch、preconnect、dns-prefetch 有什么区别？
• preload：告诉浏览器"这个资源当前页面马上需要"，优先级高，尽早下载
• prefetch：告诉浏览器"这个资源未来可能需要"，优先级低，空闲时才下载
• preconnect：提前建立到第三方源的完整连接（DNS+TCP+TLS），减少后续请求延迟
• dns-prefetch：仅提前完成DNS解析，比preconnect轻量但效果有限
使用建议：关键资源用
• prefetch：告诉浏览器"这个资源未来可能需要"，优先级低，空闲时才下载
• preconnect：提前建立到第三方源的完整连接（DNS+TCP+TLS），减少后续请求延迟
• dns-prefetch：仅提前完成DNS解析，比preconnect轻量但效果有限
使用建议：关键资源用
preload，第三方CDN用preconnect，下一页资源用prefetch。
🚫 为什么预加载扫描器发现不了某些资源？
预加载扫描器不执行JavaScript，因此无法发现以下资源：
• JS动态创建的
• 通过
•
• 外部CSS文件中的
• 需要JS计算才能确定的资源路径
优化建议：将关键资源以静态HTML标签形式声明，或使用
• JS动态创建的
<img>、<script> 等元素• 通过
document.write() 插入的标签•
<template> 标签内的资源（未被激活）• 外部CSS文件中的
url() 引用（扫描器通常不解析外部CSS）• 需要JS计算才能确定的资源路径
优化建议：将关键资源以静态HTML标签形式声明，或使用
<link rel="preload">。
💡 defer 和 async 对预加载扫描器有什么影响？
• 普通 script（无属性）：扫描器发现后会暂停，等待主解析器处理（阻塞）
• script async：扫描器发现后立即开始下载，下载完成后尽快执行（不保证顺序）
• script defer：扫描器发现后立即开始下载，但执行推迟到DOM解析完成后（保证顺序）
使用
• script async：扫描器发现后立即开始下载，下载完成后尽快执行（不保证顺序）
• script defer：扫描器发现后立即开始下载，但执行推迟到DOM解析完成后（保证顺序）
使用
defer 或 async 可以让扫描器不阻塞地提前下载JS，
从而提升页面加载性能。对于非关键JS，推荐使用 defer。
🛠 如何利用预加载扫描器优化页面性能？
1. 关键CSS内联，非关键CSS异步加载——减少渲染阻塞
2. 使用
3. JS使用defer/async——让扫描器提前下载而不阻塞
4. 第三方资源使用preconnect——减少连接建立时间
5. 图片使用srcset——让扫描器根据视口选择合适的资源
6. 避免在阻塞JS之后放置关键资源——扫描器遇到阻塞脚本会暂停
7. 关键资源放在HTML靠前位置——让扫描器更早发现
2. 使用
<link rel="preload"> 提前声明关键资源（字体、英雄图片等）3. JS使用defer/async——让扫描器提前下载而不阻塞
4. 第三方资源使用preconnect——减少连接建立时间
5. 图片使用srcset——让扫描器根据视口选择合适的资源
6. 避免在阻塞JS之后放置关键资源——扫描器遇到阻塞脚本会暂停
7. 关键资源放在HTML靠前位置——让扫描器更早发现
📊 如何检查预加载扫描器是否正常工作？
可以使用以下方法验证：
• Chrome DevTools → Network面板：查看资源请求的发起时间，预加载的资源会在主解析器到达前就开始加载
• Performance面板：查看加载时间线，预加载扫描器发现的资源会在早期出现
• 使用本工具：粘贴HTML代码，查看扫描器能发现哪些资源及其优先级
• 检查
如果发现关键资源加载过晚，考虑将其提前声明或使用preload。
• Chrome DevTools → Network面板：查看资源请求的发起时间，预加载的资源会在主解析器到达前就开始加载
• Performance面板：查看加载时间线，预加载扫描器发现的资源会在早期出现
• 使用本工具：粘贴HTML代码，查看扫描器能发现哪些资源及其优先级
• 检查
rel="preload" 是否生效：在Network中查看该资源是否在早期被请求如果发现关键资源加载过晚，考虑将其提前声明或使用preload。
📝 内联CSS中的url()会被预加载扫描器处理吗？
部分会。Chrome的预加载扫描器会解析
<style> 标签中的
url() 引用（如背景图片），并将其加入资源队列。但不会解析
外部CSS文件中的 url()（因为那需要先下载CSS文件）。
元素的 style 属性中的 url() 也可能被扫描。
不过，data: URI和#片段会被忽略。