JavaScript 성능 향상을 위한 몇 가지 지식 포인트에 대한 자세한 설명 및 요약

JavaScript 성능을 향상하기 위한 여러 지식 포인트에 대한 자세한 요약:

저는 "고성능 JavaScript"라는 책의 대부분을 읽는 데 시간을 보냈습니다. 얼마 전에 책을 읽고 프로젝트 작업을 시작했습니다. 가장 바쁜 한 주가 지나서 기쁩니다. 이번달은 시간이 부족해서 공부노트를 많이 못썼네요..가장 힘든 한주를 보내고 이틀간 심야 독서에 불을 붙였습니다... 결국 살아서 이 책을 닫았습니다.. .

이제 다 읽었으니 배워야 할 것이 있습니다. 먼저 이 책에 대한 내 견해를 말씀드리겠습니다. 전체적으로 내용은 좋지만, 조금 오래된 느낌이 듭니다. (프론트엔드 초보자로서 제 수준이 제한되어 진정한 의미를 이해하지 못할 수도 있습니다.) . 이 책을 읽는 과정에서 테스트용 코드도 많이 작성했고, 이 책에서 주장하는 쓰기 방법과 원래 대중적인 쓰기 방법의 실행에 대한 중단점 추적도 수행하여 발생할 수 있는 문제를 이해했습니다. 물론, 중단점을 설정하고 실행을 따라가도 보이지 않는다면 어쩔 수 없습니다. 책에 나오는 지식 포인트에 관해서는 제가 개인적으로 추천하는 지식 포인트를 간략하게 요약했습니다. 물론~ 마음에 들지 않으면 비판하지 마세요.

js 파일의 로드 위치

HTML 파일에서는 3f1c4e4b6b16bbbd69b2ee476dc4f83a ;본문> 지역. JavaScript 실행 및 UI 렌더링의 단일 스레드 이유를 고려하여 js 파일이 로드되면 페이지는 js 파일이 완전히 로드되어 실행될 때까지 기다렸다가 계속 수행합니다. 작업. 그런 다음 문제가 발생합니다. 페이지가 비어 있거나 멈춰 있을 수 있습니다. 프론트엔드 개발자로서 요구사항을 실현하는 것뿐만 아니라 고품질의 사용자 경험을 갖는 것도 중요합니다. 그렇다면 사용자의 지루한 기다림을 없애기 위해 제가 생각한 두 가지 해결책이 있습니다.

1.js 파일에 특별한 요구사항이 없는 경우, 페이지에서 렌더링되어야 합니다. 이전에 로드 및 컴파일된 경우 js 파일을 36cc49f0c466276486e50c850b7e4956 태그 앞(즉, 모든 페이지에 표시되는 콘텐츠 뒤)에 배치하도록 선택합니다. 93f0f5c25f18dab9d176bd4f6de5d30e 영역의 css 파일(아무도 보고 싶어하지 않음) 레이아웃이 복잡한 페이지) 이렇게 하면 사용자는 빈 페이지 대신 레이아웃 페이지를 볼 수 있습니다. 그러면 일부 사람들은 다음과 같이 지적할 것입니다. 데이터는 js 요청을 통해 로드되어야 합니다. 데이터 로딩을 정렬할 수 있으며, 긴급하게 필요한 인터페이스는 먼저 실행하고, 필요하지 않은 인터페이스는 동시에 간단한 로딩 애니메이션이나 프롬프트를 만들 수 있습니다.

2. 이 js 파일이 페이지 콘텐츠를 더 잘 표시하기 위해 먼저 실행되어야 한다고 지정한 경우 첫 번째 js 또는 페이지에 작은 로딩 애니메이션을 삽입할 수 있습니다. 흥미롭거나 귀여운 애니메이션 장면. 이는 또한 사용자를 기다리는 지루함을 더 잘 피할 수 있으며, 아마도 사용자는 로딩 애니메이션에 더 관심을 갖게 되어 프로젝트의 사용자 경험을 향상시킬 수 있습니다.

최종 권장 사항: 사용자 경험을 향상하려면 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 36cc49f0c466276486e50c850b7e4956 태그 앞에 배치하세요.

js 파일 병합을 위해

많은 팀 개발에서 우리는 개발 과정에서 코드 작성 시 모든 사람의 협력을 촉진하기 위해 다양한 기능을 가진 코드 블록을 다양한 js 파일에 배치할 수 있습니다. 결국 긴 파일에서 메소드를 찾는 대신 해당 폴더나 파일만 찾으면 더 편리합니다. 이는 실제로 팀 개발의 효율성을 향상시키고 새로운 사람들이 2차 개발 및 유지 관리를 더 쉽게 수행할 수 있게 해줍니다. 그렇다면 이 문제를 페이지 성능에 적용하는 것은 어떨까요? 책에 명시된 바와 같이 이것이 바로 문제입니다. 각 HTTP 요청은 추가적인 성능 오버헤드를 가져오므로 단일 100KB 파일을 다운로드하는 것이 4개의 25KB 파일을 다운로드하는 것보다 빠릅니다.

100KB 파일 1개를 다운로드하는 것은 4개의 25KB 파일을 다운로드하는 것보다 빠르고, 개발 과정에서 각 파일을 구별하는 것이 큰 이점이 있으므로 병합 문제는 개발이 완료된 후에 처리할 것입니다. 이제 프런트 엔드 도구가 너무 많아서 익숙한 압축을 사용하면 됩니다~
여기에 간략하게 언급되어 있으며, 최신 브라우저에서 지연 로딩 및 비동기 로딩을 위해 파일을 로드할 때 defer 및 async 속성을 사용할 수도 있습니다. , 대부분 이미 defer 속성을 지원하고 있는데, 아직은 익숙하지 않아서 특별한 문제가 있을지 모르겠습니다. 관심 있는 친구들은 이 지식 포인트를 스스로 구글에 검색해 볼 수 있는데 여기서는 간단히 언급하겠습니다.

