資源合并與壓縮兩個(gè)目的

1. 減少http請求數(shù)量
2. 減少請求資源的大小

google首頁案例學(xué)習(xí)

1. html壓縮
2. css壓縮
3. js的壓縮
4. 文件合并
5. 開啟 gzip

一、html 壓縮

圖一是新浪的首頁顯示是沒有壓縮的，圖二的谷歌的首頁是經(jīng)過壓縮的。

HTML代碼壓縮就是壓縮這些在文本文件中的意義，但是在HTML中不顯示的字符，包括空格，制表符，換行符等，還有一些其他意義的字符，如
HTML 注釋也可被壓縮。

如何進(jìn)行 html 壓縮

1. 使用在線網(wǎng)站進(jìn)行壓縮
2. nodejs提供了 html-minifier 工具
3. 后端模板引擎渲染壓縮

二、html 壓縮

1. 無效代碼刪除
2. css 語義合并

如何進(jìn)行 html 壓縮

1. 使用在線網(wǎng)站進(jìn)行壓縮
2. 使用 html-minifier 對 html 中的css進(jìn)行壓縮
3. 使用 clean-css 對css進(jìn)行壓縮

三、Js 壓縮與混亂

1. 無效字符的刪除
2. 剔除注釋
3. 代碼語義的縮減和優(yōu)化
4. 代碼保護(hù)

如何進(jìn)行 js 壓縮和混亂

1. 使用在線網(wǎng)站進(jìn)行壓縮
2. 使用 html-minifier 對 html 中的 js 進(jìn)行壓縮
3. 使用uglifyjs2 對 js進(jìn)行壓縮

三、文件合并

文件合并與不合并對比

1. 文件與文件之間有插入的上行請求，增加了 N-1 個(gè)網(wǎng)絡(luò)延遲
2. 受丟包問題影響更嚴(yán)重
3. 經(jīng)過代理服務(wù)器可能會被斷開

文件合并存在的問題:

1. 首屏渲染問題
2. 緩存失效問題

解決文件合并存在的問題:

1. 公共庫合并
2. 不同頁面的合并
3. 見機(jī)行事，隨機(jī)應(yīng)變

如何進(jìn)行 js 壓縮和混亂

1. 使用在線網(wǎng)站進(jìn)行壓縮
2. 使用 nodejs 實(shí)現(xiàn)合并

圖片相關(guān)的優(yōu)化
png8/png24/png32之間的區(qū)別

1. png8 —— 256色 + 支持透明
2. png24 —— 2^24色 + 不支持透明
3. png32 —— 2^24色 + 支持透明

每種圖片格式都有自己的特點(diǎn)，針對不同的業(yè)務(wù)場景選擇不同的圖片格式很重要

不同格式圖片常用的業(yè)務(wù)場景

1. jpg —— 大部分不需要透明圖片的業(yè)務(wù)場景
2. png 支持透明，瀏覽器兼容好
3. webp壓縮程度更好，在 ios webview 有兼容性疸
4. svg 矢量圖，代碼內(nèi)嵌，相對較少，圖片樣式相對簡單的場景

不同格式圖片常用的業(yè)務(wù)場景

1. jpg —— 大部分不需要透明圖片的業(yè)務(wù)場景
2. png —— 大部分需要透明圖片的業(yè)務(wù)場景
3. webp —— 安卓全部
4. svg矢量圖 —— 圖片樣式相對簡單的業(yè)務(wù)場景

進(jìn)行圖片壓縮

針對真實(shí)圖片情況，舍棄一些相對無關(guān)緊要的色彩信息

CSS雪碧圖

把你的網(wǎng)站上用到的一些圖片整合到一張單獨(dú)的圖片中

優(yōu)點(diǎn)

減少你的網(wǎng)站的HTTP請求數(shù)量

缺點(diǎn)

整合圖片比較大時(shí)，一次加載 比較慢

Image inline

將圖片的內(nèi)容內(nèi)嵌到html當(dāng)中，減少你的網(wǎng)站的HTTP請求數(shù)量

在安卓下使用webp

WebP 的優(yōu)勢體現(xiàn)在它具有更優(yōu)的圖像數(shù)據(jù)壓縮算法，能帶來更小的圖片體積，而且擁有肉眼識別無差異的圖像質(zhì)量；同時(shí)具備了無損和有損的壓縮模式、Alpha 透明以及動畫的特性，在 JPEG 和 PNG 上的轉(zhuǎn)化效果都非常優(yōu)秀、穩(wěn)定和統(tǒng)一。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。