効率的JavaScript編纂技術


最近はJavaScriptの枠組みを作成していますが、細かいところに注意が足りないことがたくさんあります.長期間の蓄積によって、実際に枠組みが適用されることが心配されています.そこで、JavaScriptが効率を上げるためのテクニックに注目し、ここで皆さんに分かち合います.
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
JavaScriptのメンバー変数は実行時に決定されます.これは各ループごとに行列length属性を検索する必要があるため、配列サイズを保存する変数を追加できます.
var l = array.length;
for (var i=0;i
このように最適化されているように見えますが、実際にはもっとよくできます.
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 obj={}ではなく、var obj=new Object()を直接書くべきです.
このように書く理由は三つあります.
a.効率がより高く、Arayは重積載されても大丈夫ですので、運行時はまずAray対応の関数を調べます.
b.このように書くと短いです
c.Arayは第三者が書いたグローバル変数によってカバーされる可能性があり、潜在的な衝突が存在する.
具体的には、この2つの投稿を参照してください.
http://stackoverflow.com/questions/7375120/why-is-arr-faster-than-arr-new-array
http://stackoverflow.com/questions/2280285/what-does-mean-in-javascript/2280295#2280295
(注意してください.[]ではなく、{}前に書き間違えました.すみません、layotechcsの指摘に感謝します.
8.jQueryを使う場合、同じオブジェクトに対して複数の関数を実行する場合は、できるだけ同じラインのコードに入れるようにします.例えば、
$("p.neat").addClass("ohmy").show("slow");
ではなく
$("p.neat").addClass("ohmy");
$("p.neat").show("slow");
このようにコードはより簡潔になり、最終的に得られたjsファイルはより小さくなります.
9.一連の変数を定義するには、カンマ区切りを使います.
var obj1 = {},
    obj2 = {},
    obj3 = {};
ではなく
var obj1 = {};
var obj2 = {};
var obj3 = {};
同様に、これは最終的に得られたjsファイルをより小さくする.
以上紹介したテクニックの中には、純粋に文字数を減らすためのものが少なくありませんが、これらの文字を省く意味がないと思わないでください.他にも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
個人ブログ:http://blog.csdn.net/zhaoxy2850
この記事のアドレス:http://blog.csdn.net/zhaoxy2850/article/details/10196893
転載は出典を明記してください.ありがとうございます.