前言

懒加载又叫按需加载、延迟加载。主要指页面中图片、视频等大型资源文件的懒加载。

对页面中的图像做懒加载处理时，用户滚动到图像之前，可视区域外的图像是不会加载的。这与图像预加载正好相反。

懒加载的优点：

• 提升用户体验，加快首屏渲染速度；
• 减少无效资源的加载；
• 防止并发加载的资源过多会阻塞 js 的加载；

懒加载的原理（以图片的懒加载为例说明一下）：
首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在 data-original 属性中，当页面滚动的时候需要去监听 scroll 事件，在 scroll 事件的回调中，判断我们的懒加载的图片是否进入可视区域，如果图片在可视区内则将图片的 src 属性设置为 data-original 的值，这样就可以实现延迟加载。

一、JavaScript 懒加载

前端优化——懒加载篇

二、vue 懒加载

Vue实现懒加载的基本思路
Vue路由懒加载原理及实现
vue路由懒加载：import() 和 require()

三、react 懒加载

四、webpack 懒加载

五、应用场景

1、“懒加载+分页” 来做长列表优化

具体思路：用户每次只加载能看见的数据, 当滚动到底部时再去加载下一页的数据。

前端维护懒加载的数据分发和分页。

2、虚拟滚动技术来做长列表优化

核心思路：每次只渲染可视区域的列表数,当滚动后动态的追加元素并通过顶部 padding 来撑起整个滚动内容。