前端性能优化---减少http请求数量和减少请求资源的大小

减少http请求数量：就是资源的合并

减少http请求大小：就是资源的压缩

 

一、资源合并的原理：

 

资源不合并的缺点：

1.文件和文件之间有插入请求----请求a.js,b.js,c.js（三行请求）合并之后只需要请求一行（请求a-b-c.js）,不合并增加了N-1个网络延迟，上图而言是增加了2个网络延迟。

2.每一个网络请求都会相应增加丢包问题的影响，所以不合并资源的时候，请求多了，所受丢包问题影响更严重。

3.keep-alive服务器可能会被断开，不能完成整个keep-alive状态的保持

 

资源合并的缺点：

 

1.首屏渲染---文件样式布局主要由js文件决定，合并之后的js文件变大，会导致首屏渲染很慢

2.缓存失效---合并之后，修改了一个js文件，导致整个合并的代码重新加载，缓存失效

由于有这些缺点，所以要：

如何合并：用在线网站、构建工具

二、资源压缩

资源压缩的优点：节省流量，加载更快，代码保护（防止被篡改）

1.html压缩

方法：

①使用在线网站进行压缩（不推荐）

②nodejs提供了html-minifier工具

③后端模板引擎渲染压缩

 

2.css压缩

方法：

①使用在线网站进行压缩（不推荐）

②nodejs提供的html-minifier对html中的css进行压缩

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

 

3.js压缩与混乱

方法：

①在线压缩

②使用html-minifier对html中的js进行压缩

③使用uglifyjs2对js进行压缩

 

 

 

实操：

在线压缩网站：http://tool.oschina.net/jscompress

fis3：

https://blog.csdn.net/imaginecode/article/details/50091457