1.js 파일 로딩 위치 HTML 파일에서는 태그를 <head> 영역에 추가할 수 있습니다. JavaScript 실행 및 UI 렌더링의 단일 스레드 이유를 고려하여 js 파일이 로드되면 페이지는 js 파일이 완전히 로드되어 실행될 때까지 기다렸다가 계속 수행합니다. 작업. 그런 다음 문제가 발생합니다. 페이지가 비어 있거나 멈춰 있을 수 있습니다. 프론트엔드 개발자로서 요구사항을 실현하는 것뿐만 아니라 고품질의 사용자 경험을 제공하는 것도 중요합니다. 그렇다면 이 문제를 해결하기 위해 제가 생각한 두 가지 해결책은 다음과 같습니다. </p> <p>1. 페이지가 렌더링되기 전에 js 파일을 로드하고 컴파일해야 한다는 특별한 요구 사항이 없으면 js 파일을 </body> 콘텐츠가 페이지에 표시됨) CSS 파일은 여전히 <head> 영역에 배치됩니다(아무도 지저분한 레이아웃이 있는 페이지를 보고 싶어하지 않습니다). 이렇게 하면 사용자는 빈 페이지 대신 레이아웃 페이지를 볼 수 있습니다. 그러면 일부 사람들은 다음과 같이 지적할 것입니다. 데이터는 js 요청을 통해 로드되어야 합니다. 데이터 로딩을 정렬할 수 있으며, 긴급하게 필요한 인터페이스는 먼저 실행하고, 필요하지 않은 인터페이스는 동시에 간단한 로딩 애니메이션이나 프롬프트를 만들 수 있습니다. </p> <p>2. 이러한 js 파일이 페이지 콘텐츠를 더 잘 표시하기 위해 먼저 실행되어야 한다고 지정하는 경우 첫 번째 js 또는 페이지에 흥미롭거나 귀여운 애니메이션 장면을 추가할 수 있습니다. 이는 또한 사용자를 기다리는 지루함을 더 잘 피할 수 있으며, 아마도 사용자는 로딩 애니메이션에 더 관심을 갖게 되어 프로젝트의 사용자 경험을 향상시킬 수 있습니다. </p> <p><span style="color: #800000"><strong>최종 권장사항: </strong></span> 사용자 경험을 향상하려면 </body> 태그 앞에 <script> 태그를 최대한 배치하세요. </p> <p><strong>2.js 파일 병합</strong><br> 많은 팀 개발에서는 서로 다른 기능을 가진 코드 블록을 서로 다른 js 파일에 배치할 수 있으므로 개발 프로세스 중에 모든 사람이 함께 작업하여 코드를 작성하는 것이 더 편리합니다. 결국 해당 폴더나 파일만 찾으면 됩니다. 하나의 방법 대신 매우 긴 문서에서 방법을 찾으십시오. 이는 실제로 팀 개발의 효율성을 향상시키고 새로운 사람들이 2차 개발 및 유지 관리를 더 쉽게 수행할 수 있게 해줍니다. 그렇다면 이 문제를 페이지 성능에 적용하는 것은 어떨까요? 이것이 바로 책에 명시된 문제입니다. 각 HTTP 요청은 추가적인 성능 오버헤드를 가져오므로 단일 100KB 파일을 다운로드하는 것이 4개의 25KB 파일을 다운로드하는 것보다 빠릅니다.</p> <p>100KB 파일 1개를 다운로드하는 것이 25KB 파일 4개를 다운로드하는 것보다 빠르며, 개발 과정에서 각 파일을 구분하는 데 큰 이점이 있으므로 병합 문제는 개발이 완료된 후에 처리될 것으로 믿습니다. 지금은 프론트엔드 도구가 너무 많으니 익숙한 압축을 사용하세요~<br> 지연 로딩 및 비동기 로딩을 위해 파일을 로드할 때 defer 및 async 속성을 사용할 수도 있다는 점을 간략하게 언급하겠습니다. 최신 브라우저에서는 대부분이 이미 defer 속성을 지원하지 않습니다. 특별한 문제가 있을지는 모르겠습니다. 관심 있는 친구들은 이 지식 포인트를 스스로 구글에 검색해 볼 수 있는데 여기서는 간단히 언급하겠습니다. </p> <p>현재 대부분의 프레임워크는 지연 로딩과 주문형 로딩도 지원합니다. </p> <p><strong>3. 더 빠른 데이터 액세스</strong></p> <p>브라우저의 경우 식별자 위치가 깊을수록 읽고 쓰는 속도가 느려집니다(프로토타입 체인의 경우에도 마찬가지). 이해하기 어렵지 않을 겁니다. 간단한 비유는 다음과 같습니다. 식료품점이 집에서 멀수록 간장을 만드는 데 시간이 더 걸립니다... 장난꾸러기야, 간장을 만드는 데 시간이 너무 오래 걸리면 야채가 불타버릴거야 -.-~ </p> <p>현재 함수 내에서 변수 값을 여러 번 사용해야 하는 경우 먼저 로컬 변수를 사용하여 저장할 수 있습니다. </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> //修改前 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 }; }; </pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p><strong>4. DOM 연산 최적화</strong></p> <p>우리 모두 알고 있듯이 DOM 작업은 JavaScript 실행보다 훨씬 더 많은 성능을 소비합니다. DOM 작업을 피할 수는 없지만 이 작업의 성능 소비를 최대한 줄이려고 노력할 수 있습니다. </p> <p>코드를 통해 설명해 보겠습니다. </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> function innerLi_s(){ var i = 0; for(;i<20;i++){ document.getElementById("Num").innerHTML="A"; //进行了20次循环，每次又有2次DOM元素访问：一次读取innerHTML的值，一次写入值 }; }; </pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p>위 방법을 다시 작성하세요. </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> 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的值，一次写入值 }; </pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p><strong>5. Dom 다시 그리기 및 재배열 줄이기 </strong></p> <p>요소 레이아웃 변경, 콘텐츠 추가, 삭제 또는 브라우저 창 크기 변경으로 인해 리플로우가 발생하고 글꼴 색상이나 배경 색상이 변경되면 다시 그려집니다. <br /> 다음 코드와 유사한 작업에 대해서는 대부분의 최신 브라우저가 최적화되어 있다고 합니다(재배열 버전 1개로 최적화). </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> //修改前 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次重排版 </pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p>针对多重操作，以下三种方法也可以减少重排版和重绘的次数：</p> <p>1.Dom先隐藏，操作后再显示 2次重排 (临时的display:none)</p> <p>2.document.createDocumentFragment() 创建文档片段处理，操作后追加到页面 1次重排</p> <p>3.var newDOM = oldDOM.cloneNode(true)创建Dom副本，修改副本后oldDOM.parentNode.replaceChild(newDOM,oldDOM)覆盖原DOM 2次重排</p> <p><strong>六、循环的优化</strong></p> <p>这应该是较多人都知道的写法了，简单带过即可(后面还是用代码+注释形式说明)~</p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> //修改前 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]); } </pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p><strong>七、合理利用二进制</strong></p> <p>如：对2取模，则偶数最低位是0，奇数最低位是0，与1进行位与操作的结果是0，奇数的最低位是1，与1进行位与操作的结果是1。</p> <p>代码如下：</p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> .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> </pre><div class="contentsignin">로그인 후 복사</div></div> </div> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> 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"; } }; </pre><div class="contentsignin">로그인 후 복사</div></div> <br> </div> <p>虽说现代浏览器都已经做的很好了，但是本兽觉得这是自己对代码质量的一个追求。并且可能一个点或者两个点不注意是不会产生多大性能影响，但是从多个点进行优化后，可能产生的就会质的飞跃了</p> <p>JavaScript 总结的这几个提高性能知识点，希望大家牢牢掌握。</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
