一、基礎知識
0x1 浏覽器請求過程
請求過程中一些潛在的性能優化點
- dns是否可以通過緩存減少dns查詢時間？
- 網絡請求的過程走最近的網絡環境？
- 相同的靜态資源是否可以緩存？
- 能否減少請求http請求大小？
- 減少http請求
- 服務端渲染
0x2 資源的合并與壓縮
- 減少http請求數量
- 減少請求資源的大小
二、資源壓縮
0x1 HTML壓縮
HTML代碼壓縮就是壓縮這些在文本檔案中有意義，但是在HTML中不顯示的字元，包括空格，制表符，換行符等，還有一些其他意義的字元，如HTML注釋也可以被壓縮。
進行html壓縮前後效果對比
壓縮方式
- 使用線上網站進行壓縮
- nodejs提供了html-minifier工具
- 後端模闆引擎渲染壓縮
0x2 CSS壓縮
無效代碼删除
css語義合并
壓縮方式
- 使用線上網站進行壓縮
- 使用html-minifier對html中的css進行壓縮
- 使用clean-css對css進行壓縮
0x3 Js壓縮與混亂
無效字元的删除
剔除注釋
代碼語義的縮減和優化
代碼保護
壓縮方式
- 使用線上網站進行壓縮
- 使用html-minifier對html中的js進行壓縮
- 使用uglifyjs2對js進行壓縮
三、資源合并
合并前的問題：
- 檔案與檔案之間有插入的上行請求，增加了N-1個網絡延遲受
- 丢包問題影響更嚴重
- 經過代理伺服器時可能會被斷開
合并後帶來的問題：
- 首屏渲染問題
- 緩存失效問題
解決方案：
- 公共庫合并
- 不同頁面的合并
- 見機行事，随機應變
合并方式：
- 使用線上網站進行檔案合并
- 使用nodejs實作檔案合并
可以利用fis3對資源進行壓縮。