随着 SPA（Single Page Application）应用的流行，前端页面中的图片数量也越来越多。然而，当图片数量达到一定程度时，页面的性能会受到很大的影响，出现卡顿、加载缓慢等问题。本文将介绍几种优化方案，帮助解决这些问题。
1. 图片懒加载
图片懒加载是指在页面滚动到某个位置时再加载图片。这种方式可以减少页面一次性加载大量图片的压力，提高页面的性能。通常的做法是将图片的 src 属性设为占位图，在图片出现在可视区域时再将真实的图片地址赋给 src 属性。
<img src="placeholder.jpg" data-src="real-image.jpg" />
在页面滚动时，可以使用 Intersection Observer API 监听图片是否进入可视区域，如果进入可视区域则将 data-src 属性的值赋给 src 属性。
-- -------------------- ---- -------
----- ------- - -
----------- ------
---------- ---
--
----- -------- - --- ---------------------------- -- -
--------------------- -- -
-- ---------------------- -
----- --- - -------------
----- --- - -----------------------------
----------------------- -----
------------------------
-
---
-- ---------
-------------------------------------------- -- -
----------------------
---2. 图片压缩和优化
在加载图片时，如果图片的大小过大，会导致页面加载缓慢。因此，对于图片的压缩和优化是非常必要的。可以使用工具如 TinyPNG 或者 ImageOptim 对图片进行压缩和优化。
除了压缩和优化图片本身，还可以通过使用 WebP 格式的图片来提高页面性能。WebP 是一种由 Google 开发的图片格式，可以提供更好的压缩率和更快的加载速度。不过需要注意的是，WebP 格式的图片并不是所有浏览器都支持，因此需要进行兼容性处理。
3. 图片 CDN 加速
使用 CDN（Content Delivery Network）可以将图片缓存在离用户更近的服务器上，从而提高图片的加载速度。CDN 服务商如阿里云、腾讯云等都提供了图片 CDN 加速的服务。
在使用 CDN 加速时，需要注意图片的缓存问题，可以通过设置缓存时间或者添加版本号等方式解决。
4. 图片预加载
在 SPA 应用中，有些页面可能需要加载大量的图片，如果等到用户访问时再加载，会导致用户等待时间过长。因此，可以在页面加载完成后，预加载这些图片，以提高用户的体验。
可以通过创建 Image 对象来实现图片的预加载。
const img = new Image(); img.src = 'image.jpg';
5. 懒加载占位符
在图片懒加载时，为了避免布局跳动，可以在图片未加载时，使用占位符来占据图片的位置。占位符可以使用 CSS 实现，例如使用 padding-bottom 的值来设置占位符的高度。
<img src="placeholder.jpg" data-src="real-image.jpg" class="lazyload" />
.lazyload {
height: 0;
padding-bottom: 50%;
background-color: #f0f0f0;
}总结
以上是几种优化 SPA 应用中大量图片卡顿的方法，可以根据实际情况选择适合的方案。通过图片懒加载、图片压缩和优化、图片 CDN 加速、图片预加载和懒加载占位符等方式，可以有效提高页面的性能，提升用户的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651008e995b1f8cacd8aedbc