一：资源的合并与压缩
（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注释也可以被压缩。
压缩方式：
- 使用在线网站进行压缩
- nodejs提供了html-minifier工具
- 后端模板引擎渲染压缩
（2）css压缩
1：无效代码删除（换行，注释），css语义合并
压缩方式：
- 使用在线网站进行压缩
- 使用html-minifier对html中的css进行压缩
- 使用clean-css对css进行压缩
（3）js压缩
无效字符的删除，剔除注释，代码语义的缩减和优化，代码保护
压缩办法：
- 使用在线网站进行压缩
- 使用html-minifier对html中的js进行压缩
- 使用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 上的转化效果都非常优秀、稳定和统一。