资源压缩优化

http请求的过程是前端性能优化的核心

资源的合并 => 减少http请求数量

资源的压缩 => 减少请求资源的大小。

1.html压缩

HTML代码压缩就是压缩一些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩；

如何进行html压缩

• 使用在线网站进行压缩；

• nodejs提供的html-minifier工具；

• 后端模板引擎渲染压缩

真实的开发中一般是通过构建工具进行压缩的，比如 webpack。

2.css代码压缩

分为两部分：

• 无效代码的压缩；

• css语义合并；

如何进行css压缩

• 使用在线网站进行压缩；

• 使用html-minifier对html中的css进行压缩；

• 使用clean-css对css进行压缩

3.js压缩与混乱

包括：

• 无效字符的删除（空格，回车等）；

• 剔除注释；

• 代码语义的缩减和优化。比如一些变量的长度的缩短，对无效代码的优化

• 代码保护。js压缩使代码混乱，不可读

二、图片相关的优化

不同格式图片常用的业务场景

• jpg有损压缩，压缩率高，支持透明；应用：大部分不需要透明图片的业务场景；

• png支持透明，浏览器兼容好；应用：大部分需要透明图片的业务场景；

• webp（2010年由谷歌推出）压缩程度更好，在ios webview中有兼容性问题；应用：安卓全部；

• svg矢量图，代码内嵌，相对较小，用于图片样式相对简单的场景；应用：比如logo和iconfont；

1.图片压缩

针对真实图片情况，舍弃一些相对无关紧要的色彩信息，对图片进行压缩；比如在线压缩网站：https://tinypng.com/

2.css雪碧图

将网站上用到的一些图片整合到一张单独的图片中，从而减少网站HTTP请求数量。原理为：设定整张雪碧图可示区域，将想要显示的图标定位到该处（左上角）；缺点：整合图片比较大时，一次加载比较慢

很多情况下，并不是所有的小图标都放在一张雪碧图中，而是会适当进行拆分。现在使用雪碧图的场景比较少了。

自动生成雪碧图样式的网站：http://www.spritecow.com/

3.网页内联图片（Image inline）

将图片的内容内嵌到html当中，减少网站的HTTP请求数量，常用于处理小图标和背景图片。

这里提供一个将：image 转 DataUrI的网址：http://tool.c7sky.com/datauri/

缺点：

• 浏览器不会缓存内联图片资源；

• 兼容性较差，只支持ie8以上浏览器；

• 超过1000kb的图片，base64编码会使图片大小增大，导致网页整体下载速度减慢；

所以要根据场景使用，不过内联图片减少HTTP请求的优点还是很显著的。比如，在开发中小于4KB或8KB的图片都会通过构建工具自动inline到HTML中，这种情况下Image inline带来的图片大小增长其实是比增加HTTP请求次数更优的。

4.矢量图SVG与iconfont

使用iconfont解决icon问题

应尽量使用该方式，比如可以采用阿里巴巴矢量图库

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML 格式定义图像。

在线转换网站：http://www.bejson.com/convert/image_to_svg/

5.webp

webp的优势体现在它具有更优的图像压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha透明以及动画的特性。在JPEG和PNG上的转化效果都非常优秀、稳定和统一。安卓上不存在兼容性问题，推荐安卓下使用。

可以通过在线网站将图片转换为webp：https://zhitu.isux.us/