현재 대부분의 프레임워크는 지연 로딩과 주문형 로딩도 지원합니다.

빠른 데이터 액세스

브라우저의 경우 식별자가 더 깊게 위치할수록 읽고 쓰는 속도가 느려집니다(이 시점에서는 프로토타입 체인도 마찬가지입니다). 이해하기 어렵지 않을 것입니다. 간단한 비유는 다음과 같습니다. 식료품점이 집에서 멀수록 간장을 만드는 데 시간이 더 걸립니다... 이 장난꾸러기야, 간장을 만드는 데 시간이 너무 오래 걸리면, 야채가 탄다 -.-~

현재 함수 내에서 변수 값을 여러 번 사용해야 하는 경우 먼저 로컬 변수를 사용하여 저장할 수 있습니다. 사례는 다음과 같습니다.

  //修改前
  function showLi(){
      var i = 0;
      for(;i<document.getElementsByTagName("li").length;i++){    //一次访问document
          console.log(i,document.getElementsByTagName("li")[i]);  //三次访问document
      };
  };
  //修改后
  function showLi(){
      var li_s = document.getElementsByTagName("li");  //一次访问document
      var i = 0;
      for(;i<li_s.length;i++){
          console.log(i,li_s[i]);  //三次访问局部变量li_s
      };
  };

DOM 작업 최적화

우리 모두 알고 있듯이 DOM 작업은 JavaScript 실행보다 훨씬 더 많은 성능을 소모합니다. DOM 작업을 피할 수는 없지만 이 작업의 성능 소모를 줄이려고 노력할 수는 있습니다.

이 문제를 코드를 통해 설명하겠습니다.

  function innerLi_s(){
      var i = 0;
      for(;i<20;i++){
          document.getElementById("Num").innerHTML="A"; //进行了20次循环，每次又有2次DOM元素访问：一次读取innerHTML的值，一次写入值
      };
  };

위 방법을 적용한 버전:

  function innerLi_s(){
      var content ="";
      var i = 0;
      for(;i<20;i++){
          content += "A";  //这里只对js的变量循环了20次
      };
      document.getElementById("Num").innerHTML += content;  //这里值进行了一次DOM操作，又分2次DOM访问：一次读取innerHTML的值，一次写入值
  };

Dom 다시 그리기 및 리플로우 줄이기

요소 레이아웃이나 콘텐츠 추가, 삭제 또는 브라우저 창 크기 변경으로 인해 리플로우가 발생하고 글꼴 색상이나 배경색이 수정으로 인해 다시 그리기.
다음 코드와 유사한 작업의 경우 대부분의 최신 브라우저가 최적화되었다고 합니다(1개의 재배치 버전으로 최적화):

  //修改前
  var el = document.getElementById("p");
  el.style.borderLeft = "1px"; //1次重排版
  el.style.borderRight = "2px"; //又1次重排版
  el.style.padding = "5px"; //还有1次重排版
  //修改后
  var el = document.getElementById("p");
  el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //1次重排版

여러 작업, 다음 세 가지 방법으로도 리플로우 및 다시 그리기 횟수를 줄일 수 있습니다.

1. 먼저 Dom을 숨긴 다음 작업 후 2번 재배열을 위해 표시합니다(임시 표시: 없음)

2 .document.createDocumentFragment()는 문서 조각을 생성하고 처리합니다. 작업 후 페이지에 추가되고

3.var newDOM = oldDOM.cloneNode(true)가 Dom의 복사본을 생성하면 다시 정렬됩니다. , 그리고 복사본을 수정한 후 원본 DOM을 덮는 oldDOM.parentNode.replaceChild(newDOM, oldDOM) 2배 재배치

루프 최적화

더 많은 분들이 아시는 작성법이 되어야 하고, 그냥 넘어가세요(여전히 코드 + 나중에 사용) 댓글 양식 설명)~

  //修改前
  var i = 0;
  for(;i<arr.lengthli++){  //每次循环都需要获取数组arr的length
      console.log(arr[i]);
  }
  //修改后
  var i = 0;
  var len = arr.length;  //获取一次数组arr的length 
  for(;i<len;i++){
      console.log(arr[i]);
  }
  //or
  var i = arr.length;;
  for(;i;i--){
      console.log(arr[i]);
  }

바이너리의 합리적인 사용

예: 모듈로 2, 짝수 중 최하위 비트가 0, 홀수 중 최하위 비트가 0이 0이면 1을 비트 단위로 AND 연산한 결과가 0, 홀수 중 최하위 비트가 1, 비트 단위로 AND 연산을 한 결과 1과의 AND 연산은 1입니다.

코드는 다음과 같습니다:

  .odd{color:red}
  .even{color:yellow}

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

  var i = 0;
  var lis = document.getElementsByTagName("li");
  var len = lis.length;
  for(;i<len;i++){
      if(i&1){
          lis[i].className = "even";
      } else{
          lis[i].className = "odd";
      }
  };

최신 브라우저가 잘 해냈지만 이것이 제가 추구하는 코드 품질이라고 생각합니다. 그리고 어쩌면 한두 가지 점을 주의하지 않으면 성능에 큰 영향을 미치지 않을 수도 있지만, 여러 점에서 최적화를 하고 나면 질적인 도약이 나올 수도 있어요~

위 내용은 JavaScript 성능 향상을 위한 몇 가지 지식 포인트에 대한 자세한 설명 및 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!