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

先有问题再有答案

  1. 为什么要做图片优化?
  2. 图片和哪些系统资源有关系?
  3. 有哪些图片优化方案

一图胜千文

为什么要做图片优化

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

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

提高设备性能:优化图片的加载和渲染可以减少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)也可以触发硬件加速。

避免重排和重绘:

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

相关推荐
GIS程序媛—椰子8 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00114 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端17 分钟前
Content Security Policy (CSP)
前端·javascript·面试
木舟100921 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤439131 分钟前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
测试界萧萧1 小时前
外包干了4年,技术退步太明显了。。。。。
自动化测试·软件测试·功能测试·程序人生·面试·职场和发展