html寫法對gzip壓縮率的影響

來源：懂視網責編：小采時間：2020-11-27 15:34:03

html寫法對gzip壓縮率的影響

html寫法對gzip壓縮率的影響:前幾天在群里看到小杜分享一篇文章，《html寫法對gzip壓縮率的影響》，為此我也對這點分析了一下。不知道大家有沒有看過這文章，作者是來自微博懶懶交流會，其內容我這里先簡述一下。Gzip算法主要由哈費曼和LZ77算法組成。如果文件中有兩塊內容相同的話，那么

推薦度：

點擊下載本文 文檔為doc格式

導讀html寫法對gzip壓縮率的影響:前幾天在群里看到小杜分享一篇文章，《html寫法對gzip壓縮率的影響》，為此我也對這點分析了一下。不知道大家有沒有看過這文章，作者是來自微博懶懶交流會，其內容我這里先簡述一下。Gzip算法主要由哈費曼和LZ77算法組成。如果文件中有兩塊內容相同的話，那么

前幾天在群里看到小杜分享一篇文章，《html寫法對gzip壓縮率的影響》，為此我也對這點分析了一下。
不知道大家有沒有看過這文章，作者是來自微博懶懶交流會，其內容我這里先簡述一下。

Gzip算法主要由哈費曼和LZ77算法組成。
如果文件中有兩塊內容相同的話，那么只要知道前一塊內容的位置和大小，通過特定的壓縮標識符，
我們就可以確定后一塊的內容。所以我們可以用位置長度這樣一對信息，來替換后一塊內容。

舉例

<html><head>
 <title></title>
 <meta charset="utf-8" /></head><body>
 <form action="">
 <input class="J_Textarea" type="text" name="name123" id="id1"/>
 <input class="J_Textarea" type="password" name="name223" id="id2"/>
 <input class="J_Textarea" type="radio" name="name323" id="id3"/>
 <input class="J_Textarea" type="checkbox" name="name423" id="id4"/>
 </form></body></html>

通過gzip壓縮后，在chrome的開發(fā)者工具看到的size是563B。

下面把input標簽的屬性順序打亂后：

<html><head>
 <title></title>
 <meta charset="utf-8" /></head><body>
 <form action="">
 <input class="J_Textarea" type="text" name="name123" id="id1"/>
 <input name="name123" class="J_Textarea" type="password" id="id2"/>
 <input type="radio" id="id3" name="name323" class="J_Textarea"/>
 <input id="id4" type="checkbox" class="J_Textarea" name="name423"/>
 </form></body></html>

gzip壓縮，看到的size是578B。

文章內容大概如此，那么，我果斷想了一下，CSS是不是也會有類似效果呢？
先把CSS文件中的屬性都按順序寫：

@charset "utf-8"; 
.f1{font-size:10px; line-height: 22px; color:red;}.f2{font-size:14px; line-height: 26px; color:green;}

gzip看到的size是463B
屬性打亂順序后：

@charset "utf-8"; 
.f1{font-size:10px; line-height: 22px; color:red;}.f2{font-size:14px; color:green; line-height: 26px;}

gzip后的size是464B

由此得出結論，那么不僅是html, 連CSS也有類似效果。
也許有人會問，行與行之間如果有其他class那結果會怎樣呢？

@charset "utf-8"; 
.f1{font-size:10px; color:red; line-height: 22px;}.f9{background: red;}.f2{font-size:14px; color:green; line-height: 26px;}

size:482B

@charset "utf-8"; 
.f1{font-size:10px; line-height: 22px; color:red;}.f9{background: red;}.f2{font-size:14px; color:green; line-height: 26px;}

size:480B

這樣結果和上面的結論不一樣了。
可見，行與行之間的連續(xù)性對壓縮率也可能會產生影響。
換句話來說，代碼相似率越大，壓縮率就越高。
不管是從壓縮率方面還是從代碼整齊美觀方面來講，我們應該把代碼按順序寫，方便了團隊，也方便了壓縮。

chrome開發(fā)者工具的network里面size/content值不同之處：
除了研究這方面以外，我發(fā)現了chrome的開發(fā)者工具中的Network/Size欄有些難理解。
對他的Size和Content糾結了很久。不明白他們分別表示什么意思。有時size比content值大，有時size比content值小。
經過CJ的指點和自己的實驗，得以下結果。

Size值是指網絡傳輸內容的大小，這里面包括了Request/Response headers 的gzip大小和文件內容的gzip大小。
Content值是指主體內容body的gzip解壓后的大小, 也就是頁面文件的大小。

如果你看到Size比Content值大，說明他的headers也比body的gzip解壓后大得多了, 反之亦然。
可能你會發(fā)現，頁面第一次訪問得到的size值比刷新后的size值要少很多。那是因為頁面開啟了緩存，自然就無需求再重新從網絡加載一次。
個人感覺FireBug的值比Chrome的值要直觀，FireBug上面的大小是gzip的值。好像在chrome中沒發(fā)現有gzip的大小。
除非如果服務器端有返回頭信息中有Content-Length字段，那么也可以從這個字段看到gzip的大小。但通常不會輸出這個字段。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

html寫法對gzip壓縮率的影響

推薦度：

點擊下載本文 文檔為doc格式

標簽：影響壓縮 html

熱門焦點

html寫法對gzip壓縮率的影響

html寫法對gzip壓縮率的影響

html寫法對gzip壓縮率的影響

最新推薦

猜你喜歡

熱門推薦