本文是Web前端性能優(yōu)化系列文章中的第四篇，主要講述內(nèi)容：壓縮組件。完整教程可查看：Web前端性能優(yōu)化

基礎(chǔ)知識

gzip編碼：gzip是GUNzip的縮寫，是使用無損壓縮算法的一種，最早是用于Unix系統(tǒng)的文件壓縮，憑借著良好的壓縮效率，現(xiàn)在已經(jīng)成為Web上使用最為普遍的數(shù)據(jù)壓縮格式。

壓縮是如何工作的

客戶端請求報文中包含Accept-Encoding表示客戶端能識別的壓縮方法，如果客戶端請求報文沒有包含Accept-Encoding首部，服務(wù)器就會假設(shè)客戶端能夠接受任何編碼格式；服務(wù)器響應(yīng)報文中包含Content-Encoding表示采用的壓縮方法。（然而，一個統(tǒng)計表明，大約有15%的客戶端請求是沒有Accept-Encoding請求的，因為客戶端的一些web代理和PC安全軟件會移除瀏覽器發(fā)出的Accept-Encoding，因為監(jiān)聽未經(jīng)壓縮的響應(yīng)會占用更少的CPU資源，但卻無疑增加了網(wǎng)絡(luò)傳輸?shù)臅r間。）

應(yīng)該對什么資源使用壓縮

基于文本的資源如html，js，css，xml都適用于壓縮。然而對于圖片而言，卻不應(yīng)該對圖片進行壓縮，因為圖片本身是已經(jīng)被壓縮過了，如果再進行g(shù)zip壓縮，有可能得到的結(jié)果是和圖片本身大小相差不大或更大，這樣就浪費了服務(wù)器的CPU資源來做無用功了。

壓縮的優(yōu)缺點

優(yōu)點：壓縮組件可以減少Http響應(yīng)時間，提升傳輸效率。

缺點：服務(wù)器要通過花費額外的CPU周期來完成壓縮，客戶端要對壓縮文件進行解壓縮。

總體來說，使用壓縮還是利大于弊的，不過需要合理地使用壓縮，通過選擇對一定范圍大小的組件進行壓縮和選擇要壓縮組件的類型，能使得收益最大化。

考慮代理緩存的情況

代理緩存服務(wù)器是一個中間層，位于客戶端和服務(wù)器之間。使用代理緩存的情況下，瀏覽器將不直接與服務(wù)器通信，而是通過代理發(fā)送請求。這種情況下，壓縮就要考慮額外的東西了。

首先，假設(shè)到達代理的是一個來自不支持gzip的瀏覽器的請求，代理會將請求轉(zhuǎn)發(fā)到web服務(wù)器，此時web服務(wù)器的響應(yīng)是未經(jīng)過壓縮的，這個響應(yīng)會把代理服務(wù)器緩存起來并發(fā)給瀏覽器�，F(xiàn)在，假設(shè)到達代理的第二個請求來自一個支持gzip瀏覽器，請求的是與之前相同的URL，代理會直接使用未經(jīng)壓縮的緩存響應(yīng)，那么久失去了進行壓縮的機會了�？紤]更糟糕的情況，第一個請求來自支持gzip的瀏覽器，第二個請求來自不支持gzip的瀏覽器，這樣第二個請求得到的緩存響應(yīng)將無法被解碼，導(dǎo)致出錯。

解決這一問題的方法就是在Web服務(wù)器的響應(yīng)中添加Vary頭，Vary:Accept-Encoding，表示web服務(wù)器告訴緩存服務(wù)器分別為每一個Accpet-Encoding請求頭緩存。在前面的例子中，代理通過識別Vary頭，對響應(yīng)緩存不同的版本，避免出錯。

標簽： Web前端性能優(yōu)化教程 Web前端優(yōu)化 Web優(yōu)化 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。