Javascript最適化スキル（ファイルスリム化）_JavaScriptスキル

最近はJavaScript関連の技術を勉強しています。 「JavaScript 高度なプログラミング」には、JavaScript コードの最適化の重要性に焦点を当てた章があります。開発中に多かれ少なかれこのような問題に遭遇するJavaScript開発者は多いと思います。

ほとんどの場合、コードの最適化は実際の開発で重点を置く必要がある部分ではありません。しかし、コードが完成すると、開発者は常にコードができるだけ短く効率的であることを期待します。この本から得た知識と実際の開発プロセスでの私の経験を組み合わせて、私が採用したいくつかのトリックを以下に説明します (スクリプトに従うとみなすことができます)。

はしがき

スクリプト言語と比較して、コンパイル言語は最適化の問題についてあまり心配する必要がありません。コンパイラは、大部分の場合、コンパイル時に最適化操作を実行します。たとえば、すべての変数、関数、オブジェクトなどは、プロセッサのみが理解できるシンボルとポインター (通常は実行可能ファイルと呼ばれます) に置き換えられます。他のスクリプト言語ではファイルサイズをあまり気にする必要はありませんが、JavaScript は異なります。
まずサーバー側からソースコードをダウンロードし、それをクライアントのブラウザーで実行するためです。したがって、JavaScript コードの速度は、ダウンロード時間 (ファイルのサイズに応じて) と実行速度 (コードのアルゴリズムに応じて) の 2 つの部分に分割されます。この記事では主に Javascript のダウンロード時間の最適化、つまり Javascript ファイル自体のサイズをできるだけ減らす方法について説明します。
ここで留意すべき数字の 1 つは 1160 です。これは、単一の TCP/IP パケットに収まるバイト数です。したがって、ダウンロード時間を最適化するには、各 Javascript ファイルを 1160 バイト未満に保つことが最善です。

コメントを削除

これはナンセンスのように思えますが、多くの開発者はそれを忘れています。実際の運用環境では、スクリプト内のコメントを削除する必要があります。コメントはチームがコードを理解するのに役立つため、開発中に非常に重要です。ただし、実際の運用環境では、コメントによってスクリプト ファイルのサイズが大幅に増加します。それらを削除しても、スクリプトの実際の実行には影響しません。

タブとスペースを削除する

適切なインデントと空白を使用したコードは、一般的に読みやすくなります。ただし、ブラウザではこれらの余分なタブやスペースは必要ないため、削除することをお勧めします。もちろん、関数パラメータ、代入ステートメント、および比較演算の間にスペースを忘れないでください。例えば

関数 showMeTheMoney(お金)
{
if (!money) {
false を返します。
} else {
…
}
} は次のように最適化できます

関数 showMeTheMoney(money){if(!money){reutrn false;}else{...}}

これにより、容量が一部削減される可能性があります。

すべての改行を削除します

JavaScript における改行の存在については多くの議論がありますが、結局のところ、改行によってコードの可読性が向上するということです。ただし、改行をしすぎるとコードサイズも大きくなります。
改行を削除できない何らかの理由がある可能性があるため、ファイルが Unix 形式であることを確認してください。 Windows および Mac 形式の改行文字は改行を表すのに 2 文字を使用するため、Unix では 1 文字のみを使用します。したがって、ファイルを Unix 形式に変換すると、バイト数も節約できます。

変数名を置換

これはおそらく最も退屈な方法であり、通常は手作業では行われません。結局のところ、変数名はインタプリタにとっては意味がなく (開発者にとってわかりやすいだけです)、説明的な変数名をより単純で短い名前に置き換えることで、運用環境のサイズをある程度削減することもできます。たとえば、上記のコードは次のように簡略化できます。

関数 sm(m){if(!m){reutrn false;}else{...}}

これは頭痛の種のように思えるかもしれませんが、実際の効果は同じです。

ツールを使用する

上記の方法を実際に使用すると、いくつかの困難が生じる可能性があります。幸いなことに、これらの手順を完了できる既製の外部ツールがあります。以下にいくつかの簡単な紹介を示します。
ECMAScript クランチャー: http://saltstorm.net/depo/esc/
JSMin (JavaScript Minifier): http://www.crockford.com/javascript/jsmin.html
オンライン JavaScript コンプレッサー: http://dean.edwards.name/packer/

この記事を読むことに興味があると思います。

その他の方法

ブール値を置換します

比較のために、true は 1 に等しく、false は 0 に等しくなります。したがって、スクリプトに含まれるリテラルの true は 1 に置き換えることができ、false は 0 に置き換えることができます。これにより、true の場合は 3 バイト、false の場合は 4 バイトが節約されます。

ネガティブ検出を短縮する

コードには、特定の値が有効かどうかをテストするステートメントが含まれることがよくあります。ほとんどの条件付き非判定は、変数が未定義、null、または false であるかどうかを判断するものです。次に例を示します。

if (myValue != 未定義) {
// ...
}

if (myValue != null) {
// ...
}

if (myValue != false) {
// ...
}

これらは正しいですが、論理 NOT 演算子を使用しても同じ効果が得られます。

if (!myValue) {
// ...
}

このような置換により、一部のバイトを節約することもできます。

配列リテラルとオブジェクトリテラルを使用する

たとえば、次の 2 行は同じものです。

var myArray = 新しい配列;
var myArray = [];

ただし、2 行目は 1 行目よりもはるかに短く、簡単に理解できます。オブジェクト宣言も同様です。


var myObject = 新しいオブジェクト;
var myObject = {};

たとえば、次のステートメントを考えてみましょう。

var mySite = 新しいオブジェクト;
mySite.author = "気分が良い";
mySite.location = "http://www.gracecode.com";

次のように書くと非常に理解しやすくなり、はるかに短くなります。

var mySite = {author:"feeinglucky", location:"http://www.gracecode.com"};

はい、この問題はこれで終わりです。上で述べたように、JavaScript コードの速度は、ダウンロード時間 (ファイル サイズに応じて) と実行速度 (コード アルゴリズムに応じて) の 2 つの部分に分けられます。今回はダウンロード時間の最適化について説明しますが、次回は移動速度の最適化について説明します（これは非常に技術的ですよね）。

以下に宿題が出されます。おそらく、jQuery が 70 KB のコードをどのようにして約 20 KB に圧縮するのかに興味があるかもしれません。