前端经典面试题合集, 怎么进行站点内的图片性能优化?

Step 1

Q:: 可能的面试题

A:: 如何进行站点内的图片性能优化？

Step 1

Q:: 对应的答案

A:: 图片性能优化是前端性能优化的重要组成部分。主要方法包括： 1. 图片格式优化：根据实际需要选择合适的图片格式，如JPEG适合照片类图片，PNG适合需要透明度的图片，SVG适合矢量图。 2. 图片压缩：使用工具（如ImageOptim、TinyPNG等）对图片进行无损或有损压缩，以减少文件大小。 3. 响应式图片：使用srcset和sizes属性为不同屏幕尺寸加载不同分辨率的图片。 4. 懒加载：使用Intersection Observer API或库（如lazysizes）实现图片懒加载，仅在图片进入视口时加载。 5. 使用CDN：将图片托管在内容分发网络（CDN）上，以加快加载速度。 6. 图片缓存：使用Cache-Control头部设置浏览器缓存策略，减少重复加载。 7. 使用现代格式：考虑使用WebP、AVIF等现代图片格式，具有更高的压缩率。

Step 2

Q:: 可能的面试题

A:: 什么是响应式图片？如何实现？

Step 2

Q:: 对应的答案

A:: 响应式图片是指根据用户设备的屏幕大小和分辨率加载不同版本的图片。可以通过srcset和sizes属性实现响应式图片。srcset属性允许我们提供一组图片URL及其对应的宽度或密度描述符，而sizes属性则告诉浏览器在不同视口宽度下图片应该占据的空间大小。例如：

 
<img srcset="image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w" sizes="(max-width: 600px) 480px, 800px" src="image-640w.jpg" alt="example">
 

Step 3

Q:: 可能的面试题

A:: 什么是图片懒加载？如何实现？

Step 3

Q:: 对应的答案

A:: 图片懒加载是一种优化网页加载性能的方法，即仅在图片进入视口时才加载图片。可以通过Intersection Observer API实现懒加载，例如：

 
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
images.forEach(img => observer.observe(img));