134

私は先日、Javascript と CSS を圧縮することと、Gzip を好む人を比較することについて、やや活発な議論を行いました。

この人をXとします。

X は、Gzip はファイルを圧縮するため、既にコードを縮小していると述べています。

同意しません。Zip は、ファイルサイズを圧縮する損失のない方法です。ロスレスとは、オリジナルを完全に復元する必要があることを意味します。つまり、スペース、不要な文字、コメント付きのコード、その他すべてを復元できるように情報を保存する必要があります。より多くを圧縮する必要があるため、より多くのスペースが必要になります。

テストする方法はありませんが、このコードの Gzip は次のようになると思います。

.a1 {
    background-color:#FFFFFF;
    padding: 40px 40px 40px 40px;
}

このコードの Gzip よりも大きくなります。

.a1{body:background-color:#FFF;padding:40px}

これが正しいか間違っているかを証明できる人はいますか。
そして「ずっと使ってたから大丈夫」なんて言わないでください。

ここで科学的証拠を求めています。

4

13 に答える 13

198

非常に簡単にテストできます。私はあなたのjsを取り、それらを別のファイルに入れ、gzip -9を実行しました。これが結果です。これは、Cygwin と gzip 1.3.12 を実行している WinXP マシンで実行されました。

-rwx------  1 xxxxxxxx mkgroup-l-d     88 Apr 30 09:17 expanded.js.gz

-rwx------  1 xxxxxxxx mkgroup-l-d     81 Apr 30 09:18 minified.js.gz

これは、実際の JS の例を使用したさらなるテストです。ソースファイルは「common.js」です 元のファイルサイズは73134バイトです。縮小すると、26232バイトになりました。

元のファイル:

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 73134 Apr 13 11:41 common.js

縮小されたファイル:

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d 26232 Apr 30 10:39 common-min.js

-9 オプションで gzip 圧縮された元のファイル (上記と同じバージョン):

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 12402 Apr 13 11:41 common.js.gz

-9 オプションで gzip 圧縮された縮小ファイル (上記と同じバージョン):

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d  5608 Apr 30 10:39 common-min.js.gz

ご覧のとおり、さまざまな方法には明確な違いがあります。最善の策は、圧縮と圧縮の両方を行うことです。

于 2009-04-30T14:20:25.060 に答える
28

これは、私の Web サイトの「実際の」CSS ファイルを使用して、しばらく前に行ったテストの結果です。CSS オプティマイザーは縮小に使用されます。Gzip には、Ubuntu に付属する標準の Linux アーカイブ アプリを使用しました。

オリジナル: 28,781バイト縮小
: 22,242バイト
Gzip 圧縮: 6,969バイト
Min+Gzip: 5,990バイト

私の個人的な意見は、Gzip を最初に使用することです。それが明らかに最大の違いを生むからです。縮小に関しては、作業方法によって異なります。後で編集を行うには、元の CSS ファイルを保持する必要があります。変更のたびに縮小するのが面倒でない場合は、それを選択してください。

(注:ファイルを提供するときにミニファイアを「オンデマンド」で実行し、ファイルシステムにキャッシュするなど、他のソリューションがあります。)

于 2009-05-17T11:55:29.860 に答える
16

これをテストするときは注意してください。CSSのこれら2つのスニペットは非常に小さいため、GZIP圧縮のメリットはありません。GZIPの小さなヘッダーとフッター(約20バイトのオーバーヘッド)を追加するだけでは、得られるメリットは失われます。実際には、これほど小さいCSSファイルはなく、圧縮について心配する必要はありません。

minify + gzipは、gzip以上のものを圧縮します

元の質問に対する答えは、はい、minify + gzipは、gzipだけよりもかなり多くの圧縮を取得します。これは、重要な例(つまり、数百バイトを超える有用なJSまたはCSSコード)に当てはまります。

この実際の例については、縮小および非圧縮で利用可能なJqueryソースコードを取得し、gzipで両方を圧縮して確認してください。

Javascriptは、十分に最適化されたCSSよりもミニファイのメリットがはるかに大きいことは注目に値しますが、それでもメリットはあります。

理由:

GZIP圧縮はロスレスです。つまり、正確な空白、コメント、長い変数名などを含むすべてのテキストを保存する必要があるため、後で完全に再現できます。一方、縮小化は損失があります。コードを縮小すると、この情報の多くがコードから削除され、GZIPが保持する必要のある情報が少なくなります。

  • ミニファイは不必要に空白を破棄し、構文上の理由で必要な場合にのみスペースを残します。
  • 縮小化によりコメントが削除されます。
  • コードの縮小により、副作用がない場合、識別子名が短い名前に置き換えられることがあります。
  • コードの縮小は、実際にコードを解析することによってのみ可能である、コードに対する些細な「コンパイラの最適化」を行う可能性があります
  • CSSの縮小化により、冗長なルールを削除したり、同じセレクターを持つルールを組み合わせたりすることができます。
于 2009-04-30T15:05:17.403 に答える
12

あなたが正しい。

gzip よりも縮小するのは同じではありません (その場合は同じように呼び出されます)。たとえば、これを gzip するのは同じではありません。

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

縮小して次のような結果になるよりも:

var a = null;

もちろん、ほとんどの場合、単に圧縮または gzip するよりも、最初に圧縮してから Gzip を圧縮するのが最善の方法だと思います。

于 2009-04-30T14:20:40.100 に答える
7

gzip エンコーディングが有利になるしきい値があります。一般的なルールは次のとおりです。ファイルが大きくなればなるほど、圧縮率が向上し、gzip が圧倒的に有利になります。もちろん、最初に縮小してから gzip することもできます。

しかし、長さが 100 バイトを超えない小さなテキストで gzip と minify について話している場合、「客観的な」比較は信頼できず、無意味ですらありません。 Lorem Ipsum タイプに似ていますが、Javascript または CSS で記述されています。

そこで、 Fat-Free Minify (PHP) コードを使用して、jQuery と MooTools の最新バージョン (圧縮されていないバージョン) のベンチマークを行うことを提案させてください(空白とコメントを単純に削除し、変数を短縮せず、baseX エンコーディングを使用しません)。

minify と gzip (控えめなレベル 5 圧縮) と minify+gzip の結果は次のとおりです。

MooTools-Core
-------------
Baseline 102,991 bytes
Minified 79,414 (77.1% of original)
Gzipped 27,406 (26.6%)
Minified+Gzipped 22,446 (21.8%)

jQuery
------
Baseline 170,095
Minified 99,735 (58.6% of original)
Gzipped 46,501 (27.3%)
Minified+Gzipped 27,938 (16.4%)

これは JS ライブラリの戦いではありません。

ご覧のとおり、縮小 + gzip を使用すると、大きなファイルの圧縮率が向上します。コードを縮小することには利点がありますが、主な要因は、元のコードにどれだけの空白とコメントが存在するかです。この場合、jQuery にはより多くの機能があるため、より適切に縮小できます (インライン ドキュメントの空白がより多くなります)。Gzip 圧縮の強みは、コンテンツにどれだけの繰り返しがあるかです。したがって、縮小と gzip の関係ではありません。彼らは違うことをします。そして、両方を使用することで、両方の長所を活用できます。

于 2010-02-20T05:15:49.810 に答える
5

両方を使用しないのはなぜですか?

于 2009-04-30T14:19:50.663 に答える
1

テストは簡単です。css のテキストをテキスト ファイルに入れ、Linux の gzip のようなアーカイバを使用してファイルを圧縮するだけです。

これを行ったばかりで、最初の css のサイズは 184 バイトで、2 番目の css のサイズは 162 バイトです。

gzip 圧縮されたファイルでも空白は重要ですが、この小さなテストからわかるように、非常に小さなファイルの場合、圧縮されたファイルのサイズは元のファイルのサイズよりも大きくなる可能性があります。

これは、サンプルのサイズが非常に小さいためです。ファイルが大きい場合、gzip を使用するとファイルが小さくなります。

于 2009-04-30T14:18:15.393 に答える
0

これをテストするための非常に簡単な方法があります: 空白だけで構成されるファイルと、実際には空の別のファイルを作成します。次に、両方を Gzip してサイズを比較します。空白を含むファイルはもちろん大きくなります。

于 2009-04-30T14:18:41.930 に答える
0

もちろん、レイアウトやその他の重要なものを保持し、不要なジャンク (空白、コメント、冗長なものなど) を削除する「人間の」非可逆圧縮は、可逆 gZip 圧縮よりも優れています。

たとえば、マークや関数名などは、意味を説明するために一定の長さになる可能性が高いです。これを 1 文字の長さの名前に置き換えると、多くのスペースが節約されますが、可逆圧縮では不可能です。

ところで、CSS には、損失の多い作業を行うCSS コンプレッサなどのツールがあります。

ただし、「非可逆最適化」と可逆圧縮を組み合わせると、最良の結果が得られます。

于 2009-04-30T14:19:07.200 に答える
0

もちろん、テストしてファイルに書き込み、zlibで gzip することもできます。「gzip」ユーティリティ プログラムを試すこともできます。

質問に戻ります。ソースの長さと圧縮結果の間に明確な関係はありません。重要な点は「エントロピー」 (ソース内の各要素がどの程度異なるか) です。

したがって、それはソースがどのようであるかによって異なります。たとえば、多数の連続したスペース (例: > 1000) は、いくつかのスペース (例: < 10) と同じサイズに圧縮される場合があります。

于 2009-04-30T14:21:51.640 に答える
0

これは、2 つのファイルを gzip したときの結果です

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz
于 2009-04-30T14:21:57.147 に答える
-1

正解です。minify+gzip を使用すると、バイト数が少なくなります。科学的根拠はありませんが。

なぜあなたはテストの方法を持っていないのですか?

あるファイルでコードを縮小し、別のファイルでは「縮小しない」ままにします。出力を gzip できる Web サーバーにアップロードし (たとえば、Apache の mod_deflate)、firefox の Firebug 拡張機能をインストールし、キャッシュをクリアして、両方のファイルにアクセスします。Firebug の「NET」タブには、転送されたデータの正確な量が含まれます。それらを比較すると、「経験的」証拠が得られます。

于 2009-04-30T14:25:17.983 に答える