前端性能优化的目的:
- 从用户角度而言: 优化能够让页面加载得更快、对用户的操作响应的更及时,能够给用户提供更为良好的体验。
- 从服务商角度而言: 优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
我们先了解图片大小的计算:
对于一张 100 * 100 像素的图片来说,图像上有 10000 个像素点,如果每个像素的值是 RGBA 存储的话,那么也就是说每个像素有 4 个通道,每个通道 1 个字节(8 位 = 1个字节),所以该图片大小大概为 39KB(10000 * 1 * 4 / 1024)。
但是在实际项目中,一张图片可能并不需要使用那么多颜色去显示,我们可以通过减少每个像素的调色板来相应缩小图片的大小。
了解了如何计算图片大小的知识,那么对于如何优化图片,想必大家已经有 2 个思路了:
- 减少像素点
- 减少每个像素点能够显示的颜色
针对图片优化,与其说是优化不如说是在‘权衡’。我们平常图片优化都是压缩图片或是选择体积较小的图片格式,这个压缩过程是以牺牲图片质量为代价的,就会导致页面显示时图片失真。因此我们应该尽量寻找一个在质量和性能之间的平衡点。
优化图片大小
图片压缩工具
优化图片加载
-
不用图片。很多时候会使用到很多修饰类图片,其实这类修饰图片完全可以用 CSS 去代替。
-
对于移动端来说,屏幕宽度就那么点,完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载,可以计算出适配屏幕的宽度,然后去请求相应裁剪好的图片。
-
小图使用 base64 格式
-
将多个图标文件整合到一张图片中(雪碧图)
-
选择正确的图片格式:
-
对于能够显示 WebP格式的浏览器尽量使用 WebP 格式。因为 WebP
格式具有更好的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量,缺点就是兼容性并不好 -
小图使用PNG,其实对于大部分图标这类图片,完全可以使用 SVG代替
-
照片使用 JPEG
CSS Sprites(雪碧图/精灵图)
- 在线工具:CSS Sprites
- 超好用,不用麻烦UI去设计了,还可选择图片排列顺序,重点是可以直接生成代码,不用再去手动测量了,很方便。
字体图标 (iconfont)
- 为 Bootstrap而创造的图标字体:font-awesome
- 阿里巴巴矢量图标库:iconfont
图片懒加载(lazyload.js)
有个页面会很大很长很多的图片素材,这样全部加载就会变的很慢,因此需要修改一下加载方案,只加载窗口内的图片,我们大家浏览网站的时候会经常看到会有默认图,图片加载成功之后会替换默认图比如常用的lazyload.js用于图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的。
- 能有效的提高页面加载速度
- 有时候可以帮助减少服务器负载