一：资源的合并与压缩

一：资源的合并与压缩

（1）减少http请求数量和减少请求资源大小两个优化要点

（2）掌握压缩与合并的原理

（3）在线网站和gulp两种实现压缩与合并的方法

1：浏览器的一个请求从发送到返回都经历了什么？

//前端是B/S架构的，理解请求对性能优化有重要的意义

2：请求过程中一些潜在的性能优化点

（1）dns是否可以通过缓存减少dns查询时间？

（2）网络请求的过程走最近的网络环境？

（3）相同的静态资源是否可以缓存？

（4）能否减少请求http请求大小？

（5）减少http请求

（6）服务端渲染

深入理解http请求的过程是前端性能优化的核心

 

3：资源的合并和压缩重要是：减少http请求数量，减少请求资源的大小

1：压缩

（1）html压缩

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

压缩方式：

1. 使用在线网站进行压缩
2. nodejs提供了html-minifier工具
3. 后端模板引擎渲染压缩

（2）css压缩

  1：无效代码删除（换行，注释），css语义合并

 压缩方式：

1. 使用在线网站进行压缩
2. 使用html-minifier对html中的css进行压缩
3. 使用clean-css对css进行压缩

 

（3）js压缩

无效字符的删除，剔除注释，代码语义的缩减和优化，代码保护

压缩办法：

1. 使用在线网站进行压缩
2. 使用html-minifier对html中的js进行压缩
3. 使用uglifyjs2对js进行压缩

 

2：合并（文件合并）

文件合并存在的问题：（1）首屏渲染问题 （2）缓存失效问题（更改js代码就会造成缓存失效）

公共库合并（公共库，业务代码分别打包），不同页面的合并（单页应用，不同页面的js单独打包）

 

二：图片压缩

 

原因：尽量以最小的代价显示图片，每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式很重要。

 

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

 (1)jpg有损压缩，压缩率高，不支持透明,色彩丰富

(2)png支持透明，浏览器兼容好

(3)webp压缩程度更好，在ios webview有兼容性问题

(4)svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景.

 

png8/png24/png32之间的区别

png8 —— 256色 + 支持透明

png24 —— 2^24色 + 不支持透明

png32 —— 2^24色 + 支持透明

 

jpg —— 大部分不需要透明图片的业务场景

png —— 大部分需要透明图片的业务场景

webp —— 安卓全部

svg矢量图 —— 图片样式相对简单的业务场景

 

图片压缩: 针对真实图片情况，舍弃一些相对无关紧要的色彩信息.

CSS雪碧图: 把你的网站上用到的一些图片整合到一张单独的图片中, 减少你的网站的HTTP请求数量.

Image inline: 将图片的内容内嵌到html当中, 减少你的网站的HTTP请求数量.

使用矢量图: 使用SVG进行矢量图的绘制 使用iconfont解决icon问题.

 

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