수년 동안 Javascript는 웹 애플리케이션 개발에서 중요한 역할을 해왔지만 많은 개발자는 종종 일부 성능 지식을 무시하는 경우가 많습니다. 특히 컴퓨터 하드웨어가 지속적으로 업그레이드됨에 따라 개발자는 Javascript의 성능 최적화에 대해 점점 더 우려하고 있습니다. 웹페이지의 실행 효율성에 명백한 영향을 미칩니다. 그러나 어떤 경우에는 최적화되지 않은 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; }
참고: 실제로 단일 기능의 시간 차이는 작습니다. 여기서는 성능 비교를 위해 누적 시간을 사용하여 다양한 PC 구성이나 브라우저에 따라 테스트 결과에 차이가 있을 수 있습니다.
위 내용은 고성능 자바스크립트 코드 작성을 위한 N가지 제안입니다. 모두에게 도움이 되길 바랍니다.