<strong>Js의 차단성</strong> <br>브라우저에서 Javascript의 성능 문제는 가장 중요한 사용성 문제일 수 있습니다<br>Js의 차단성 브라우저는 UI 프로세스를 처리하기 위해 단일 프로세스를 사용하며, Js 실행<br>임베디드든 외부든 페이지가 수정될 수 있으므로 즉시 다운로드하여 실행하세요<br><br><strong>페이지 수명주기의 개념</strong> <br>다운로드 시간 및 실행 시간 <br>헤드에 스크립트와 링크 본문이 로드되기 전까지는 아무 것도 출력되지 않으므로 빈 페이지가 표시됩니다 <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="51820" class="copybut" id="copybut51820" onclick="doCopy('code51820')"><u>코드 복사 </u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code51820"> <br><script type="text/javascript"> <br>document.write("날짜는" (new Date().toDateString() ) ; 여러 js 및 기타 리소스가 있지만 여전히 이미지 다운로드에 영향을 미칩니다<br>결론, 로드하려면 스크립트를 맨 아래에 두세요<br> </div> <br>스크립트 구성<br> <br>지연 최소화 목표 time<br>문제 <br>여러 스크립트 파일을 참조하고 여러 스크립트 태그를 삽입하면<strong>각 http 요청은 성능 오버헤드를 가져옵니다</strong>링크 바로 다음 스크립트는 오류가 발생하여 CSS가 로드될 때까지 기다립니다. 가장 정확한 묘사를 얻기 위해<br>결론: 스크립트 태그 수 줄이기<br>여러 js 파일을 하나로 병합, 패키징 도구<br>Yahoo의 병합 프로세서<br><br><br>비차단 스크립트 <br> <br>js는 http 요청 처리, 인터페이스 업데이트 등 브라우저의 특정 프로세스를 차단하는 경향이 있습니다. 이는 가장 중요한 성능 문제입니다. 따라서 js 파일의 크기를 줄이고 http 요청 수를 제한해야 합니다<br> 하지만 풍부한 기능과 코드 양 사이에 모순이 있어 단일 파일로 병합하면 브라우저가 오랫동안 잠기게 됩니다. , 따라서 자바스크립트 파일을 점진적으로 로드해야 합니다 <br>핵심 사항: 페이지가 로드된 후 자바스크립트 파일을 로드합니다 <strong></strong><br>1. 스크립트 로드 지연 <br> <br>defer 속성 <br> 다운로드할 js 파일이 dom 작업을 수행하지 않는 경우 defer 이 속성은 파일을 병렬로 다운로드할 수 있도록 하여 즉시 실행되지 않지만 onload 이벤트 후에 실행되는 데 적합합니다. 모든 스크립트 태그 <br><strong> 2. 동적 로딩 스크립트 </strong> <br>함수 <br><br><strong></strong><br>코드 복사 <br><div class="codetitle"> <span> 코드 <a style="CURSOR: pointer" data="43534" class="copybut" id="copybut43534" onclick="doCopy('code43534')"><u> </u>function loadScript(url,callback){ </a>var script = document.createElement('script') </span>script.type = 'text/javascript'; 🎜>if(script.readyState) { //IE </div>script.onreadyStatechange = function() { <div class="codebody" id="code43534"> if(script.readyState == 'loaded' || script.readyState == 'complete') { <br>script.onreadyStatechange = null; <br> callback(); <br>} <br>} else { <br>script.onload = function(){ <br>callback(); <br>} <br><br> <br>여기서 브라우저 호환성에 주의하세요. <br>이와 같이 로드해야 할 파일이 여러 개 있으면 <br><br><br><br><br>코드 복사</div> <br><br> 코드는 다음과 같습니다.<br><div class="codetitle"> <span>loadScript('file1.js', function(){ <a style="CURSOR: pointer" data="21507" class="copybut" id="copybut21507" onclick="doCopy('code21507')">loadScript ('file2.js',function(){ <u>}) </u>}) </a></span> </div> <div class="codebody" id="code21507">3.XHR 스크립트 삽입<br> <br><br><br><br> </div>코드 복사<br><strong></strong> 코드는 다음과 같습니다.<br><div class="codetitle"> <span>var xhr = new XMLHttpRequest() <a style="CURSOR: pointer" data="61028" class="copybut" id="copybut61028" onclick="doCopy('code61028')">xhr.open('get ','file1.js',true); <u>xhr.onreadystatechange= function(){ </u> if(xhr.readyState == 4) { </a> if(xhr.status >= 200 && xhr. status <=300 || xhr.status==304) { </span>var oScript = document.createElement('script') </div> oScript.text = xhr.responseText <div class="codebody" id="code61028"> Document.body.appendChild( oScript); <br>} <br>} <br>} <br><br> <br>304는 캐시에서 텍스트를 가져올 때 ajax를 사용함을 나타냅니다. 콘텐츠를 텍스트에 넣기 <br><br><br> 장점 <br> <br> 우수한 호환성, 비동기식, 단점: 도메인 확장이 불가능하고 CDN에서 콘텐츠를 검색할 수 없음 <br> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
