前端性能優化---減少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:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM