web性能优化技巧篇之懒加载和预加载

这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战。

懒加载(Lazy Loading)

懒加载就是一开始不加载，但需要用到的时候再加载。这听起来跟动态导入很像，不过懒加载一般指的是非 JS 资源，比如图片和样式等。

常见的懒加载思路举例:

1. 页面中有大量商品图片需要展示。假设代码为 <img src="product.jpg" >。
2. 可以用一个 1k 大小的占位图片代替所有商品图片。代码改为 <img src="placeholder.png" data-src="product.jpg">。
3. 在某个时刻(如页面加载的一秒钟后、用户滚动页面且快要看到下一页的产品时)使用 JS 去加载商品图片，替换掉占位图片。

淘宝、天猫这类电商网站大量采用了这种方案，提速效果明显，而且可以为公司节省很多带宽成本。

预加载(Preloading)

懒加载导致一些资源的加载被推迟，影响了用户体验。那么我们能不能把被推迟的资源提前下载下来呢？听起来很矛盾对不对，想象一下用户的操作:

1. 打开淘宝，查看首屏
2. 移动鼠标并点击，或者滚动鼠标滚轮
3. 点看商品链接，或者查看第二屏

第二步大概有一秒钟的时间，那么我们能不能在这个时候，预测用户的动作，并提前加载第三步的资源呢？答案是可以。

比如，当用户的鼠标离某个链接还有 200px 时，我们提前用 JS 去 get 链接内容，那么就可以让用户提前看到内容了。(浏览器自带一个优化：不会在同一时间对同一个资源发两个请求，而是复用同一个请求。)

代码如下:

$container.on('mousemove', e => { 
    // 其他代码略 
    if(距离链接小于200px){
        axios.get('链接') 
    }
}

比如，当用户屏幕滚动到距离图片还有 200px 时，我们提前用 JS 去 get 图片内容，那么等用户滚到第二屏时，说不定图片已经加载好了。代码如下：

$container.on('wheel', e => { 
    // 其他代码略 
    if(举例图片小于200px){
        axios.get('图片链接') 
    }
}

比如，很久之前，UC 浏览器就有看小说的功能，UC 浏览器会在用户查看当前页面时提前加载下一页内容，用户体验很好。 除了预加载这些动态内容，程序员也可以预加载一些静态资源，写法如下:

<link rel="preload" href="page-2.css" as="style">
<link rel="preload" href="page-2.js" as="script">
<link rel="preload" href="video.mp4" as="video" type="video/mp4">

最后说一句

如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。