前端性能优化：图片优化：课程5：懒加载技术实现与优化.docxVIP

PAGE1

PAGE1

前端性能优化：图片优化：课程5：懒加载技术实现与优化

1懒加载技术原理

1.1懒加载的基本概念

懒加载（LazyLoading）是一种按需加载的技术，主要用于优化页面性能，特别是在页面包含大量图片或资源时。其核心思想是在页面滚动到图片所在位置时，才开始加载图片，而不是在页面加载时一次性加载所有图片。这样可以显著减少页面的初始加载时间，提升用户体验。

1.1.1代码示例：使用JavaScript实现懒加载

//选择所有带有data-src属性的图片

constimages=document.querySelectorAll(img[data-src]);

//检查图片是否在可视区域内

constcheckImage=(image)={

constrect=image.getBoundingClientRect();

return(rect.top=0rect.top=(window.innerHeight||document.documentElement.clientHeight));

};

//加载图片

constloadImage=(image)={

image.src=image.dataset.src;

image.addEventListener(load,()={

image.classList.add(loaded);

});

};

//懒加载函数

constlazyLoad=()={

images.forEach((image)={

if(checkImage(image)!image.classList.contains(loaded)){

loadImage(image);

}

});

};

//初始化和监听滚动事件

lazyLoad();

window.addEventListener(scroll,lazyLoad);

1.1.2解释

选择图片：使用querySelectorAll选择所有带有data-src属性的图片，这个属性将存储图片的真实URL。

检查图片位置：checkImage函数通过getBoundingClientRect方法获取图片的位置信息，判断图片是否在可视区域内。

加载图片：loadImage函数将data-src属性的值赋给src属性，从而加载图片，并在图片加载完成后添加loaded类。

懒加载执行：lazyLoad函数遍历所有图片，对每个图片执行checkImage和loadImage函数。

初始化和监听：页面加载时调用lazyLoad函数，同时监听滚动事件，确保在滚动时也能加载图片。

1.2懒加载如何提升页面性能

懒加载通过延迟非可视区域资源的加载，可以显著提升页面性能，具体表现在：

减少初始加载时间：页面加载时只加载可视区域的资源，减少了HTTP请求和带宽使用，加快了页面的首次渲染速度。

节省带宽：用户可能不会滚动到页面的每个部分，因此未被查看的图片不会被加载，节省了带宽资源。

提升用户体验：页面加载更快，用户可以更快地开始浏览和使用页面，即使页面包含大量资源。

1.3懒加载的触发机制

懒加载的触发机制通常基于页面滚动事件，当图片进入可视区域时，触发加载。可视区域的定义可以是浏览器窗口的大小，也可以是窗口大小加上一定的偏移量，以提前加载即将进入可视区域的图片，避免加载延迟。

1.3.1代码示例：使用IntersectionObserverAPI实现懒加载

//选择所有需要懒加载的图片

constimages=document.querySelectorAll(img[data-src]);

//创建IntersectionObserver实例

constobserver=newIntersectionObserver((entries)={

entries.forEach((entry)={

if(entry.isIntersecting){

constimage=entry.target;

image.src=image.dataset.src;

image.classList.add(loaded);

observer.unobserve(image);//图片加载后，停止观察

}

});

},{

rootMargin:0px,

threshold:0.0

});

//初始化观察器

images.forEach(