고성능 자바스크립트 코드 작성을 위한 N가지 팁_javascript Tips

수년 동안 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가지 제안입니다. 모두에게 도움이 되길 바랍니다.