ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML 書き込みが gzip 圧縮率に及ぼす影響
数日前、Xiao Du がグループ内で「HTML 書き込みが gzip 圧縮率に及ぼす影響」という記事を共有しているのを見たので、この点についても分析してみました。
この記事を読んだか分かりませんが、著者はWeiboLalan交流会出身です。
Gzip アルゴリズムは、主に Haferman アルゴリズムと LZ77 アルゴリズムで構成されています。
ファイル内に同じコンテンツが 2 つある場合、前のコンテンツの場所とサイズがわかっていれば、特定の圧縮識別子を通じて
次のコンテンツのコンテンツを判断できます。したがって、後者のコンテンツを位置の長さなどの情報のペアに置き換えることができます。
たとえば
<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の開発者ツールで表示されるサイズは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 圧縮、表示されるサイズは 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で見たサイズは463Bです
属性が乱れた後:
@charset "utf-8";
.f1{font-size:10px; line-height: 22px; color:red;}.f2{font-size:14px; color:green; line-height: 26px;}gzip後のサイズは464Bです
この結論から, そうすると、htmlだけでなくCSSでも同様の効果があります。
行の間に他のクラスがある場合はどうなるのかと疑問に思う人もいるかもしれません。
@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 デベロッパー ツールのネットワークにおけるサイズ/コンテンツ値の違い:
この側面を調査することに加えて、Chrome デベロッパー ツールのネットワーク/サイズ列が少し理解しにくいことがわかりました。
私は彼のサイズとコンテンツに長い間苦労してきました。意味が分かりません。サイズがコンテンツ値より大きい場合もあれば、コンテンツ値より小さい場合もあります。
CJ の指導と私自身の実験の後、次の結果が得られました。
サイズ値は、リクエスト/レスポンスヘッダーの gzip サイズとファイルコンテンツの gzip サイズを含む、ネットワーク送信コンテンツのサイズを指します。
Content 値は、メイン コンテンツ本体の gzip 解凍サイズ、つまりページ ファイルのサイズを指します。
「Size」が「Content」値よりも大きい場合は、そのヘッダーが本文の gzip 解凍よりもはるかに大きいことを意味し、その逆も同様です。
ページに初めてアクセスしたときに取得されるサイズ値が、更新後のサイズ値よりも大幅に小さいことがわかる場合があります。これは、ページのキャッシュがオンになっているため、ネットワークからリロードする必要がないためです。
個人的には、FireBug の値は Chrome の値よりも直感的だと思います。FireBug のサイズは gzip 値です。 Chromeではgzipのサイズが見つからないようです。
サーバー側の戻りヘッダー情報に Content-Length フィールドがある場合を除き、このフィールドから gzip サイズを確認することもできます。ただし、このフィールドは通常は出力されません。
以上がHTML 書き込みが gzip 圧縮率に及ぼす影響の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。