前端页面优化之懒加载 -- 搬运自前端大全公众号

什么是懒加载

– 懒加载是一种常见的技术，通过按需加载资源来减少网页的数据使用
例：

// with img tag

<img 
  src="bits.jpeg" 
  loading="lazy" 
  alt="an image of a laptop" 
/>



// with IFrame

<iframe 
  src="about-page.html" 
  loading="lazy">
</iframe>

一旦启用懒加载，只有当用户滚动到需要改内容显示的地方才会去加载。

懒加载对性能的影响

优势：

1、减少页面加载时间（PLT）：通过延迟资源加载减少首屏页面加载时间。
2、优化资源消耗：通过资源懒加载优化系统资源使用，这在内存以及处理能力较低的移动设备上效果比较好。

劣势：

1、减慢快速滚动的速度
如果你有一个web应用，比如在线商店，你需要让用户可以快速上下滚动以及导航。对这样的应用使用懒加载会减慢滚动速度，因为我们需要等待数据加载完成。这会降低应用性能以及引发用户体验问题。

2、因为内容变化导致的延迟
如果你还没有为懒加载的图片定义的width和height属性，那么在图片渲染过程中会出现明显的延迟。因为资源在页面初始化时没有加载，浏览器不知道适用于页面布局的内容尺寸。一旦内容加载完成，而用户滚动到特定视图中，浏览器需要处理内容以及再一次改变页面布局。这会使其他元素移位，也会带来糟糕的用户体验。

3、内容缓冲
如果你在应用中使用非必要的懒加载，这会导致内容缓冲。当用户快速向下滚动而资源却还在下载中时会发生这种情况。尤其是宽带连接较慢时会发生这种情况，这会影响网页渲染速度。

如何正确使用懒加载

1、在正确的地方懒加载正确的资源
针对用户视图外或者被折叠的内容使用。确保没有懒加载后台任务执行所需的资源，比如Javascript组件，北京图片或者其他多媒体内容。而且，一定不能延迟这些资源的加载。可以使用谷歌浏览器的Lighthouse工具来检查，识别那些可以添加懒加载属性的资源。

2、懒加载那些不妨碍网页使用的内容
用于不重要的非必要的Web资源。
注意错误处理和提供良好的用户体验。

3、懒加载对搜索引擎优化（SEO）而言不重要的资源
建议不要将懒加载用在针对SEO的内容上，比如关键词或者业务信息。