這篇文章將為大家詳細(xì)講解有關(guān)Web前端性能優(yōu)化之資源合并與壓縮的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)自2013年創(chuàng)立以來(lái)，先為銅梁等服務(wù)建站，銅梁等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為銅梁企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

資源合并與壓縮兩個(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)一。

關(guān)于“Web前端性能優(yōu)化之資源合并與壓縮的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

當(dāng)前題目：Web前端性能優(yōu)化之資源合并與壓縮的示例分析-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://m.newbst.com/article14/hjgde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、ChatGPT、標(biāo)簽優(yōu)化、手機(jī)網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)