JavaScript 성능_javascript 기술 향상에 대한 지식 포인트 요약

1.js 파일 로딩 위치

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

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

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

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

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

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

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

3. 더 빠른 데이터 액세스

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

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

 //修改前
 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
   };
 };

4. 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的值，一次写入值
 };

5. Dom 다시 그리기 및 재배열 줄이기

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

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

针对多重操作，以下三种方法也可以减少重排版和重绘的次数：

1.Dom先隐藏，操作后再显示 2次重排 (临时的display:none)

2.document.createDocumentFragment() 创建文档片段处理，操作后追加到页面 1次重排

3.var newDOM = oldDOM.cloneNode(true)创建Dom副本，修改副本后oldDOM.parentNode.replaceChild(newDOM,oldDOM)覆盖原DOM 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，与1进行位与操作的结果是0，奇数的最低位是1，与1进行位与操作的结果是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 总结的这几个提高性能知识点，希望大家牢牢掌握。