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

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

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

 

1、资源合并的原理：

 

资源不合并的缺点：

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文件，致使整个合并的代码从新加载，缓存失效

因为有这些缺点，因此要：

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

2、资源压缩

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

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：

http://www.javashuo.com/article/p-ytbmhzse-dg.html