HTML prefetch资源预取机制是否会级联触发?
问题场景复现
- 网站首页header区块中配置了如下预取规则:
<link rel='prefetch' href='/pages/about/'>
/pages/about/关于页面的header区块中配置了如下预取规则:
<link rel='prefetch' href='/pages/terms/'>
核心疑问:用户访问首页时/pages/terms/服务条款页面是否会被预取?HTML prefetch预取机制是否存在级联触发的特性?
明确答案
不会被预取,标准实现下的prefetch机制不存在级联触发的特性。
原理说明
- 浏览器触发prefetch的前提是:预取规则存在于当前正在渲染解析的活动文档DOM树中。用户访问首页时,浏览器只会扫描当前首页DOM内的所有prefetch声明,仅对
/pages/about/发起低优先级的预取请求,将响应内容存入本地HTTP缓存备用。 - 预取操作的本质只是拉取目标资源的原始响应存入缓存,不会对预取回的HTML文档做DOM解析、子资源加载、脚本执行、页面渲染等操作:预取
/pages/about/的过程中,浏览器根本不会读取about页面内写的prefetch规则,自然不会触发/pages/terms/的预取请求。 - 只有当用户实际点击跳转、真正加载渲染
/pages/about/页面时,浏览器才会扫描该页DOM内的prefetch规则,触发/pages/terms/的预取。这个行为是页面实际加载带来的正常效果,不属于预取的级联触发。
内容的提问来源于stack exchange,提问作者user1946932
相关产品推荐
相关产品推荐

