一：資源的合併與壓縮
（1）減少http請求數量和減少請求資源大小兩個優化要點
（2）掌握壓縮與合併的原理
1：瀏覽器的乙個請求從傳送到返回都經歷了什麼？
//前端是b/s架構的，理解請求對效能優化有重要的意義
2：請求過程中一些潛在的效能優化點
（1）dns是否可以通過快取減少dns查詢時間？
（2）網路請求的過程走最近的網路環境？
（3）相同的靜態資源是否可以快取？
（4）能否減少請求http請求大小？
（5）減少http請求
（6）服務端渲染
深入理解http請求的過程是前端效能優化的核心
3：資源的合併和壓縮重要是：減少http請求數量，減少請求資源的大小
1：壓縮
（1）html壓縮
html**壓縮就是壓縮這些在文字檔案中有意義，但是在html中不顯示的字元，包括空格，製表符，換行符等，還有一些其他意義的字元，如html注釋也可以被壓縮。
壓縮方式：
nodejs提供了html-minifier工具
後端模板引擎渲染壓縮
（2）css壓縮
1：無效**刪除（換行，注釋），css語義合併
壓縮方式：
使用html-minifier對html中的css進行壓縮
使用clean-css對css進行壓縮
（3）js壓縮
無效字元的刪除，剔除注釋，**語義的縮減和優化，**保護
壓縮辦法：
使用html-minifier對html中的js進行壓縮
使用uglifyjs2對js進行壓縮
2：合併（檔案合併）
檔案合併存在的問題：（1）首屏渲染問題 （2）快取失效問題（更改js**就會造成快取失效）
公共庫合併（公共庫，業務**分別打包），不同頁面的合併（單頁應用，不同頁面的js單獨打包）
二：壓縮
不同格式常用的業務場景:
(1)jpg有失真壓縮，壓縮率高，不支援透明,色彩豐富
(2)png支援透明，瀏覽器相容好
(3)webp壓縮程度更好，在ios webview有相容性問題
(4)svg向量圖，**內嵌，相對較小，樣式相對簡單的場景.
png8/png24/png32之間的區別
png8 —— 256色 + 支援透明
png24 —— 2^24色 + 不支援透明
png32 —— 2^24色 + 支援透明
jpg —— 大部分不需要透明的業務場景
png —— 大部分需要透明的業務場景
webp —— 安卓全部
svg向量圖 —— 樣式相對簡單的業務場景
壓縮: 針對真實情況，捨棄一些相對無關緊要的色彩資訊.
使用向量圖: 使用svg進行向量圖的繪製 使用iconfont解決icon問題.
在安卓下使用webp: webp 的優勢體現在它具有更優的影象資料壓縮演算法，能帶來更小的體積，而且擁有肉眼識別無差異的影象質量；同時具備了無損和有損的壓縮模式、alpha 透明以及動畫的特性，在 jpeg 和 png 上的轉化效果都非常優秀、穩定和統一。
前端效能優化 資源合併與壓縮
前端效能優化學習筆記一 前端 中，結構清晰，有一些空格換行符在開發時很有必要。但是瀏覽器是不需要結構清晰，而除去不必要的空格和注釋可以減小 量，減小資源請求。每個瀏覽器請求的過程都是非常耗時的，請求乙個100kb的檔案要遠比請求兩個50kb的檔案來的快。同時，瀏覽器每次的請求數是有限的，chrome...
requireJS對檔案合併與壓縮（二）
requirejs對檔案合併與壓縮 requirejs對互相依賴模組進行合併與壓縮，可以對js，css壓縮，甚至可以對整個專案進行打包。r.js是基於nodejs的，所以本機電腦上需要有node環境。下面還是來看看我整個專案結構吧，如下 如下 a.js return b.js define func...
檔案的合併與分割
檔案的合併與分割其實比較簡單，分割時將乙個大檔案按二進位制方式讀取，然後按二進位制寫成乙個個小檔案。合併時就把小檔案順次讀取，再寫入乙個大檔案。下面是乙個簡單的例子 檔案分割，二進位制讀取 void cmyupdatedlg onbinary byte buf 140000 緩衝區 dword dw...