効率的JavaScript編纂技術整理
2764 ワード
最近はJavaScriptの枠組みを作成していますが、細かいところに注意が足りないことがたくさんあります.長期間の蓄積によって、実際に枠組みが適用されることが心配されています.そこで、JavaScriptが効率を上げるためのテクニックに注目し、ここで皆さんに分かち合います.
1.JavaScriptは唯一コードの体積に対する要求が小さいほどいい言語です.だから、JavaScriptコードをいくつかのツールを通じて簡潔に圧縮できます.JSMin、Packer、YUIComprestorなどです.これらのツールは、ローカル変数の名前を非常に短い変数名に置き換えることができます.たとえば、パー秒Float()をa()に置き換えることができます.したがって、JavaScriptコードを作成する時、グローバル変数ごとに一つの局所変数にマッピングします.例えば、var parseFloat=parseFloat;
2.JSLintを通してJavaScriptを検査します.中に隠されている多くの問題を発見できます.JSLintはJavaScript検証ツール(非オープンソース)であり、JavaScriptソースコードをスキャンして問題を検索することができます.JSLintが問題を発見した場合、JSLintはこの問題を記述するメッセージを表示し、ソースコードにおけるエラーの大体の位置を指摘する.
3.私たちはJavaScriptを書く時、常に行列を遍歴する必要があります.コードは以下の通りです.
4.JavaScriptの中で誰でもObject.prototypeの属性を修正または追加できますので、対象の属性を遍歴する時は、まずハスOwnPropertyを使って判断して、全体のプロトタイプチェーンを遍歴することを避けて、効率に影響を与えます.例えば:
6.文字列以外の変数を文字列の種類に変換する場合は、そのまま使用できます.
7.配列を定義する場合、配列類の並べ替えなどの方法が必要でない場合は、一般的な割当とアクセスだけを行い、直接に書くべきです.
8.jQueryを使う場合、同じオブジェクトに対して複数の関数を実行する場合は、できるだけ同じラインのコードに入れるようにします.例えば、
具体的にはこのブログを参照してください.http://www.nowamagic.net/librarys/veda/detail/363
この記事も参考にしました.http://www.cnblogs.com/justinw/archive/2009/12/07/1618500.html
1.JavaScriptは唯一コードの体積に対する要求が小さいほどいい言語です.だから、JavaScriptコードをいくつかのツールを通じて簡潔に圧縮できます.JSMin、Packer、YUIComprestorなどです.これらのツールは、ローカル変数の名前を非常に短い変数名に置き換えることができます.たとえば、パー秒Float()をa()に置き換えることができます.したがって、JavaScriptコードを作成する時、グローバル変数ごとに一つの局所変数にマッピングします.例えば、var parseFloat=parseFloat;
2.JSLintを通してJavaScriptを検査します.中に隠されている多くの問題を発見できます.JSLintはJavaScript検証ツール(非オープンソース)であり、JavaScriptソースコードをスキャンして問題を検索することができます.JSLintが問題を発見した場合、JSLintはこの問題を記述するメッセージを表示し、ソースコードにおけるエラーの大体の位置を指摘する.
3.私たちはJavaScriptを書く時、常に行列を遍歴する必要があります.コードは以下の通りです.
for (var i=0;i//do something
}
JavaScriptのメンバー変数は実行時に決定されます.これは各ループごとに行列length属性を検索する必要があるため、配列サイズを保存する変数を追加できます.
var l = array.length;
for (var i=0;i//do something
}
このように最適化されているように見えますが、実際にはもっとよくできます.
var i=array.length;
while(i--){
//do something
}
これはこの2行のコードがアセンブリに変換される時、while文に必要なコマンドがより少ないため、ここでは説明を展開しません.4.JavaScriptの中で誰でもObject.prototypeの属性を修正または追加できますので、対象の属性を遍歴する時は、まずハスOwnPropertyを使って判断して、全体のプロトタイプチェーンを遍歴することを避けて、効率に影響を与えます.例えば:
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
//do something
}
}
5.undefinedを使う時、まずローカル変数undefinedを定義します.
var checkVal = function(val) {
var undefined;
return val !== undefined;
};
上記のコードでは、ローカル変数を事前に定義していない場合は、グローバル変数undefinedを直接使用して判断しますが、サードパーティが他の場所でグローバル変数undefined=3を定義すると結果が間違ってしまいます.6.文字列以外の変数を文字列の種類に変換する場合は、そのまま使用できます.
var str = (i + "").replace(...);
このところはStering(i)を使うとだいぶ遅くなります.7.配列を定義する場合、配列類の並べ替えなどの方法が必要でない場合は、一般的な割当とアクセスだけを行い、直接に書くべきです.
var array = {};
ではなく
var array = new Array();
これは一つの数値変数を定義するときにvar i=new Number(1)を書くのと同じ意味がありません.8.jQueryを使う場合、同じオブジェクトに対して複数の関数を実行する場合は、できるだけ同じラインのコードに入れるようにします.例えば、
$("p.neat").addClass("ohmy").show("slow");
ではなく
$("p.neat").addClass("ohmy");
$("p.neat").show("slow");
他にもDcumentFragmentを使って何度もappedを最適化し、first ChildとnextSiblingを使ってchild Nodesに代わってdom元素を遍歴するなどのテクニックがあります.具体的にはこのブログを参照してください.http://www.nowamagic.net/librarys/veda/detail/363
この記事も参考にしました.http://www.cnblogs.com/justinw/archive/2009/12/07/1618500.html