javascriptの最適化と縮小とgzipping

Question

私が気付いたのは、ミニターがプロトタイプの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パーセントが保存されない... ...最適化されていない、YUI圧縮バージョンの130バイト（最適化されていないから= 71.42パーセント）と負荷と明らか利益、gzipでスクリプトを有効にして公開134バイト（最適化されていないものから= 73.63％）の最適化されたYUI圧縮バージョンよりも節約されます...圧縮がどのように機能するかを考えた後に明らかになるかもしれませんが、今行く方法は？このマイクロ最適化と最初の場所でのより小さい圧縮はgzipでより大きなファイルサイズを正当化します...あなたはこのような最適化であなたのコードを簡単に読みやすく保守しやすくすることができます。それに入って来るべきではありませんhttp://refresh-sf.com/yui/

Answer 1

コードの読みやすさに応じて

すべての情報 - あなたが唯一の本番サーバー上の縮小化と非縮小さコードを開発する必要があります。変数や関数の名前を微調整しないでください。一度ダウンロードしてキャッシュするファイルの数KBについて話していますが、コードの可読性をほぼゼロにして犠牲にすることは間違いありません。

縮小化するかgzipするか、gzip-doのどちらか小さい方のファイルサイズを小さくするかどうかを指定します。

Answer 2

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

50行または100行以上のコードを縮小して圧縮すると、より魅力的な結果が表示されます。そして、@ rgvcorleyの示唆しているように、開発環境でコードを読みやすくメンテナンスできるようにすることに焦点を当て、ファイルサイズの細かい部分をビルドプロセスとWebサーバーまで残しておく必要があります。

Answer 3

他のものを除外することはありません：JSファイルの最小化とgzippingの両方を行うことができます（通常、gzippingはWebサーバーレベルで発生します）。私はそれが最良の結果をもたらすと思う。 大きなファイルでは、最小化と圧縮が効果的です。 JSが小さく、私が見てしまうにすることに加えて

：HTTPの数を減らすために1つの縮小さのファイルにJSファイルをマージ

1. は、HTTPのキャッシュ設定
2. を減らすためにCDNにJSを置く最適化
3. を要求しますダウンロード時間
4. 一般的なJSライブラリの公開CDNを使用jQueryの、他のものを向上させることができるものを報告取得するhttp://www.webpagetest.org/であなたのウェブサイトをチェックJSファイルとHTMLページ

の最後の追加、ユーザーのローカルキャッシュ

から撮影される可能性が高くなるので

詳細については、Read High Performance Web Sites本をお勧めします。いくつかの単純な変更によってページの読み込み時間が大幅に改善される可能性があります。