Javascript最適化技術（ファイル痩身編）
3429 ワード
最近ずっと研究しています。 Javascript 関連する技術。『Javascript』では 高級なプログラムの設計については、最適化を重点的に説明する章があります。 Javascript コードの重要性。たくさんあると信じています Javascript 開発者は開発するとともに、多かれ少なかれこのような問題に接触します。
ほとんどの場合、コードの最適化は実際の開発において重要な部分ではない。しかし、コードが完成すると、開発者は常に自分のコードが短いほど効率的であることを期待しています。本から得た知識と本人の実際の開発過程の経験を結び付けて、自分がとった手技を説明します。
前言
スクリプト言語に比べて、コンパイル型の言語は最適化の問題にあまり関心を持たない必要があります。最大のレベルでは、コンパイル時にコンパイラの行を最適化します。例えば、すべての変数、関数、オブジェクトなどは、プロセッサにしか理解できないシンボルとポインタに置き換えられます。他のスクリプト言語もファイルの大きさを気にする必要はありません。 Javascript 場合によって違います。
それはまずサーバからソースコードをダウンロードしてからクライアントのブラウザで実行します。したがって、Javascriptコードの速度は、ダウンロード時間（ファイルサイズに依存）と実行速度（コードアルゴリズムに依存）の2つの部分に分割される。この主な討論は Javascriptのダウンロード時間は最適化されています。つまり、どうやって可能な限り縮小されますか？ Javascript ファイル自体の容量。
ここで覚えたい数字は？ 1160、これは単一に入れることができるのです。 TCP/IP パケット中のバイト数。したがって、最も良い期待値は、それぞれを Javascript ファイルを保存 1160 バイトをして最適なダウンロード時間を得る。
コメントを削除
無駄話のようですが、多くの開発者が忘れてしまいます。実際の生産環境では、スクリプトのコメントはすべて削除するべきです。開発中の注釈はかなり重要です。チームのコードの理解を助けることができます。しかし、実際の生産環境では、注釈は明らかにスクリプトファイルの体積を大きくします。それらを削除することはスクリプトの実際の動作に影響を与えません。
タブとスペースの削除
良好なインデントとスペースを有するコードは、通常、良好な読み取り可能性を有する。しかし、ブラウザはこれらの追加のタブとスペースが必要ではないので、それらを削除したほうがいいです。もちろん、関数パラメータ、割当語句、比較操作の間のスペースも忘れないでください。たとえば
機能 show MeThe Money(money)
{
if (!money {
return false;
} else {
...
}
｝を最適化することができます
機能 show MeThe Money(money){if(！money){reutrn} false;else{…}
これにより、部分的な容量を減らすことができる。
すべての改行を削除します。
についていろいろあります Javascript の中で改行があるべき思考ですが、ボトムラインは改行してコードの可読性を増加させます。ただし、過度の改行はコードの体積を増加させます。
何かの理由で改行を削除できない場合があります。この場合、ファイルは Unix フォーマットの。何故なら Windows、Mac 書式の改行は、2文字で改行を表します。Unix 一つだけ使います。ファイルを変換します。 Unix フォーマットはバイト数を節約することもできます。
変数名を置換
これは一番つまらないやり方かもしれません。これは普通手作りで完成したのではありません。結局変数の名称は解釈器にとって意味がない（開発者にとってはより友好的なものである）ので、生産環境において記述的な変数名をより簡単で、より短い名前に置き換えることも一部の体積を減らすことができる。例えば上記のコードを短縮できます。
機能 sm(m){if(m){reutrn] false;else{…}
これは比較的頭痛がしますが、実際の効果は同じです。
使用ツール
実際に上記の方法を使うのは難しいかもしれませんが、既製の外部ツールがあれば、これらのステップを完成できます。いくつか紹介します。
ECMAScript Cruncher:http://saltstorm.net/depo/esc/
JSMin JavaScript Minifier): http://www.crockford.com/javascript/jsmin.html
オンライン JavaScript Coprestor.http://dean.edwards.name/packer/
この文章を読む興味があると思います。
その他の方法
ブール値を置換
比較にとって、true イコール 1,false イコール 0 。したがって、スクリプトに含まれる文字の量 true 全部使えます 1 を選択します false 使えます 0 を選択します。に対する true 節約しました 3 バイトで false 節約します 4 バイト。
否定検出の短縮
コードにはしばしば、値が有効かどうかを検出する文があります。大部分の条件が非であるという判断は、ある変数が undefined、null または false、たとえば：
if (myValue != undefined） {
// ...
)
if (myValue != null {
// ...
)
if (myValue != false {
// ...
)
これらは正しいですが、論理で操作しなくても同じ効果があります。
if (!myValue） {
// ...
)
このような置換は、一部のバイトを節約することもできる。
配列とオブジェクトの字面量を使う
これのほうが分かりやすいです。例えば、二行とも同じです。
var myAray = new Aray;
var myAray = [];
しかし、2行目は1行目よりも短く、分かりやすいです。似たような対象声明もあります。
var myObject = new Object
var myObject = {};
たとえば、次のような語句があります。
var mySite = new Object
myste.author = "feelinglucky";
myste.location = "http://www.gracecode.com";
このように書いても非常に分かりやすく、短いです。
var mySite = {author:「feeinglucky」、 location:"http://www.gracecode.com「③」
はい、今号はここまでです。上に向かって言ったのは、Javascriptです。 コードの速度は2つの部分に分割されます。ダウンロード時間（ファイルのサイズに依存します。）と実行速度（コードアルゴリズムに依存します。）今回はダウンロード時間について最適化し、次回は速度についての最適化を検討します。
宿題をします。みなさんは興味があるかもしれません。了解してください。 jQuery どうやって自分を 70 KB のコードを圧縮します 20 KB 左右の。
ほとんどの場合、コードの最適化は実際の開発において重要な部分ではない。しかし、コードが完成すると、開発者は常に自分のコードが短いほど効率的であることを期待しています。本から得た知識と本人の実際の開発過程の経験を結び付けて、自分がとった手技を説明します。
前言
スクリプト言語に比べて、コンパイル型の言語は最適化の問題にあまり関心を持たない必要があります。最大のレベルでは、コンパイル時にコンパイラの行を最適化します。例えば、すべての変数、関数、オブジェクトなどは、プロセッサにしか理解できないシンボルとポインタに置き換えられます。他のスクリプト言語もファイルの大きさを気にする必要はありません。 Javascript 場合によって違います。
それはまずサーバからソースコードをダウンロードしてからクライアントのブラウザで実行します。したがって、Javascriptコードの速度は、ダウンロード時間（ファイルサイズに依存）と実行速度（コードアルゴリズムに依存）の2つの部分に分割される。この主な討論は Javascriptのダウンロード時間は最適化されています。つまり、どうやって可能な限り縮小されますか？ Javascript ファイル自体の容量。
ここで覚えたい数字は？ 1160、これは単一に入れることができるのです。 TCP/IP パケット中のバイト数。したがって、最も良い期待値は、それぞれを Javascript ファイルを保存 1160 バイトをして最適なダウンロード時間を得る。
コメントを削除
無駄話のようですが、多くの開発者が忘れてしまいます。実際の生産環境では、スクリプトのコメントはすべて削除するべきです。開発中の注釈はかなり重要です。チームのコードの理解を助けることができます。しかし、実際の生産環境では、注釈は明らかにスクリプトファイルの体積を大きくします。それらを削除することはスクリプトの実際の動作に影響を与えません。
タブとスペースの削除
良好なインデントとスペースを有するコードは、通常、良好な読み取り可能性を有する。しかし、ブラウザはこれらの追加のタブとスペースが必要ではないので、それらを削除したほうがいいです。もちろん、関数パラメータ、割当語句、比較操作の間のスペースも忘れないでください。たとえば
機能 show MeThe Money(money)
{
if (!money {
return false;
} else {
...
}
｝を最適化することができます
機能 show MeThe Money(money){if(！money){reutrn} false;else{…}
これにより、部分的な容量を減らすことができる。
すべての改行を削除します。
についていろいろあります Javascript の中で改行があるべき思考ですが、ボトムラインは改行してコードの可読性を増加させます。ただし、過度の改行はコードの体積を増加させます。
何かの理由で改行を削除できない場合があります。この場合、ファイルは Unix フォーマットの。何故なら Windows、Mac 書式の改行は、2文字で改行を表します。Unix 一つだけ使います。ファイルを変換します。 Unix フォーマットはバイト数を節約することもできます。
変数名を置換
これは一番つまらないやり方かもしれません。これは普通手作りで完成したのではありません。結局変数の名称は解釈器にとって意味がない（開発者にとってはより友好的なものである）ので、生産環境において記述的な変数名をより簡単で、より短い名前に置き換えることも一部の体積を減らすことができる。例えば上記のコードを短縮できます。
機能 sm(m){if(m){reutrn] false;else{…}
これは比較的頭痛がしますが、実際の効果は同じです。
使用ツール
実際に上記の方法を使うのは難しいかもしれませんが、既製の外部ツールがあれば、これらのステップを完成できます。いくつか紹介します。
ECMAScript Cruncher:http://saltstorm.net/depo/esc/
JSMin JavaScript Minifier): http://www.crockford.com/javascript/jsmin.html
オンライン JavaScript Coprestor.http://dean.edwards.name/packer/
この文章を読む興味があると思います。
その他の方法
ブール値を置換
比較にとって、true イコール 1,false イコール 0 。したがって、スクリプトに含まれる文字の量 true 全部使えます 1 を選択します false 使えます 0 を選択します。に対する true 節約しました 3 バイトで false 節約します 4 バイト。
否定検出の短縮
コードにはしばしば、値が有効かどうかを検出する文があります。大部分の条件が非であるという判断は、ある変数が undefined、null または false、たとえば：
if (myValue != undefined） {
// ...
)
if (myValue != null {
// ...
)
if (myValue != false {
// ...
)
これらは正しいですが、論理で操作しなくても同じ効果があります。
if (!myValue） {
// ...
)
このような置換は、一部のバイトを節約することもできる。
配列とオブジェクトの字面量を使う
これのほうが分かりやすいです。例えば、二行とも同じです。
var myAray = new Aray;
var myAray = [];
しかし、2行目は1行目よりも短く、分かりやすいです。似たような対象声明もあります。
var myObject = new Object
var myObject = {};
たとえば、次のような語句があります。
var mySite = new Object
myste.author = "feelinglucky";
myste.location = "http://www.gracecode.com";
このように書いても非常に分かりやすく、短いです。
var mySite = {author:「feeinglucky」、 location:"http://www.gracecode.com「③」
はい、今号はここまでです。上に向かって言ったのは、Javascriptです。 コードの速度は2つの部分に分割されます。ダウンロード時間（ファイルのサイズに依存します。）と実行速度（コードアルゴリズムに依存します。）今回はダウンロード時間について最適化し、次回は速度についての最適化を検討します。
宿題をします。みなさんは興味があるかもしれません。了解してください。 jQuery どうやって自分を 70 KB のコードを圧縮します 20 KB 左右の。