什么是前端性能优化？

什么是前端2-5-8原则?

在我们了解性能优化之前，先来看看什么是2-5-8原则。

所谓的“2-5-8原则” ，简单说，就是当用户能够在2秒以内得到响应时，会感觉系统的响应很快；当用户在2-5秒之间得到响应时，会感觉系统的响应速度还可以；当用户在5-8秒以内得到响应时，会感觉系统的响应速度很慢，但是还可以接受；而当用户在超过8秒后仍然无法得到响应时，会感觉系统糟透了，或者认为系统已经失去响应，而选择离开这个Web站点，或者发起第二次请求。

如何性能优化？

优化的方式自然有很多种，今天呢，介绍一下图片的优化方法。

图片的文件形式以及应用场景

JPEG （Joint Photographic Experts Group）

JPEG 是一种大家最常见的图片文件形式了。

它是一种"联合图像专家小组是一种针对彩色照片而广泛使用的有损压缩图形" .

介绍：栅格图形。常用文件扩展名为 .jpg，也有 .jpeg、.jpe。JPEG 在互联网上常被应用于存储和传输照片。

我们一般在网络状态不好的时候，会看到图形从上到下一条一条线的慢慢往下加载，一般这种图片就是JPEG 的格式的。

适用场景：色彩十分鲜艳的图片、彩色图、大焦点图、banner以及结构复杂的图形。

不适用场景：线条图形和文字、图形图标，因为它的压缩算法不是很支持此类图片；并且不支持透明度。

PNG（Portable Network Graphics）便携式网络图形

它是一种无损压缩的位图图形格式，支持索引、灰度、RGB 三种种颜色方案以及 Alpha 通道等特性。介绍：栅格图形。PNG 最初是作为替代 GIF 来设计的，能够显示 256 色，文件比 JPEG或者 GIF 大，但是 PNG 非常好的保留了图像质量。支持 Alpha 通道的半透明和透明特性。最高支持 24 位彩色图像（PNG-24）和 8 位灰度图像（PNG-8）。

适用场景：纯色、透明、线条绘图，图标；边缘清晰、有大块相同颜色区域；颜色数较少但需要半透明。

不适用场景：有网络不好的状态加载较慢（因为是无损存储格式）

GIF （Graphics Interchange Format）

图像互换格式是一种位图图形文件格式，以 8 位色（即 256 种颜色）重现真彩色的图像，采用 LZW 压缩算法进行编码

介绍：栅格图形。支持 256 色；仅支持完全透明和完全不透明；如果需要比较通用的动画，GIF 是唯一选择。

适用场景：动画，图标。

不适用场景：每个像素只有 8 比特，不适合存储彩色图片。

Webp

Webp 是一种现代图像格式，可为图像提供无损压缩和有损压缩，这使得它非常灵活。由 Google 在购买 On2 Technologies 后发展出来，以 BSD 授权条款发布。

介绍：优秀算法能同时保证一定程序上的图像质量和比较小的体积；可以插入多帧，实现动画效果；可以设置透明度；采用 8 位压缩算法。无损的 Webp 比 PNG 小 26%，有损的 Webp 比 JPEG 小 25-34％，比 GIF 有更好的动画。

适用场景：半透明图像、图形图案等

不适用场景：彩色的图片（因为最多处理256色）

好了，上面我们已经了解了各种图片的格式，下面就让我们来看一看优化的方案吧。

优化方案

1.使用工具进行图片压缩

压缩 PNG图片

工具：node-pngquant-native

优点：跨平台，压缩比特别高，压缩png24非常好。

官方文档：https://www.npmjs.com/package/node-pngquant-native

使用node安装： npm install node-pngquant-native

压缩JPEG图片

工具：jpegtran

优点：同样也是跨平台，但是压缩的比率只有80-90%

官网：http://jpegclub.org/jpegtran/

安装方法：npm install –g jpegtran 使用方法： jpegtran -copy none -optimize -outfile out.jpg in.jpg

压缩 GIF图

工具：Gifsicle 通过改变每帧比例，减小 gif文件大小，同时可以使用透明来达到更小的文件大小，目前公认的解决方案。

安装：http://www.lcdf.org/gifsicle/

使用方式：优化级别设置为不小于 2，1 的话基本不压缩 gifsicle --optimize=3 -o out.gif in.gif

将透明部分截去 : gifsicle --optimize=3 --crop-transparency -o out.gif in.gif

2.逐步加载图片

这里简单介绍一下一些工具的使用方法

使用LQIP（Low Quality Image Placeholders）工具

安装：npm install lqip

源码: https://github.com/zouhir/lqip-loader

在 index.js中写入以下内容：

const lqip = require('lqip');

//将文件路径
const file = './in.png';

//将输入的图片转为base64
lqip.base64(file).then(res => {
    console.log(res); 
});

//color
lqip.palette(file).then(res => {
    console.log(res);
    //这里输出的是base64的图片地址
});

使用node index.js运行一下这个文件，可以输出图片的base64格式。

使用 SQIP（SVG Quality Image Placeholders）

介绍：基于 SVG 的图像占位符（SVG Quality Image Placeholders）

安装： npm install sqip

源码：https://github.com/axe312ger/sqip

使用方法：

在 index.js中写入以下代码


const sqip = require('sqip');

const result =  sqip({
    filename: './in.png',
    numberOfPrimitives: 10 //可根据不同应用场景设置大小
});

console.log(result.final_svg);

在本地执行 node index.js 后，将会输出一串的svg标签，将其直接放入HTML文件中即可。非常的方便

3.响应式图片

使用办法

JavaScript绑定事件检测窗口大小
CSS 媒体查询


@media screen and (max-width:640px) {
  my_image{ 
    width:640px; 
   }
 }

img标签的srcset属性

<img srcset="img-320w.jpg, img-640w.jpg 2x, img-960w.jpg 3x" src=“img-960w.jpg” 
alt=“img”> （x 描述符：表示图像的设备像素

思考：我们真的需要图片吗？

web font 图标代替图片
精灵(雪碧)图
使用DATA URL 代替图片
SVG格式图标

看了以上这些，你是否还会接着使用笨重繁琐的图片呢？

总结：以上就是关于前端静态资源中的图片资源的优化方案，希望大家看完以后能够有所收获，大家也可以动手去尝试。

参考：极客时间《前端全链路性能优化》