前端性能优化---减少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:

猜你喜欢

转载自www.cnblogs.com/echo-hui/p/9298873.html