全链路前端性能优化方案

通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现出来的过程中，通过各种优化策略和优化方法让页面加载的更快，让用户的操作响应更及时，给用户更好的使用体验。

这里我们介绍的是前端性能优化知识的解决方案，从静态资源优化开始入手，从表象深入体系化的讲解页面渲染架构，掌握搞笑的技术方案。

本文并非细节的讲述如何实现性能优化，而是从各个方面介绍性能优化的方式方法，并且不仅限于H5，因为当今的前端也不仅仅只有H5。

图片资源优化

1. 图片格式介绍

jpeg: 一种针对彩色照片而广泛使用的有损压缩图形格式。是一种栅格图形，常用文件扩展名为jpg，jpeg，jpe。在互联网上常被应用于存储和传输照片。不适合线条图形和文字，图标图形，因为他的压缩算法不支持这些类型的图形，并且不支持透明度。常用于色彩丰富的照片，彩色图大焦点图banner等结构不规则的图形。

png: 便携式网络图形，是一种无损压缩的位图图形格式，支持索引、灰度、RGB三种颜色，以及Alpha通道等特性。他最初的设计是为了代替GIF,能够支持半透明和透明特性，最高支持24位彩色图形和8位灰度图像。不过由于是无损压缩所以文件体积太大。比较适合纯色，透明，线条绘图，图标以及颜色较少的需要半透明的图片。

GIF: 位图图形文件格式，8位色重现真彩色的图像，采用LZW压缩算法进行编码。支持256色，仅支持完全透明和完全不透明，可以支持动图，不过每个像素只有8比特，不适合存储彩色图片。常用与动画和图标。

webp: 是一种现代图像格式，可以提供无损压缩和有损压缩两种。可以同时办证一定程序上的图像质量和较小的体积，可以插入多帧，实现动画效果。支持透明度。采用8位压缩算法，无损的webp比png小26%，有损的webp比jpeg小25-34%，比gif有更好的动画。不过最多可以处理256色，不适合彩色图片。常用于图形和半透明图像。

2. 图片优化

对于png图片来说，可以使用jdf-png-native进行压缩, 他是node-pngquant-native工具的封装包，这个工具跨平台，压缩比高，而且压缩png24也非常的好。

const pngquant = require('jdf-png-native');
const fs = require('fs');

fs.readFile('./in.png', (err, buffer) => {
   
    if (err) {
   
        throw err;
    }
    const resBuffer = pngquant.option({
   }).compress(buffer);
    fs.writeFile('./out.png', resBuffer), {
   
        flags: 'wb'
    }, () => {
   })
})

压缩jpg可以使用jpegtran这个工具，他也是一个node工具。使用方法比较简单，直接使用命令即可。大概压缩10%的占比。

jpegtran -copy node -optimize-outfile out.jpg in.jpg

对于gif文件来说可以使用gifsicle工具，他是通过改变每帧比例，减小gif文件大小，同时可以使用透明来达到更小的文件体积。是一个公认的解决方案。可以去http://www.lcdf.org/gifsicle/中去安装。使用方式同样也是命令行方式。

gifsicle --optimize=3 --crop-transparency -o out.gif in.gif

这里的优化级别不要小于2，1的话代表不压缩。压缩后基本不失帧。

还有一种压缩方式是图片可以根据网络环境来展示不同尺寸和像素的图片，通过在url后缀加不同参数来实现。比如下面的地址, 430可以修改为800来获得不同体积的图片。

https://img.alicdn.com/imgextra/i1/2616970884/O1CN01x6HnoK1IOuj5IosXO_!!2616970884.jpg_430x430q90.jpg

3. 响应式图片

响应式图片是我们可以在用户不同的窗口大小还有设备像素的情况下来展示不同大小的图片，可以用以下三种方式来实现, 第一种是可以使用js来绑定事件检测窗口大小，以此来设置图片的大小。第二种方式就是css的媒体查询。

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

第三种可以使用html5的srcset来设置，他会根据设备的像素比来自动选择需要的图片。而且不支持srcset的浏览器也可以正常展示src的属性。

<img 
  srcset="img-320w.jpg, img-640w.jpg 2x, img-960w.jpg 3x" 
  src="img-960w.jpg" 
  alt="img" 
/>

4. 逐步加载图片的方式

其实就是延迟加载，在真实的图片加载出来之前，可以使用一张公共的图片，一般是公司的logo，先将布局撑起来，然后再换成真实的图片。

lqip这个工具可以将真实的图片虚化，转换为很小的base64编码。这样我们可以先使用base64加载虚化的图片。