長年にわたり、JavaScript は Web アプリケーション開発において重要な役割を果たしてきましたが、多くの開発者はパフォーマンスに関する知識を無視することが多く、特にコンピューター ハードウェアの継続的なアップグレードに伴い、開発者は Javascript のパフォーマンスの最適化についてますます懸念を抱いています。 Web ページの実行効率に明らかな影響を与えます。ただし、場合によっては、最適化されていない Javascript コードがユーザー エクスペリエンスに影響を与えることは避けられません。したがって、ハードウェアの性能が大幅に向上した現代においても、JavaScript コードを記述する際には、JavaScript の仕様に従い、ある程度の性能知識に注意を払うことができれば、コードの保守性の向上や性能の最適化に大きなメリットが得られます。 。
高パフォーマンスの Javascript コードを記述するためのいくつかの提案を示します:
1. 配列へのアクセスには for-in ループを使用しないようにします。ループには for ループを使用することをお勧めします。
function foo() { var i, b, c=[,,]; for (i in c) { b = c[i]; if(b === "") return b; } } //性能更好 function foo() { var i, b, c=[,,]; for (i=;i<c.length;i++) { b = c[i]; if(b === "") return b; } }
2. オブジェクト、特にリソースを消費する DOM アクセスをキャッシュすることをお勧めします:
//c.length没有缓存,每次迭代都要计算一下数组的长度 function foo() { var i, b, c=[,,]; for (i=;i<c.length;i++) { b = c[i]; if(b === "") return b; } } //性能更好,第一次将数组的长度缓存到变量l中,第二次及后续的循环无需计算数组长度 function foo() { var i, b, c=[,,],l; for (i=,l=c.length;i<l;i++) { b = c[i]; if(b === "") return b; } } //document.getElementById('info')没有缓存,每次都要遍历DOM function foo() { var e; document.getElementById('info').innerHTML="call "; document.getElementById('info').innerHTML="call "; } //性能更好,第二次无需访问DOM function foo() { var e=document.getElementById('info'); e.innerHTML="call "; e.innerHTML="call "; }
3. 関数内であまり深くネストされた判断を行わないことをお勧めします:
//函数内嵌套判断语句过多 function foo1() { var r={}; r.data={}; r.data.myProp=2; if (r) { if (r.data) { if (r.data.myProp) { //逻辑处理 } else { //逻辑处理 } } } } //性能更好 function foo2() { var r={}; r.data={}; r.data.myProp=2; if (!r) return; if (!r.data) return; if (r.data.myProp) { //逻辑处理 } else { //逻辑处理 } }
4. 循環参照を回避し、メモリ リークを防ぎます:
//需要jQuery function foo(e,d) { $(e).on("click", function() { //对d进行逻辑处理 cbk(d); } }); } //打破循环! function foo(e, d) { $(e).on("click", cbk(d)); } function cbk (d) { //逻辑处理 }
5. 外部変数を汚染するため、関数内で宣言されていない変数を返さないことをお勧めします:
function foo(a, b) { r = a + b; return r; //r未声明,则创建了一个全局变量 }
6. var は複数行で記述することを推奨します。
//自己测试结果是foo快,但也有一种观点是foo快 function foo() { var c = ; var sum=; var d = ; var e; } function foo() { var c = ,sum=, d = , e; }
上記の内容は、高パフォーマンスの Javascript コードを作成するための N つの提案であり、皆様のお役に立てば幸いです。