html寫法對gzip壓縮率的影響-html教學-PHP中文網

首頁

web前端

html教學

html寫法對gzip壓縮率的影響

高洛峰

Mar 27, 2017 pm 02:50 PM

gziphtml

前幾天在群組裡看到小杜分享一篇文章，《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的開發者工具看到的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

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

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

Size值是指網路傳輸內容的大小，這裡麵包括了Request/Response headers 的gzip大小和檔案內容的gzip大小。
Content值是指主體內容body的gzip解壓縮後的大小, 也就是頁面檔案的大小。

如果你看到Size比Content值大，表示他的headers也比body的gzip解壓縮後大得多了, 反之亦然。
可能你會發現，頁面第一次造訪得到的size值比刷新後的size值少很多。那是因為頁面開啟了緩存，自然就無需求再重新從網路載入一次。
個人感覺FireBug的值比Chrome的值要直觀，FireBug上面的大小是gzip的值。好像在chrome沒發現有gzip的大小。
除非如果伺服器端有回傳頭資訊中有Content-Length字段，那麼也可以從這個字段看到gzip的大小。但通常不會輸出這個字段。

以上是html寫法對gzip壓縮率的影響的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。