性能優化-資源的壓縮與合併

前端的性能優化

資源的壓縮與合併

• 優化要點：減小http數量請求和資源大小請求
• 運用壓縮與合併
• 實現方式有在線網站和壓縮工具（須要node）

web前端本質上是一種GUI軟件，本能夠直接借鑑其餘GUI系統架構設計方法，但web前端有點特別

瀏覽器的一個請求從發送到返回都經歷了什麼？

在這些請求過程當中有一些潛在的性能優化點

• dns是否能夠經過緩存減小dns查詢時間
• 網絡請求的過程可不能夠走最近的網絡環境
• 相同的靜態資源是否能夠緩存
• 可否減小請求http請求的大小
• 減小http請求
• 利用服務端渲染

其中，資源合併與壓縮（html壓縮，css壓縮，js的壓縮與混亂，文件合併，開啓gzip）就能夠減小http請求，能夠減小請求資源的大小

html壓縮

HTML的全稱是超文本標記語言，HTML網頁自己是一種文本文件，經過在文件中添加標記符，能夠告訴瀏覽器如何顯示其中的內容，包括文字大小，顏色，圖片顯示等等。這就意味着在文本文件中的一些特定意義的字符能夠在瀏覽器顯示的時候就不同了，HTML代碼壓縮就是壓縮這些在文本文件中有意義，可是在HTML中不顯示的字符，包括空格，製表符，換行符等，還有一些其餘意義的字符，如HTML註釋也能夠被壓縮。

這有一個計算
google的流量，佔到整個互聯網的40%

預計2016年全球網絡流量將會達到1.3ZB(1ZB = 10^9TB)

那麼google在2016年的流量就是1.3ZB * 40%

若是google每1MB請求減小一個字節

每一年能夠節省流量近500TB

css壓縮

• 無效代碼刪除
• css語義合併

js壓縮與混亂

• 無效字符的刪除
• 剔除註釋
• 代碼語義的縮減和優化
• 代碼保護

文件合併

• 文件與文件之間有插入的上行請求，增長了N-1個網絡延遲受
• 丟包問題影響更嚴重
• 通過代理服務器時可能會被斷開

文件合併存在的問題

• 首屏渲染問題---公共庫
• 緩存失效問題---不一樣頁面的合併