今天读完这篇文章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，有兴趣的可以进一步了解
网友评论