고성능 자바스크립트의 로딩순서 및 실행원리를 자세히 설명

브라우저에서의 JavaScript 성능은 개발자가 직면한 가장 심각한 사용성 문제라고 할 수 있습니다. 이번 글에서는 주로 샘플 코드를 통해 소개하는 고성능 JavaScript의 로딩 순서와 실행 원리에 대해 소개합니다. 매우 상세하고 모든 사람의 공부나 업무에 대한 확실한 참고 학습 가치가 있습니다. 필요한 친구들은 편집자를 따라 함께 공부할 수 있습니다.

브라우저에서 <script> 태그를 발견하면 먼저 외부 링크 파일을 다운로드한 후 실행해야 합니다. 이 과정에서 페이지 렌더링과 사용자 상호작용이 완전히 차단됩니다. </script>

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

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

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

따라서 성능을 향상시키는 방법 중 하나는 스크립트를 본문 맨 아래에 두는 것입니다

스크립트 구성

각 <script> 태그를 다운로드할 때 페이지 렌더링이 차단되므로 페이지에 포함된 <script> 태그 수를 줄이는 것이 중요합니다. 해결 방법: 여러 js를 병합하고 패키징할 수 있습니다. 이 방법의 장점은 지연 시간을 최소화할 수 있다는 것입니다. HTTP 요청을 줄이는 것 외에도 페이지의 전반적인 성능이 크게 향상됩니다. <br/></script>

일반적으로 100KB 파일 하나를 다운로드하는 것이 25KB 파일 4개를 다운로드하는 것보다 빠릅니다.

외부 링크 js 파일이 여러 개 있는 경우 하나의 js 파일로 병합할 수 있습니다.

Non-blocking script

더 큰 js 파일 하나를 다운로드하면 HTTP 요청이 하나만 생성되지만 검색이 일시 중지됩니다. 서버에 시간이 오래 걸립니다. 이러한 상황을 방지하려면 js 파일을 페이지에 점진적으로 로드해야 합니다.

Delayed script

defer 속성은 이 요소에 포함된 스크립트의 실행이 지연될 수 있음을 나타냅니다. 그러나 IE4+ 및 Firefox3.5+ 브라우저에서만 이를 지원합니다

간단히 말하면, 지연 메커니즘은 기다리는 것입니다 DOM이 로드될 때까지 js 파일을 다운로드하면 브라우저의 다른 프로세스가 차단되지 않습니다

defer 속성을 지원하지 않는 브라우저에 나타나는 순서는 defer, script, load입니다.

defer 속성을 지원하는 브라우저의 팝업 순서는 script, defer, load

Defer는 onload 이벤트가 실행되기 전에 호출됩니다

Dynamic script

동적을 삽입하는 두 가지 방법이 있습니다. 첫 번째는 스크립트 태그를 동적으로 생성하는 것이고, 두 번째는 XMLHttpRequest 주입 페이지를 전달하는 것입니다.

첫 번째 방법을 먼저 사용하는 방법에 대해 이야기해 보겠습니다.

이 기술의 핵심은 언제라도 가능합니다. 다운로드가 시작되면 파일의 다운로드 및 실행 프로세스는 페이지의 다른 프로세스를 차단하지 않지만 동적을 사용합니다. 스크립트 노드가 js 파일을 다운로드하면 반환된 코드가 즉시 실행됩니다(Firefox 및 Opera 제외). 이전의 모든 동적 스크립트 노드가 실행을 완료할 때까지 기다립니다.

주요 브라우저에서는 <script> 태그가 수신될 때 로드가 트리거되지만 IE 브라우저에는 이를 포함하지 않으므로 다음과 같은 메소드를 캡슐화해야 합니다. 모든 브라우저와 호환됩니다</script>

이 방법의 단점은 파일의 로딩 순서를 알아야 한다는 것입니다. js 파일이 너무 많으면 종속성이 복잡해지면 순서 관리가 어렵습니다. 로드된 종속성

이렇게 작성된 코드는 유지 관리가 어렵습니다

스크립트를 동적으로 생성하는 두 번째 방법

은 실제로 스크립트의 <script> 생성된 <script> 요소가 페이지에 추가되면 코드가 즉시 실행되어 준비됩니다. </script>

장점: js 코드는 다운로드되지만 즉시 실행되지 않습니다. 이렇게 하면 준비가 될 때까지 스크립트 실행을 연기할 수 있습니다. 이 방법은 모든 브라우저와도 호환됩니다.

단점: js 파일은 요청한 페이지가 동일한 도메인에 있고, js 파일을 CDN에서 다운로드할 수 없습니다. 일반적으로 대규모 웹 애플리케이션에서는 이 방법을 사용하지 않는 것이 좋습니다.

동적에 필요한 코드를 추가하세요. 먼저 페이지의 나머지 부분을 초기화하는 척하세요. 지연 로딩 라이브러리

YUI3, LazyLoad, LABjs 등의 라이브러리가 있습니다. 개인적으로 LABjs 라이브러리가 사용하기 더 쉽다고 생각하지만, 사용법은 설명하지 않겠습니다. 여기에서 사용하려면

요약:

js 성능 향상의 여러 측면

1.

위 내용은 고성능 자바스크립트의 로딩순서 및 실행원리를 자세히 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!