前端性能优化---2.资源的合并与压缩

分为两个方面：

1.减少http请求数量

2.减少请求资源的大小

1.html压缩

HTML的全称是超文本标记语言，HTML网页本身是一种文本文件，通过在文件中添加标记符，可以告诉浏览器如何显示其中的内容，包括文字大小，颜色，图片显示等等。这就意味着在文本文件中的一些特定意义的字符可以在浏览器显示的时候就不一样了，HTML代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩。

我们来看没有压缩的线上代码：

再来看压缩的

压缩前后耗费网络资源的对比：

可以看到只压缩html，节约的资源并不明显，但是对于大公司来说就不一样了

google的流量，占到整个互联网的40%
预计2016年全球网络流量将会达到1.3ZB(1ZB = 10^9TB)
那么google在2016年的流量就是1.3ZB * 40%
如果google每1MB请求减少一个字节
每年可以节省流量近500TB

如何进行html压缩：

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

2.css压缩

1.无效代码删除

2.css语义合并

如何进行css压缩：

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

3.js压缩

1.无效字符的删除

2.剔除注释

3.代码语义的缩减和优化

4.代码保护

如何进行js压缩和混乱：

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

4.文件合并

4.1文件不合并的劣势：

1.http请求次数多，那http的响应时间累加也就更长。也就是说网络延迟更严重

2.文件的丢失的可能性也更大

3.keep-alive请求的问题，就是经过代理服务器时可能会被断开，那么又要重新握手连接了

4.2文件合并的问题

1. 首屏渲染问题

   因为js压缩为一个，所以js会很大，导致第一次加载会很慢，例如我们的框架Vue就是在框架加载完之后才渲染的，如果vue被压缩为一个打的js了，那么就会有首屏渲染的问题

2. 缓存失效问题
   浏览器一般都会缓存js，如果原来是3个js，其中一个js中代码发生变化，只需要重新获取那一个更新的js，但是如果是合并在一起了，那么一个js中变了，这个大的js都要重新获取。

4.3 文件合并建议

1. 公共库合并

   将所有公共的方法打包在一起

2. 不同页面的合并
   对于单页应用，在页面开始的只请求当前页面的js文件，