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

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

머리말

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

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

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

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

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

스크립트 구성하기

각 태그는 다운로드 시 페이지 렌더링을 차단하므로 페이지에 포함된 태그 수를 줄이는 것이 중요합니다. 이와 같이 여러 js 파일을 하나의 js 파일로 병합하고 패키징할 수 있습니다. 장점은 지연 시간을 최소화하면 페이지의 전반적인 성능이 크게 향상된다는 것입니다. 또한 HTTP 요청도 줄일 수 있습니다. 일반적으로 100KB 파일 하나를 다운로드하는 것이 25KB 파일 4개를 다운로드하는 것보다 빠릅니다.

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

비차단 스크립트

더 큰 js 파일 하나를 다운로드하면 하나의 HTTP 요청만 생성되지만, 브라우저가 오랫동안 정지될 것입니다. 이러한 상황을 방지하려면 js 파일을 페이지에 점진적으로 로드해야 합니다.

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

간단히 말하면, defer 메커니즘은 아는 것입니다 DOM 로딩이 완료될 때까지 js 파일을 다운로드하지 마세요. 그러면 브라우저의 다른 프로세스가 차단되지 않습니다.

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

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

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

동적 스크립트

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

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

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

주요 브라우저에서는 완료되면 태그가 수신됩니다. 로드 이벤트가 발생하지만 IE 브라우저는 그렇지 않으므로 모든 브라우저와 호환되는 방식

이 방법의 단점은 파일의 로딩 순서를 알아야 한다는 점입니다. js 파일이 많고 종속성이 복잡할 경우 종속성 로딩 순서를 관리하기가 어렵습니다.

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

스크립트를 동적으로 생성하는 두 번째 방법은 실제로 인라인 스크립트를 사용하여 태그를 생성하는 것과 같습니다. 페이지에서 코드가 즉시 실행되어 준비됩니다.

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

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

코드를 추가하세요. 먼저 동역학을 위해 필요하고, 그 다음 페이지를 초기화하는 척하는 나머지 코드 [이미지 업로드 실패...(image-dd3f9-1515902024710)]

위에 너무 많은 내용이 소개되었는데, 동적인 몇 가지를 추천하고 싶습니다. 지연 로딩 라이브러리 YUI3, LazyLoad 및 LABjs를 포함하여, 개인적으로 LABjs 라이브러리가 사용하기 더 쉽다고 생각하지만, 이에 대해 배울 수는 없습니다. 여기서는 설명하지 않겠습니다.

요약:

js 성능 향상의 여러 측면

1. 태그를 닫기 전에 모든 태그를 페이지 하단에 배치하세요. 이렇게 하면 스크립트가 실행되기 전에 페이지가 렌더링되었는지 확인할 수 있습니다 2. 스크립트를 병합합니다. 페이지에 태그가 적을수록 로드 및 응답 속도가 빨라집니다. 이는 외부 링크 파일이나 내장된 스크립트에 관계없이 적용됩니다. 3. 차단하지 않고 js를 다운로드하는 방법은 많습니다. 3.1 태그의 defer 속성을 사용합니다. 3.2 동적으로 생성된 code

3.3 XHR 객체를 사용하여 js 코드를 다운로드하고 페이지에 삽입합니다

위 전략을 통해 js를 많이 사용해야 하는 웹 애플리케이션의 실제 성능을 크게 향상시킬 수 있습니다

위 내용은 모두를 위해 편집했는데, 앞으로도 잘 활용되길 바랍니다. 모두에게 도움이 됩니다.