今天读完这篇文章Prebrowsing后，在最近新上线的网站上尝试使用了下preload，发现有点小问题在这里记录下。
我在项目中添加了preload-webpack-plugin来插入preload link。然后我们可以看到下图的结果。前四个script请求都是preload的script，红色框内的script才是我们web应用需要尽快执行的js，所以从图中可以看到问题很严重也明显。
preload的script代码会被优先加载，并且会占用http并发数，导致我们页面的js被stalled(waterfall中那个灰色线段)，从而也导致页面加载时间变长，特别是首屏时间会变长。优化变成了慢化，尴尬。。。
preload的结果
后面改成prefetch后，结果如下图所示，红色框内的应用js被第一时间加载，prefetch的script被安排在后面加载，这样才达到了优化效果
prefetch的结果
既然实战粗来的，那就记录下吧
PS：优化网站性能的pre家族还有dns-prefetch prerender，有兴趣的可以进一步了解
prefetch 与 preload webpack优化之preload和prefetch里面介绍了preload...
转载： 浏览器页面资源加载过程与优化 用 preload 预加载页面资源 纠正 上图来自第一篇文章，图中圈起来的部...
prefetch 和 preload 1，prefetch 是父 chunk 加载完成后，再加载。preload ...
Preload,Prefetch的使用
参考资料： MDN preload preload 有什么好处 Preload, Prefetch And Pri...
今天读完这篇文章Prebrowsing后，在最近新上线的网站上尝试使用了下preload，发现有点小问题在这里记录...
在使用@vue/cli工具构建的项目，打包上线之后，一般都能看到 和 这样的标签，对于preload与prefet...
默认设置是async 1 .一般我们都是将splitChunks.chunks字段打包成all,可以同时对同步和异...
浏览器资源优先级 不同的资源在浏览器渲染的不同阶段进行加载的优先级不同, 一共分成五个级别Highest 最高Hi...
背景 一个web page通常由两部分组成： HTML document optional resource（cs...
本文标题：prefetch与preload的一点重要区别
本文链接：https://www.haomeiwen.com/subject/pyxiwxtx.html
网友评论