web性能优化技巧篇之懒加载和预加载(常见的web性能优化方法)
懒加载(Lazy Loading)
懒加载就是一开始不加载，但需要用到的时候再加载。这听起来跟动态导入很像，不过懒加载一般指的是非 JS 资源，比如图片和样式等。
常见的懒加载思路举例:
页面中有大量商品图片需要展示。假设代码为
<img src="product.jpg" >。可以用一个 1k 大小的占位图片代替所有商品图片。代码改为
<img src="placeholder.png" data-src="product.jpg">。在某个时刻(如页面加载的一秒钟后、用户滚动页面且快要看到下一页的产品时)使用 JS 去加载商品图片，替换掉占位图片。
淘宝、天猫这类电商网站大量采用了这种方案，提速效果明显，而且可以为公司节省很多带宽成本。
预加载(Preloading)
懒加载导致一些资源的加载被推迟，影响了用户体验。那么我们能不能把被推迟的资源提前下载下来呢？听起来很矛盾对不对，想象一下用户的操作:
打开淘宝，查看首屏
移动鼠标并点击，或者滚动鼠标滚轮
点看商品链接，或者查看第二屏
第二步大概有一秒钟的时间，那么我们能不能在这个时候，预测用户的动作，并提前加载第三步的资源呢？答案是可以。
比如，当用户的鼠标离某个链接还有 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"> 复制代码
最后说一句
如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。
伪原创工具 SEO网站优化 https://www.237it.com/
作者：牛牛_lz
链接：https://juejin.cn/post/7036011993647546376