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