Webプログラムの実行効率を向上させる最適化手法のまとめ
3655 ワード
1.DOMの使用はできるだけ避ける.DOMを繰り返し使用する場合は、まずDOMに対する参照をJavaScriptローカル変数に保存してから使用します.document.creat Element/apendChild()メソッドをinnersを設定する方法を使用して置換します.
2.eval()に問題があり、new Function()の構造関数も、それらの使用をできるだけ避ける.
3.with文の使用を拒否します.この変数を参照すると、このような名前空間を追加的に検索することができます.Withのコードはコンパイルの時期には全く未知です.
4.for()を使って、for...inサイクルを循環します.for...inサイクルはサイクルを開始する前にScriptエンジンによって、循環可能なすべての属性を含むListを作成する必要があるので、もう一回チェックしてください.
5.try-catch文を循環外に置いて、サイクルの中に入れないでください.異常が少ないので、外に置いて毎回実行しないようにしてください.
6.聖書でもこれに言及しています.全体的に見ないでください.大域変数のライフサイクルはシナリオ全体のライフサイクルを貫き、ローカル変数の存在範囲はローカル名前空間の破壊とともに消失する.関数または他の場所でグローバル変数を参照すると、スクリプトエンジンは全体のグローバル名前空間を検索する必要があります.
7.fullName+='John'fullName+='Holdings'実行速度はフルネーム+='ジョン'+'Holdings'より速いです.
8.複数の文字列を連結する必要があるなら、彼らを行列に作って、join()方法を呼び出してこの操作を実現したほうがいいです.この方法はHTMLフラグメントを生成する時に特に有効である.
9.簡単なタスクについては、基本的な動作方式を使用して実装したほうがいいです.例えばval 110.関数の参照をパラメータとしてsetTimeout()とset Interval()に渡すと、関数名を文字列パラメータとして伝えるより優れています.例えば、setTimeout(「someFun()」1000)の実行効率は、setTimeout(someFun,1000)より遅いです.
11.巡回操作を行う場合はDOM操作は避けてください.この方法で得られたDOM元素列は,getElementsByTagName()のように動的である.あなたがまだそれに対して遍歴していないかもしれない時、それはすでに変えられました.これは死の循環を引き起こす可能性がある.
12.オブジェクトのメンバー(属性または方法)を繰り返し操作する場合は、それらの参照を先に記憶します.例えば、var getTags=document.getElements ByTagName;get Tags('div')
13.任意のコード段において、局所変数の範囲外にこの局所変数の参照が格納されます.例えば
14.for(var i=0;i＜someAray.length;i＋＋)の実行効率はfor(var i=0、loopLen=someAray.length;i＜loopLen;i＋)より遅い.
15.HTTPヘッダ情報にキャッシュ制御の有効期限と最大生存時間マークを追加します.
16.CSSを最適化する.@import方式ではなく方式を使います.
17.CSS技術を使って画像資源を最適化する.オフ
18.GZip方式で.jsと.cssファイルを圧縮する.Apacheを使用すれば、httaccessに圧縮方式を設定し、あなたのHTML、XMLとJSONも同時に圧縮されます.
19.JavaScript圧縮ツールを使用する.YUIとJSMinを使う以外に、Google Cloureを試してみてもいいです.http://closure-compiler.appspot.com/home.
20.各ページの様々なリソースを最適化し、それらを各サブドメインに分割して、並列にダウンロードすることができる.
21.CSSスタイルテーブルをページの一番上に置くことで、IEを含むブラウザの解析が容易になります.
22.DOM構造をできるだけ簡単に維持したほうがいいです.DOMの体積は,検索,遍歴,DOM変化のような関連する操作効率に影響を与える.Dcument.getElementsByTagName('*').lengthはこの値が小さいほどいいです.
23.使用するセレクタに注意してください.例えば、ulの直接的なサブ要素を取得したいなら、jQuery("ul"li")を使って、jQuery("ul li")を使わないでください.
24.要素の視認性を切り替える時、element.css()の速度はelement.hide()とelement.addClass(’myHddenClass’)より速いと覚えてください.一つの循環の中でない限り、私はelement.addClassを選んで、コードをもっと簡潔にします.inline CSSとJavaScriptを使わないでください.
25.DOMに対する参照変数を使用した後、NULLにします.
26.AJAXを使う時、GETの実行効率はPOSTより高いです.だから、できるだけGET方式を使います.ただ注意してください.IEはGETで2 Kのデータを送るだけです.
27.脚本アニメに気をつける.ハードウェアのサポートがないので、動画の進行が遅いです.実際の価値がないアニメの効果を使うのは避けたいです.
28.あなたのbackground-inageがこの写真の容器に小さすぎると、background-repeatを使わないでください.背景画像を何回も塗りつぶしてこそ背景が満たされます.background-repeat属性をbackground-mageとrepeat-xまたはrepeat-yに設定して背景を塗りつぶす効果がある方法は賢明ではありません.このような充填方式の効率は特に低いです.background-inageを作るために十分大きい写真を使ってみてください.そしてbackground-repeatを使ってください.
29.レイアウトの時は<テーブル>を使わないでください.ブラウザが完全にそれを描く前に何度も繰り返し描画する必要があります.DOMの中<テーブル>は珍しいので、後で出力すると前の出力の表示効果に影響を与える要素です.テーブルのデータに対して、テーブルのデータを使ってもいいです.これはより効果的な現実的アルゴリズムであり、CSS 2.1技術によって説明されている.このような書き方は表の一行の出力を可能にする.
30.できるだけオリジナルJavaScriptを使う.JavaScriptフレームの使用を制限します.
2.eval()に問題があり、new Function()の構造関数も、それらの使用をできるだけ避ける.
3.with文の使用を拒否します.この変数を参照すると、このような名前空間を追加的に検索することができます.Withのコードはコンパイルの時期には全く未知です.
4.for()を使って、for...inサイクルを循環します.for...inサイクルはサイクルを開始する前にScriptエンジンによって、循環可能なすべての属性を含むListを作成する必要があるので、もう一回チェックしてください.
5.try-catch文を循環外に置いて、サイクルの中に入れないでください.異常が少ないので、外に置いて毎回実行しないようにしてください.
6.聖書でもこれに言及しています.全体的に見ないでください.大域変数のライフサイクルはシナリオ全体のライフサイクルを貫き、ローカル変数の存在範囲はローカル名前空間の破壊とともに消失する.関数または他の場所でグローバル変数を参照すると、スクリプトエンジンは全体のグローバル名前空間を検索する必要があります.
7.fullName+='John'fullName+='Holdings'実行速度はフルネーム+='ジョン'+'Holdings'より速いです.
8.複数の文字列を連結する必要があるなら、彼らを行列に作って、join()方法を呼び出してこの操作を実現したほうがいいです.この方法はHTMLフラグメントを生成する時に特に有効である.
9.簡単なタスクについては、基本的な動作方式を使用して実装したほうがいいです.例えばval 1
11.巡回操作を行う場合はDOM操作は避けてください.この方法で得られたDOM元素列は,getElementsByTagName()のように動的である.あなたがまだそれに対して遍歴していないかもしれない時、それはすでに変えられました.これは死の循環を引き起こす可能性がある.
12.オブジェクトのメンバー(属性または方法)を繰り返し操作する場合は、それらの参照を先に記憶します.例えば、var getTags=document.getElements ByTagName;get Tags('div')
13.任意のコード段において、局所変数の範囲外にこの局所変数の参照が格納されます.例えば
function foo(arr) {
var a = ’something’;
// ‘a’ , 。
for (var i = 0, j = a, loopLen = arr.length; i < loopLen; i++) {
//do something
}
} 14.for(var i=0;i＜someAray.length;i＋＋)の実行効率はfor(var i=0、loopLen=someAray.length;i＜loopLen;i＋)より遅い.
15.HTTPヘッダ情報にキャッシュ制御の有効期限と最大生存時間マークを追加します.
16.CSSを最適化する.@import方式ではなく方式を使います.
17.CSS技術を使って画像資源を最適化する.オフ
18.GZip方式で.jsと.cssファイルを圧縮する.Apacheを使用すれば、httaccessに圧縮方式を設定し、あなたのHTML、XMLとJSONも同時に圧縮されます.
AddOutputFilterByType DEFLATE text/html text/css text/
plain text/xml application/x-javascript application/json19.JavaScript圧縮ツールを使用する.YUIとJSMinを使う以外に、Google Cloureを試してみてもいいです.http://closure-compiler.appspot.com/home.
20.各ページの様々なリソースを最適化し、それらを各サブドメインに分割して、並列にダウンロードすることができる.
21.CSSスタイルテーブルをページの一番上に置くことで、IEを含むブラウザの解析が容易になります.
22.DOM構造をできるだけ簡単に維持したほうがいいです.DOMの体積は,検索,遍歴,DOM変化のような関連する操作効率に影響を与える.Dcument.getElementsByTagName('*').lengthはこの値が小さいほどいいです.
23.使用するセレクタに注意してください.例えば、ulの直接的なサブ要素を取得したいなら、jQuery("ul"li")を使って、jQuery("ul li")を使わないでください.
24.要素の視認性を切り替える時、element.css()の速度はelement.hide()とelement.addClass(’myHddenClass’)より速いと覚えてください.一つの循環の中でない限り、私はelement.addClassを選んで、コードをもっと簡潔にします.inline CSSとJavaScriptを使わないでください.
25.DOMに対する参照変数を使用した後、NULLにします.
26.AJAXを使う時、GETの実行効率はPOSTより高いです.だから、できるだけGET方式を使います.ただ注意してください.IEはGETで2 Kのデータを送るだけです.
27.脚本アニメに気をつける.ハードウェアのサポートがないので、動画の進行が遅いです.実際の価値がないアニメの効果を使うのは避けたいです.
28.あなたのbackground-inageがこの写真の容器に小さすぎると、background-repeatを使わないでください.背景画像を何回も塗りつぶしてこそ背景が満たされます.background-repeat属性をbackground-mageとrepeat-xまたはrepeat-yに設定して背景を塗りつぶす効果がある方法は賢明ではありません.このような充填方式の効率は特に低いです.background-inageを作るために十分大きい写真を使ってみてください.そしてbackground-repeatを使ってください.
29.レイアウトの時は<テーブル>を使わないでください.ブラウザが完全にそれを描く前に何度も繰り返し描画する必要があります.DOMの中<テーブル>は珍しいので、後で出力すると前の出力の表示効果に影響を与える要素です.テーブルのデータに対して、テーブルのデータを使ってもいいです.これはより効果的な現実的アルゴリズムであり、CSS 2.1技術によって説明されている.このような書き方は表の一行の出力を可能にする.
30.できるだけオリジナルJavaScriptを使う.JavaScriptフレームの使用を制限します.