性能优化之全链路图片优化~

先有问题再有答案

为什么要做图片优化？
图片和哪些系统资源有关系？
有哪些图片优化方案

一图胜千文

为什么要做图片优化

提高用户体验：图片加载和渲染的速度直接影响到用户的体验。如果图片加载得太慢，用户可能会感到不耐烦，甚至可能会离开你的网站。通过优化图片的加载和渲染，可以使网页更快地呈现给用户，提高用户的满意度。

节省带宽和存储空间：通过优化图片的大小和格式，可以减少所需的带宽和存储空间。这不仅可以节省成本，还可以减少对网络和服务器的压力。

提高设备性能：优化图片的加载和渲染可以减少CPU和GPU的负载，从而提高设备的性能。可以使网站在低带宽或低性能的设备上运行得更好，从而提高网站的可访问性。

图片&系统资源

图片的加载、解析和渲染涉及到的计算机资源如下：

加载：

网络资源：图片的加载涉及到网络资源，因为必须从服务器下载图像数据。如果图片较大或网络连接较慢，这个过程可能会占用大量的时间。

内存：下载的图像数据需要存储在内存中，直到它们被解析。因此，加载大量或大尺寸的图像可能会占用大量的内存资源。

解析：

CPU：图片的解析主要涉及到CPU资源。解析过程包括读取图像数据、解码图像文件（例如JPEG或PNG）以及将图像数据转换为可以在屏幕上渲染的像素。这都是计算密集型的任务，通常由CPU完成。

渲染：

GPU：将解析后的像素数据绘制到屏幕上的任务由GPU完成，因为GPU专门设计用于处理这种图形渲染任务。使用如CSS的硬件加速特性可以将更多的渲染工作交给GPU。

内存：渲染过程也需要内存，特别是如果使用了双缓冲或其他渲染优化策略。

总结

优化图片资源实际上是一种系统优化的过程，涉及到多种计算机资源。通过有效的优化策略，可以提高网页的加载速度，提高用户体验，同时也可以节省服务器和用户设备的资源。

图片优化方案

整体思路：

浏览器缓存

服务器端设置HTTP头部的Cache-Control字段来控制浏览器如何缓存你的图片，例如：Cache-Control: max-age=31536000。强缓存一年，同时图片地址使用hash命名。

base64

使用base64将一些图标直接打包到bundle里面这样就不需要再次请求了。

雪碧图

通过将多个小图片合并到一个大的图片文件中，然后通过CSS的background-position属性来显示需要的部分。减少HTTP请求，一次请求返回多张小图片，优化请求效率。

域名发散

大多数浏览器对于单一域名下的并发请求有一定的限制，通常是6-8个。这意味着，如果你的网页上有很多需要加载的资源（如图片），那么这些资源可能需要排队等待加载，从而影响网页的加载速度。

域名发散（Domain Sharding）是一种提高网页加载速度的技术，它通过将资源分散到多个不同的域名下，来突破浏览器对于单一域名下并发请求的限制。

http2

HTTP/2协议已经支持多路复用，可以在一个连接上并行请求多个资源, 所以我们可以通过升级http2协议优化资源的加载性能。

压缩

使用适当的图片格式具体格式差异可以看这篇文章。图片: bmp,jpeg,png,apng,gif,webp,svg,avif,Base64,MNG,FLIF。使用工具压缩图片，减少图片的文件大小，从而加快加载速度。

减少图片的复杂性：

图像的解析通常是由CPU完成的，这个过程涉及到读取图像文件，解码图像数据，生成位图等步骤。

复杂的图片需要更多的时间来解析和渲染。尽可能使用简单的图片和图形。或者将一张复杂的图片拆分成几层，然后通过 CSS 重叠在一起，可能也会有一些优化效果

这里关于"复杂"的图片做一些解释：通常指的是那些包含大量颜色、细节、纹理或模式的图片。例如，一张包含许多不同颜色和细节的全景照片可能会被认为是"复杂"的，而一张只包含几种颜色和简单形状的图标可能会被认为是"简单"的。

复杂的图片通常会有更大的文件大小，因为它们需要更多的数据来表示所有的颜色和细节。此外，复杂的图片在解码和渲染时也可能需要更多的计算资源。

判断一张图片是否"复杂"并没有一个明确的标准，这往往取决于具体的情况和需求。但是，你可以通过查看图片的文件大小来得到一些线索。一般来说，文件大小更大的图片往往更"复杂"。

此外，还有一些工具和技术可以帮助你分析图片的复杂性。例如，你可以使用图像编辑软件（如 Photoshop）来查看图片的颜色直方图，这可以给你一个关于图片颜色复杂性的大概想法。还有一些在线工具和服务可以分析图片的复杂性，并给出优化建议。

使用 CSS3 代替图片：

一些复杂的背景图片，渐变色，圆角等可以用 CSS3 来实现，减少图片的使用。减少图片编解码对cpu的长时间占用。

图片按需渲染

通常被称为懒加载（Lazy Loading），是一种提高网页用户体验的技术，尤其是在处理大量图片或长页面滚动的场景中。

通过需要监听滚动事件和利用Intersection Observer 判断是否进入视口内。

ini 复制代码

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

空闲时预加载

利用性能优化：requestIdleCallback详解+手动实现在浏览器空闲时间去加载剩余图片可以做到图片快速显示。

gpu硬件加速

在CSS中，有几个属性可以触发硬件加速

transform: 使用3D变换（如 translate3d、rotate3d、scale3d）,

will-change: 这个属性允许你告诉浏览器你打算改变一个元素的哪些属性，这样浏览器可以提前做一些优化。

filter: CSS滤镜（如 blur、brightness）也可以触发硬件加速。

避免重排和重绘：

在图片加载过程中，避免改变图片的尺寸，这会导致页面的重排和重绘，影响性能。