자바스크립트에서 고성능 로딩 순서를 구현하는 방법

이 글에서는 고성능 JavaScript의 로딩 순서와 실행 원리에 대한 관련 정보를 주로 소개합니다. 이 글은 공부나 업무에 필요한 모든 사람에게 확실한 참고 학습 가치를 제공합니다. 함께 배워봅시다.

머리말

브라우저에서 JavaScript의 성능은 개발자가 직면한 가장 심각한 사용성 문제로 간주될 수 있습니다. 오늘은 고성능 JavaScript의 로드 및 실행에 대한 장을 읽은 후 이에 대해 이야기해 보겠습니다. js의 로딩 순서와 실행 원리를 해결하세요. 아래에서 할 말이 많지 않습니다. 자세한 소개를 살펴보겠습니다.

브라우저가 <script> 태그를 만나면 브라우저는 먼저 시간을 말해야 합니다. 외부 링크의 파일을 다운로드하고 실행하는 동안 페이지 렌더링과 사용자 상호 작용이 완전히 차단됩니다. </script>

스크립트를 넣기에 가장 좋은 위치는 어디인가요?

이 상황은 의심할 여지없이 심각한 성능 문제를 가지고 있습니다. 왜냐하면 스크립트가 페이지 렌더링을 차단하고 페이지 렌더링이 모두 다운로드되어 실행될 때까지 페이지 렌더링이 계속되지 않기 때문입니다. code

첫 번째 js 파일을 다운로드한 후에는 첫 번째 js 파일이 완전히 다운로드될 때까지 두 번째 js 파일이 실행되지 않습니다. 그러나 이제 IE8, Firefox3.5, Safari4 및 Chrome2에서는 모두 js 파일의 병렬 다운로드를 허용합니다. , 안타깝게도 js 다운로드 프로세스는 다음과 같은 다른 리소스의 다운로드를 계속 차단합니다.

스크립트 구성하기

각 <script> 태그는 다운로드 시 페이지 렌더링을 차단하므로 페이지에 포함된 <script> 태그 수를 줄이는 것이 중요합니다. 이와 같이 여러 js 파일을 하나의 js 파일로 병합하고 패키징할 수 있습니다. 장점은 지연 시간을 최소화하면 페이지의 전반적인 성능이 크게 향상된다는 것입니다. 또한 HTTP 요청도 줄일 수 있습니다. <p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/dc82a41b29238b83c4c963701b7747fb-3.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> 일반적으로 100KB 파일 하나를 다운로드하는 것이 25KB 파일 4개를 다운로드하는 것보다 빠릅니다. <p>외부 링크 js 파일이 여러 개 있는 경우 하나의 js 파일로 병합할 수 있습니다.<span style="max-width:90%"><strong><p>비차단 스크립트<p><p>더 큰 js 파일 하나를 다운로드하면 하나의 HTTP 요청만 생성되지만, 브라우저가 오랫동안 정지될 것입니다. 이러한 상황을 방지하려면 js 파일을 페이지에 점진적으로 로드해야 합니다. <p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/dc82a41b29238b83c4c963701b7747fb-4.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><p>Delayed script<span style="max-width:90%"><strong>defer 속성은 이 요소에 포함된 스크립트가 지연될 수 있음을 나타냅니다. 그러나 IE4+ 및 Firefox3.5+ 브라우저에서만 이를 지원합니다<p><p><span style="color: #ff0000">간단히 말하면, defer 메커니즘은 아는 것입니다 DOM 로딩이 완료될 때까지 js 파일을 다운로드하지 마세요. 그러면 브라우저의 다른 프로세스가 차단되지 않습니다.<strong><p> defer 속성을 지원하지 않는 브라우저에서 팝업 순서는 defer, script, load 입니다. <p style="text-align: center">defer 속성을 지원하는 브라우저의 팝업 순서는 script, defer, load<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/dc82a41b29238b83c4c963701b7747fb-5.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>Defer는 onload 이벤트가 실행되기 전에 호출됩니다.<p><p style="max-width:90%"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/8659708c1168fe97e3e14aa8d1c4748e-6.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>동적 스크립트<p><p>동적을 삽입하는 두 가지 방법이 있습니다. 첫 번째는 스크립트 태그를 동적으로 생성하는 것이고, 두 번째는 XMLHttpRequest를 통해 페이지를 주입하는 것입니다<p> 첫 번째 방법을 먼저 사용하는 방법에 대해 이야기해 보겠습니다. <p><span style="max-width:90%"><strong>이 기술의 핵심은 다음과 같습니다. 다운로드가 언제 시작되더라도 파일의 다운로드 및 실행 프로세스는 페이지의 다른 프로세스를 차단하지 않습니다. 그러나 동적 스크립트 노드를 사용하여 js 파일을 다운로드하면 반환된 코드가 즉시 실행됩니다(Firefox 및 Opera 제외). , 이는 이전의 모든 동적 스크립트 노드가 실행을 완료할 때까지 기다립니다.) <p>주요 브라우저에서는 완료되면 <script> 태그가 수신됩니다. 로드 이벤트가 발생하지만 IE 브라우저는 그렇지 않으므로 모든 브라우저와 호환되는 방식<p><strong><p>이 방법의 단점은 파일의 로딩 순서를 알아야 한다는 점입니다. js 파일이 많고 종속성이 복잡할 경우 종속성 로딩 순서를 관리하기가 어렵습니다.<p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/31eb9d88b81f295bb1a4888cb5a72016-9.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><p>이렇게 작성된 코드는 다음과 같습니다. 유지 관리가 어렵습니다<p> <strong>스크립트를 동적으로 생성하는 두 번째 방법은 실제로 인라인 스크립트를 사용하여 <script> 태그를 생성하는 것과 같습니다. 페이지에서 코드가 즉시 실행되어 준비됩니다. <p style="max-width:90%">장점: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/31eb9d88b81f295bb1a4888cb5a72016-10.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>다운로드한 js 코드이지만 즉시 실행되지는 않습니다. 이런 식으로 준비가 될 때까지 스크립트 실행을 연기할 수 있습니다. 이 방법은 모든 브라우저와도 호환됩니다.<p>단점: <p> js 파일 요청한 페이지와 동일한 도메인에 있어야 합니다. js 파일은 CDN에서 다운로드할 수 없습니다. 일반적으로 대규모 웹 애플리케이션에서는 이 방법을 사용하지 않는 것이 좋습니다. <strong>코드를 추가하세요. 먼저 동역학을 위해 필요하고, 그 다음 페이지를 초기화하는 척하는 나머지 코드<p><strong>[이미지 업로드 실패...(image-dd3f9-1515902024710)]위에 너무 많은 내용이 소개되었는데, 동적인 몇 가지를 추천하고 싶습니다. 지연 로딩 라이브러리<p><strong>YUI3, LazyLoad 및 LABjs를 포함하여, 개인적으로 LABjs 라이브러리가 사용하기 더 쉽다고 생각하지만, 이에 대해 배울 수는 없습니다. 여기서는 설명하지 않겠습니다. <p>요약: <p><p>js 성능 향상의 여러 측면<p> 1. </script>

위 내용은 자바스크립트에서 고성능 로딩 순서를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!