主要观点总结
文章讨论了资源预取（prefetching）可能导致网站加载速度变慢的问题，并提供了相应的解决方案。文章首先介绍了资源预取的优势和可能带来的性能问题，然后探讨了如何应对这些问题。通过实例解释了预加载的作用、预加载请求的优先级、预加载请求过早导致的带宽竞争等问题，并提供了防止预加载影响网站性能的方法和建议。
关键观点总结
关键观点1: 资源预取的优势和可能带来的性能问题
预加载是一种网页性能优化技术，能提前加载可能需要的资源以加快后续访问速度。但预加载可能导致资源过早加载，与关键内容争夺带宽，影响网站性能。
关键观点2: 预加载请求过早导致的带宽竞争
预加载请求往往发生得太早，导致它们与主要内容的图片争夺带宽。尽管浏览器会将预加载请求标记为最低优先级，但在实际情况下，这可能导致性能问题。
关键观点3: 真实用户监测结果
通过真实用户监测（RUM），发现预加载的JavaScript文件在大多数情况下会比关键图片先加载完成。这说明在实际用户体验中，预加载仍具有一定优势。
关键观点4: 避免预加载影响网站性能的建议
为了预防预加载资源与关键内容争夺带宽，建议不要直接在初始HTML页面或HTTP头中添加预加载提示。而是使用JavaScript在页面加载完成后再动态插入预加载标签。
文章预览
前言 探讨了资源预取（prefetching）可能导致网站加载速度变慢的问题，并提供了解决方案。今日文章 @Matt Zeunert 分享，@ 前端早读课飘飘翻译。 预加载（Prefetching）本应提升性能，但有时却可能延迟网站的加载速度。 本文将介绍资源预加载的优势、它可能带来的性能问题，以及如何应对这些问题。 资源预加载的作用 预加载是一种网页性能优化技术，它会提前加载可能需要的资源，以加快后续访问速度。 例如，当用户访问你的首页时，你可以预加载登录页面或定价页面所需的代码。这样，当用户真正进入这些页面时，资源已经准备就绪，加载速度会更快。 要预加载资源，可以在 HTML 代码中添加一个预加载链接标签，例如： < link rel = " prefetch " as = " style " href = " page-2.css " /> 预加载请求的优先级 预加载的资源并不是立刻需要的，因此它们应该在后台
………………………………
