Web 性能优化：Preload与Prefetch的使用及在 Chrome 中的优先级
最新回答
不痴情罪名
2026-10-17 11:00:25
在Web性能优化的第6篇中，深入探讨了Chrome网络栈的工作原理，以帮助你更有效地利用Web加载原语。
Preload是一个声明式fetch，用于强制浏览器在不阻塞document的onload事件的情况下请求资源，而Prefetch则告知浏览器将来可能需要资源，但加载资源的时间由浏览器决定。
预加载在提高网站性能方面表现显著，如Housing.com和Shopify等网站均通过预加载技术，实现了加载时间的显著减少。
在使用预加载时，可以考虑以下案例：预加载字体可解决文本闪烁问题，Treebo网站在3G网络下通过预加载图片和主要打包文件，实现首屏绘制和可交互延迟的减少，而Flipkart则通过预加载主要打包文件，在低性能手机的3G网络下节省大量主线程空闲时间。
预加载和预读取（Prefetch）在大型网站中都有广泛应用。预加载用于当前页面或即将跳转页面所需的主要资源，而预读取则用于用户可能将来需要的资源。两者资源在浏览器的HTTP缓存和内存缓存中存储，可被当前和未来的会话使用。
在Chrome的网络栈中，preload和prefetch有不同的优先级。preload资源具有更高的优先级，优先于其他资源加载。使用as属性进行预加载的资源将获得与其请求的资源类型相同的优先级，而不带as属性的preload资源优先级等同于异步请求。
在实际应用中，预加载和预读取资源可能占用用户的带宽。使用preload时，若资源未被使用，会导致额外的工作，特别是在移动设备上，这相当于浪费用户的流量。因此，应合理选择需要预加载的资源，避免无谓的带宽消耗。
Preload与Prefetch应应用于合适的场景，避免导致二次获取。使用preload来获取当前需要的资源，而使用prefetch来获取将来可能需要的资源，避免两者混合使用。在使用preload时，务必提供有效的“as”属性，否则可能导致额外的资源请求。预加载字体时应添加crossorigin属性以避免二次下载。
在考虑预加载时，应基于网站的具体需求和网络状况来决定预加载资源的数量。对页面中可能需要的文件进行尽早预加载，如脚本的预加载可以与执行分离，提高加载效率。
热门标签
