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

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

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

1. html壓縮
2. css壓縮
3. js的壓縮
4. 文件合并
5. 開(kāi)啟 gzip

一、html 壓縮

圖一是新浪的首頁(yè)顯示是沒(méi)有壓縮的，圖二的谷歌的首頁(yè)是經(jīng)過(guò)壓縮的。

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

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

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

二、html 壓縮

1. 無(wú)效代碼刪除
2. css 語(yǔ)義合并

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

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

三、Js 壓縮與混亂

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

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

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

三、文件合并

文件合并與不合并對(duì)比

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

文件合并存在的問(wèn)題:

1. 首屏渲染問(wèn)題
2. 緩存失效問(wèn)題

解決文件合并存在的問(wèn)題:

1. 公共庫(kù)合并
2. 不同頁(yè)面的合并
3. 見(jiàn)機(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)，針對(duì)不同的業(yè)務(wù)場(chǎng)景選擇不同的圖片格式很重要

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

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

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

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

進(jìn)行圖片壓縮

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

CSS雪碧圖

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

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

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

缺點(diǎn)

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

Image inline

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

在安卓下使用webp

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

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

最新評(píng)論