> 웹 프론트엔드 > JS 튜토리얼 > 고성능 자바스크립트 코드 작성을 위한 N가지 팁_javascript Tips

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

WBOY
풀어 주다: 2016-05-16 15:36:51
원래의
974명이 탐색했습니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