高性能javascriptを実現するための注意事項
2777 ワード
1.グローバル変数を少なく使う
理由:作用域チェーンはスタックの構造であるため、先入れ先出しの原則に従い、Javascriptエンジンはコードを解析する際に、グローバルオブジェクトをスタックの底に置いて、その上に順次出現するのは、異なる作用領域の活動対象(これらの活動対象は、クローズド以外の相互依存関係)であるため、変数を検索する際には当該活動対象から開始されます。次に、そのアクティブなオブジェクトを閉じます。最後はグローバルオブジェクトです。大域変数が多すぎると変数が得られた時の速度に影響を及ぼしますので、大域変数を使いすぎないようにしてください。
2.ローカル変数を使用してグローバル変数をカプセル化する
前に述べたように、活動対象はスタックの先端にありますので、まずその内容を調べます。私達はdocumentを局所変数にカプセル化すると、深層検索の回数を減らして、性能を向上させます。
3.配列長、オブジェクト属性を操作する場合は、できるだけ局所変数でカプセル化します。
理由:IE、operaアクセス配列は対象属性より速いですが、FF chrome safariは正反対ですので、これらを考慮してパッケージしたほうがいいです。
4.オブジェクトの属性の深さをできるだけ減らす
理由:深さが大きすぎると、Javascriptエンジンの取得値に対するアドレス検索のオーバヘッドが増加し、多層ネストのポインタが追加されたことに相当し、性能損失が発生します。
5.forサイクルでは、できるだけ局所変数パッケージ条件項目を使用する
理由:例えばfor(var i=0;i6.慎重なHTMLcollectionオブジェクト(例えば、childNodes getElements ByTagNameなど、DOM要素セットを取得する対象)を処理し、配列にパッケージして操作することが望ましい。
理由:DOM要素を操作するにはDOMドキュメントを巡回する必要がありますので、DOM要素ではないと巡回しないので、DOMの操作をできるだけ少なくしてください。
7.safariブラウザに対して開発中は「.」を使ってオブジェクト属性を取得し、「[]」ではないようにしてください。
8.二回未満の判断のもとでif-elseを使うことを提案しますが、三回以上のものはswitchを使いましょう。10回を超える場合は、やはり配列やjsonオブジェクトを使ってインデックスで検索しましょう。
9.循環配列の順序が低いから高いまで、または高いから低いまでに差がないなら、やはり高いから低いほうがいいです。たとえば、私たちは1つの配列の内容を循環的に出力します。
11.大きな配列を扱う場合は、duffポリシーに従ってください。
duff戦略:大きい配列の個数を8つのグループに分割し、この8つの単位の配列に対する操作は循環処理ではなく、煩雑な配列要素8行のコードを書くことを恐れず、大きな配列操作の性能を向上させます。
12.大きな配列の各要素を関数で処理する場合は、タイマーを使用して毎回の操作を保留し、時間設定は50-100 msが合理的です。
理由:単純にループで配列中の各要素を処理すれば、大きな配列であれば、ページの凍結と仮死が発生し、ユーザーに悪い体験をさせます。setTimeoutを使うと、操作毎に一時的に保留されます。javascriptエンジンに他の時間の場所があります。そして、設定された遅延時間の後、Javascriptエンジンがアイドル状態である可能性があります。これらの配列操作をよりよく処理することができます。バックグラウンド動作を仮想するのに相当します。以下はzakasが提案した解決策です。
理由:iframeのロードはwindow onloadをブロックします。いくつかのwindow unloadイベントにロードされたコードはユーザーがページを閉じる時に実行されないかもしれません。ですから、window onloadの時間が発生する時に動的にsrc属性を設定したほうがいいです。
PS:iframeを使わなくてもいいです。
14.CSS選択子の最適化
CSS選択子の読み方は右から左までなので、できるだけ右側のルールを詳しく書いてください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
理由:作用域チェーンはスタックの構造であるため、先入れ先出しの原則に従い、Javascriptエンジンはコードを解析する際に、グローバルオブジェクトをスタックの底に置いて、その上に順次出現するのは、異なる作用領域の活動対象(これらの活動対象は、クローズド以外の相互依存関係)であるため、変数を検索する際には当該活動対象から開始されます。次に、そのアクティブなオブジェクトを閉じます。最後はグローバルオブジェクトです。大域変数が多すぎると変数が得られた時の速度に影響を及ぼしますので、大域変数を使いすぎないようにしてください。
2.ローカル変数を使用してグローバル変数をカプセル化する
前に述べたように、活動対象はスタックの先端にありますので、まずその内容を調べます。私達はdocumentを局所変数にカプセル化すると、深層検索の回数を減らして、性能を向上させます。
3.配列長、オブジェクト属性を操作する場合は、できるだけ局所変数でカプセル化します。
理由:IE、operaアクセス配列は対象属性より速いですが、FF chrome safariは正反対ですので、これらを考慮してパッケージしたほうがいいです。
4.オブジェクトの属性の深さをできるだけ減らす
理由:深さが大きすぎると、Javascriptエンジンの取得値に対するアドレス検索のオーバヘッドが増加し、多層ネストのポインタが追加されたことに相当し、性能損失が発生します。
5.forサイクルでは、できるだけ局所変数パッケージ条件項目を使用する
理由:例えばfor(var i=0;i
理由:DOM要素を操作するにはDOMドキュメントを巡回する必要がありますので、DOM要素ではないと巡回しないので、DOMの操作をできるだけ少なくしてください。
7.safariブラウザに対して開発中は「.」を使ってオブジェクト属性を取得し、「[]」ではないようにしてください。
8.二回未満の判断のもとでif-elseを使うことを提案しますが、三回以上のものはswitchを使いましょう。10回を超える場合は、やはり配列やjsonオブジェクトを使ってインデックスで検索しましょう。
9.循環配列の順序が低いから高いまで、または高いから低いまでに差がないなら、やはり高いから低いほうがいいです。たとえば、私たちは1つの配列の内容を循環的に出力します。
var arr=[1,2,3,4,5];
var i=0;
while(i<arr.length){
alert(arr[i]);
}// ,
//----------------------------------
var i=arr.length;
while(i--){
alert(arr[i]);
}// , , while , 0 false。
10.for-innサイクルをなるべく少なくして、それをできるだけwhileまたはforサイクルに改造する。11.大きな配列を扱う場合は、duffポリシーに従ってください。
duff戦略:大きい配列の個数を8つのグループに分割し、この8つの単位の配列に対する操作は循環処理ではなく、煩雑な配列要素8行のコードを書くことを恐れず、大きな配列操作の性能を向上させます。
12.大きな配列の各要素を関数で処理する場合は、タイマーを使用して毎回の操作を保留し、時間設定は50-100 msが合理的です。
理由:単純にループで配列中の各要素を処理すれば、大きな配列であれば、ページの凍結と仮死が発生し、ユーザーに悪い体験をさせます。setTimeoutを使うと、操作毎に一時的に保留されます。javascriptエンジンに他の時間の場所があります。そして、設定された遅延時間の後、Javascriptエンジンがアイドル状態である可能性があります。これらの配列操作をよりよく処理することができます。バックグラウンド動作を仮想するのに相当します。以下はzakasが提案した解決策です。
function chunk(array,func,context){
setTimeout(function(){
var arr=array.shift();
func.call(context,item);
if(array.length>0){
setTimeout(arguments.callee,100);// arguments.callee chunk
}
},100);
}
13.iframeを使う時はwindow onloadの渋滞に注意する理由:iframeのロードはwindow onloadをブロックします。いくつかのwindow unloadイベントにロードされたコードはユーザーがページを閉じる時に実行されないかもしれません。ですから、window onloadの時間が発生する時に動的にsrc属性を設定したほうがいいです。
PS:iframeを使わなくてもいいです。
14.CSS選択子の最適化
CSS選択子の読み方は右から左までなので、できるだけ右側のルールを詳しく書いてください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。