1

ミニファイヤは、これで開始するとメソッドやプロパティを置き換えないため、プロトタイプの JavaScript ではそれほどうまく機能しないことに気付きました。例えば:

// unoptimized 182 bytes
myClass.prototype.myFunction = function(){
    this.myElementDom.style.backgroundColor='#000';
    this.myElementDom.style.color='#FFF';
    this.myElementDom.style.borderColor='#DDD';
}

// 168 bytes = 92% of unoptimized, YUI compressed
myClass.prototype.myFunction=function(){this.myElementDom.style.backgroundColor="#000";this.myElementDom.style.color="#FFF";this.myElementDom.style.borderColor="#DDD"};

// optimized 214 bytes
// set a replaceable local scope variable and reduce 2 variable 
// lookups at the same time
// file-size in the development version doesn't matter, so we can even increase it 
// to preserve readability
myClass.prototype.myFunction = function(){
    var myElementDomStyle = this.myElementDom.style
    myElementDomStyle.backgroundColor='#000';
    myElementDomStyle.color='#FFF';
    myElementDomStyle.borderColor='#DDD';
}

// 132 bytes = 72.53% of unoptimized, YUI compressed
myClass.prototype.myFunction=function(){var a=this.myElementDom.style;a.backgroundColor="#000";a.color="#FFF";a.borderColor="#DDD"};

万歳、19.47% 節約されました... ではありません ...gzip を有効にしてスクリプトを公開すると、最適化されていない YUI 圧縮バージョンは 130 バイト (= 最適化されていない場合の 71.42%) でロードされ、最適化された YUI 圧縮バージョンよりも明らかに節約されます。 134 バイト (= 最適化されていない場合の 73.63%)... 圧縮のしくみを考えれば明らかかもしれませんが、どうすればよいのでしょうか? そもそもこのマイクロ最適化と小さな圧縮を行うと、gzip を使用してより大きなファイルサイズを正当化できます...このような最適化により、コードの読みやすさと保守性を簡単に低下させることができるためです。

http://refresh-sf.com/yui/によるすべての情報

4

3 に答える 3

1

コードの読みやすさは考慮すべきではありません。本番サーバーでのみ縮小し、縮小されていないコードで開発する必要があります。変数名と関数名をマイクロ最適化しないでください。ほぼ確実にコードの読みやすさを犠牲にして、使いやすさをほぼゼロにします.一度ダウンロードしてキャッシュする数KBのファイルについて話している.

縮小してgzipするか、単にgzipするかについては、全体のファイルサイズが小さくなる方を実行してください。

于 2012-04-15T23:00:48.727 に答える
1

いずれにせよ、182 バイトのコードはあまり縮小または圧縮されません。縮小は、5 行のコードで 16 バイトしかない空白を削除し、関数、変数、およびプロパティ名を短縮することで機能しますが、この場合はスコープ上の理由でこれを行うことができません。圧縮は、繰り返されるシーケンスを見つけて削除することで機能します。5 行のコードには、多くの繰り返しを見つけるには十分なテキストがありません。

50 行、100 行、またはそれ以上のコード行を縮小および圧縮してみると、より説得力のある結果が得られます。また、@rgvcorley が示唆するように、開発環境でコードを読みやすく保守しやすくすることに集中し、ファイル サイズの細かい部分はビルド プロセスと Web サーバーに任せるべきです。

于 2012-04-15T23:12:28.007 に答える
1

1 つのことが別のことを排除するわけではありません: 最小化と JS ファイルの gzip の両方を実行できます (gzip は通常、Web サーバー レベルで行われます)。最良の結果をもたらすと思います。最小化と圧縮は、ファイルが大きいほどうまく機能します。

JS を小さくすることに加えて、次のことを検討します。

  1. JS ファイルを 1 つの縮小ファイルにマージして、HTTP 要求の数を減らす
  2. HTTP キャッシュ設定の最適化
  3. JS を CDN に入れてダウンロード時間を短縮する
  4. jQuery などの一部の一般的な JS ライブラリにパブリック CDN を使用するため、ユーザーのローカル キャッシュから取得される可能性が高くなります。
  5. JS ファイルの追加と HTML ページの末尾

あなたのウェブサイトをhttp://www.webpagetest.org/でチェックして、他に改善できる点を報告してください

詳細については、High Performance Web Sites の本を読むことをお勧めします。単純な変更でさえ、ページの読み込み時間を劇的に改善できるいくつかのシナリオをカバーしています

于 2012-04-15T23:15:03.743 に答える