prefetch与preload的一点重要区别

牧羊童鞋 · 简书 · · 2017-12-19 16:13

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

原文地址：访问原文地址
快照地址：访问文章快照

分享到微博

推荐文章

物道 · 一日道｜活一日有一日的欢喜，做一事添一事的意义

10 小时前

汽车行业关注 · 销量第一！理想汽车最新发布

昨天

氧叔本叔 · 三分像刘亦菲，就已足够她逃离韩娱工业...

21 小时前

汽车金融大全APP · “拍车头照+挪车电话”，5毛一条！这是什么生意？

3 天前

盖世汽车每日速递 · 4月欧洲销量：中国汽车制造商增长30%

5 天前

中国新闻网 · 百万粉丝网红被判刑！编造父母双亡卖假货

2 月前

中国金融四十人论坛 · 盛中明、杨博涵、余永定撰文探讨“稳增长”的关键：基础设施投资增速与融资

2 年前

了不起的大豆 · 半月不到，巴西大豆产区从“旱”转“涝”？

3 年前

哈飞院 · 【夜话】提前十分钟，人生大不同

3 年前

仓库仓储管理学习平台 · 要想企业好，仓库精细化管理不能少!

5 年前