Karam
Articles71
Tags52
Categories15
过度使用懒加载带来的影响

过度使用懒加载带来的影响

什么是懒加载

很多时候页面需要大量图片显示,大量的图片显示会导致浏览器发起很多http请求图片资源,但是图片资源返回的时间不一致,大量请求导致页面加载缓慢,所以使用懒加载,当图片进入视区范围内才加载,只有当用户滚动到该内容显示的地方才会加载。

懒加载带来的性能影响

懒加载的好处:

  • 减少页面加载的时间:通过延迟资源加载减少首屏时间
  • 优化资源消耗:通过资源懒加载优化系统资源使用
    但是过度使用懒加载也会对性能带来一些影响:

减慢快速滚动的速度
当用户快速滚动页面的时候,触发多个图片加载,导致滚动页面的速度变慢。
因为内容变化导致的延迟
如果没有提前为懒加载的图片设置宽高,那么当图片加载完显示的时候,可能会改变原本的元素位置,导致重排的耗时动作,给用户带来不好的体验
内容缓冲
快速滚动的时候,不在页面之中的图片可能也在加载,在带宽比较慢的时候,影响网页渲染速度

何时使用懒加载

  • 加载不会影响页面使用的资源
  • 不影响SEO效果