JavaScript 비동기 loading_javascript 기술에 대한 간략한 분석

머리말

JavaScript 스크립트 로딩과 관련하여 많은 문제를 겪으셨을 것으로 생각됩니다. 주로 몇 가지 점에서——

1> 동기 스크립트와 비동기 스크립트로 인해 발생하는 파일 로딩, 파일 종속성 및 실행 순서 문제
2> 동기 스크립트 및 비동기 스크립트로 인한 성능 최적화 문제

스크립트 로딩과 관련된 모든 측면에 대한 철저한 이해는 실질적인 문제 해결에 도움이 될 뿐만 아니라 성능 최적화를 파악하고 구현하는 데에도 도움이 됩니다.

먼저 스크립트 태그 코드를 살펴보세요——

코드 복사 코드는 다음과 같습니다.

위에 배치하면 모든 페이지 렌더링 작업이 차단되어 스크립트가 로드되어 실행될 때까지 사용자가 "죽음의 흰색 화면" 상태에 있게 됩니다. 끝에 있는 스크립트는 사용자가 생명이 없는 정적 페이지만 볼 수 있도록 허용합니다. 클라이언트 측 렌더링이 수행되어야 하는 위치는 비효과적인 컨트롤과 빈 상자로 흩어져 있습니다. 테스트 케이스 받기 -

코드 복사 코드는 다음과 같습니다.

머리>

내가 콘텐츠다

본문>

그 중 test.js에 담긴 내용은——

코드 복사 코드는 다음과 같습니다.

Alert('헤드에 있는 스크립트 코드가 바로 나입니다. 여기서 js를 실행하면 바디의 컨텐츠 렌더링이 시작됩니다!');

경고는 일시 중지 지점이며 현재 페이지는 비어 있음을 알 수 있습니다. 하지만 이때 전체 페이지가 로드되었다는 점에 유의하세요. 본문에 특정 src 속성(예: 위의 img 태그)이 포함된 태그가 있으면 브라우저가 이미 관련 콘텐츠를 로드하기 시작한 것입니다. 간단히 말해서, js 엔진과 렌더링 엔진의 작동 타이밍은 상호 배타적입니다(일부 책에서는 이를 UI 스레드라고 부릅니다).

그러므로 페이지를 더 보기 좋고 사용하기 쉽게 만드는 스크립트는 즉시 로드해야 하고, 나중에 로드할 수 있는 스크립트는 나중에 로드해야 합니다.

1. 스크립트 실행 지연

페이지의

태그 끝에 스크립트를 배치하는 것이 점점 더 인기를 얻고 있습니다. 이러한 방식으로 사용자는 페이지를 더 빠르게 볼 수 있고, 로드된 DOM 요소에 대해 스크립트가 직접 작동할 수 있습니다. 대부분의 스크립트에서 이 "이동"은 엄청난 개선입니다. 페이지 모델은 다음과 같습니다——

코드 복사 코드는 다음과 같습니다.

머리>



본문>

이렇게 하면 페이지 렌더링 시간이 크게 단축되지만 bodyScript가 로드되기 전에 사용자가 페이지와 상호 작용할 수 있는 기회가 제공될 수 있다는 점에 유의하세요. 그 이유는 전체 문서가 로드될 때까지 브라우저가 이러한 스크립트를 로드할 수 없기 때문입니다. 이는 느린 연결을 통해 전송되는 대용량 문서의 경우 병목 현상이 발생할 수 있습니다.

이상적으로는 스크립트 로딩이 문서 로딩과 동시에 이루어져야 하며 DOM 렌더링에 영향을 주지 않아야 합니다. 이렇게 하면 스크립트가 <script> 태그 순서대로 이미 로드되어 있으므로 문서가 준비되면 스크립트를 실행할 수 있습니다. </script>

defer를 사용하여 이 요구 사항을 충족할 수 있습니다. 즉,

코드 복사 코드는 다음과 같습니다.

defer 속성을 추가하는 것은 브라우저에 다음과 같이 말하는 것과 같습니다. 지금 이 스크립트 로드를 시작하십시오. 그러나 문서가 준비되고 defer 속성이 있는 모든 이전 스크립트의 실행이 완료될 때까지 기다려 주십시오.

이렇게 지연 스크립트를 head 태그에 배치하면 body 태그에 스크립트를 배치할 때의 모든 이점을 얻을 수 있으며 대용량 문서의 로딩 속도도 크게 향상됩니다. 이때 페이지 모드는——

코드 복사 코드는 다음과 같습니다.

머리>


본문>

그러나 모든 브라우저가 defer를 지원하는 것은 아닙니다. 일부 최신 브라우저의 경우 defer가 선언되면 내부 스크립트는 document.write 및 DOM 렌더링 작업을 수행하지 않습니다. IE4는 모두 defer 속성을 지원합니다. 이는 문서가 로드된 후 지연된 스크립트가 실행될 수 있도록 하려면 jQuery의 $(document).ready와 같은 구조에 모든 지연된 스크립트 코드를 캡슐화해야 함을 의미합니다. 방문자의 거의 97%가 병렬 로딩의 이점을 누리고 나머지 3%는 여전히 완전한 기능을 갖춘 JavaScript에 액세스할 수 있으므로 그만한 가치가 있습니다.

2. 스크립트 완전 병렬화

스크립트 로드 및 실행을 한 단계 더 빠르게 만듭니다. 나는 defer 스크립트가 차례로 실행될 때까지 기다리고 싶지 않습니다(defer는 문서가 로드될 때까지 조용히 기다리는 순서대로 대기하는 시나리오를 상기시킵니다). 이 스크립트를 실행하기 전에 문서가 준비될 때까지 기다리고 싶습니다. 가능한 한 빨리 이 스크립트를 로드하고 실행하고 싶습니다. 여기서는 HTML5의 비동기 속성이 떠오르지만 이는 혼란스러운 무정부 상태라는 점에 유의하세요.

예를 들어 전혀 관련이 없는 두 개의 타사 스크립트를 로드하면 해당 스크립트 없이도 페이지가 제대로 실행되며 어느 것이 먼저 실행되고 어느 것이 마지막으로 실행되는지는 신경 쓰지 않습니다. 따라서 이러한 타사 스크립트에서 비동기 속성을 사용하는 것은 한 푼도 쓰지 않고 실행 속도를 높이는 것과 같습니다.

비동기 속성은 HTML5의 새로운 기능입니다. 이 기능은 스크립트를 다운로드하는 동안 DOM 렌더링을 허용하는 defer와 유사합니다. 다만, 다운로드 후 최대한 빨리 실행(즉, JS 엔진이 유휴 상태가 되는 즉시 실행)되며, 스크립트가 순서대로 실행된다는 보장은 없습니다. onload 이벤트 전에 완료됩니다.

Firefox 3.6, Opera 10.5, IE 9, 최신 Chrome 및 Safari는 모두 비동기 속성을 지원합니다. async와 defer를 동시에 사용할 수 있으므로 IE 4 이후의 모든 IE는 비동기 로딩을 지원하지만 async는 defer를 덮어쓴다는 점에 유의하세요.

그럼 이때의 페이지 모델은 다음과 같습니다---

코드 복사 코드는 다음과 같습니다.

머리>




본문>

여기서 실행 순서에 주의하세요. 각 스크립트 파일이 로드된 다음 headScript.js가 실행되고 DOM이 렌더링되는 동안 백그라운드에서 deferedScript.js가 로드됩니다. 그런 다음 DOM 렌더링이 끝나면 deferedScript.js와 두 개의 비동기 스크립트가 실행됩니다. async 속성을 지원하는 브라우저의 경우 이 두 스크립트가 순서대로 실행됩니다.

3. 프로그래밍 가능한 스크립트 로딩

위 두 스크립트 속성의 기능은 매우 매력적이지만 호환성 문제로 인해 널리 사용되지는 않습니다. 따라서 우리는 다른 스크립트를 로드하기 위해 스크립트를 더 자주 사용합니다. 예를 들어, 특정 조건을 충족하는 사용자에게만 스크립트를 로드하려고 하는데, 이를 종종 "지연 로딩"이라고 합니다.

브라우저 API 수준에서 서버 스크립트를 가져와 실행하는 두 가지 합리적인 방법이 있습니다.

1> Ajax 요청을 생성하고 평가 함수를 사용하여 응답을 처리합니다

2> DOM에 <script> 태그 삽입 </script>

브라우저가 HTTP 요청 생성을 걱정하므로 후자의 방법이 더 좋습니다. 게다가 eval에는 몇 가지 실질적인 문제가 있습니다. 범위가 누출되고 디버깅이 지저분해지며 잠재적으로 성능이 저하될 수 있습니다. 따라서 feture.js라는 스크립트를 로드하려면 다음과 유사한 코드를 사용해야 합니다.

코드 복사 코드는 다음과 같습니다.

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = 'feature.js';
head.appendChild(스크립트);

물론 콜백 모니터링을 처리해야 합니다. HTML5 사양에서는 콜백을 바인딩할 수 있는 onload 속성을 정의합니다.

코드 복사 코드는 다음과 같습니다.

script.onload = function() {
console.log('스크립트가 로드되었습니다...');
}

그러나 IE8 및 이전 버전은 onload를 지원하지 않고 onreadystatechange를 지원합니다. 게다가 오류 처리도 여전히 이상합니다. 여기에서는 labjs, yepnope, requirejs 등과 같은 인기 있는 학교 기반 로딩 라이브러리를 참조할 수 있습니다.

다음과 같이 간단한 loadjs 파일을 캡슐화했습니다——

코드 복사 코드는 다음과 같습니다.

var loadJS = function(url,callback){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
Script.src = URL;
​ script.type = "text/javascript";
Head.appendChild(스크립트);

// 스크립트 태그, IE에는 onreadystatechange 이벤트가 있고, w3c 표준에는 onload 이벤트가 있습니다.
// IE9는 W3C 표준 온로드도 지원합니다
var ua = navigator.userAgent,
        ua_version;
// IE6/7/8
If (/MSIE ([^;] )/.test(ua)) {
        ua_version =parseFloat(RegExp["$1"], 10);
If (ua_version                script.onreadystatechange = function(){
If (this.readyState == "loaded" ){
                    콜백();
                }
            }
         } else {
              script.onload = function(){
                 콜백();
            };
}
} 그 밖의 {
         script.onload = function(){
             콜백();
        };
}
};

여기에서는 document.write를 사용하여 스크립트를 비동기적으로 로드하는 것에 대해 이야기하지 않겠습니다. 브라우저 간의 차이점이 정말 혼란스럽기 때문입니다.

이미지 객체를 사용하여 js 파일을 비동기적으로 미리 로드하면 내부의 js 코드가 실행되지 않는다는 점에 유의하세요.

마지막으로 requirejs의 비동기 로딩 스크립트에 대해 이야기해 보겠습니다.

requirejs는 대상 스크립트가 순서대로 실행된다는 것을 보장하지 않지만 실행 순서가 해당 종속성 요구 사항을 충족할 수 있다는 것만 보장합니다. 이렇게 하면 모든 스크립트가 가능한 한 빨리 병렬로 로드되고 종속성 토폴로지에 따라 순서대로 실행됩니다.

4. 요약

자, 이제 비동기 로딩 스크립트 명령문이 끝났습니다. 여기서 다시 최적화 순서에 대해 자세히 설명하겠습니다——

1> 기존 방식에서는 스크립트 태그를 사용하여 HTML 문서에 직접 삽입했습니다.

a> head 태그에 포함 - 이렇게 해도 문서 콘텐츠의 다른 정적 리소스 파일의 병렬 로드에는 영향을 미치지 않습니다. 즉, 문서 콘텐츠의 렌더링, 즉 DOM 렌더링에 영향을 미칩니다. 이때는 차단되어 흰색 화면이 표시됩니다.

b> body 태그 하단에 Embed - 화이트 스크린 현상을 피하기 위해 DOM 렌더링을 우선으로 한 후 스크립트를 실행했는데, 또 문제가 발생했습니다. 먼저 첫 번째 문제에 대해 이야기해 보겠습니다. DOM 문서의 콘텐츠가 상대적으로 크면 대화형 이벤트 바인딩이 지연되고 경험이 더 나빠집니다. 물론 필요에 따라 중요한 스크립트를 먼저 실행해야 합니다. 두 번째 문제에 대해 이야기해 보겠습니다. 스크립트 파일이 본문 하단에 있으므로 이러한 스크립트의 로딩이 헤드에 있는 스크립트에 비해 지연됩니다. 따라서 본체 하단은 최적화의 종착점이 아닙니다.

c> defer 속성을 추가합니다. 우리는 스크립트가 가능한 한 빨리 병렬로 로드되기를 원하므로 이러한 스크립트를 여전히 헤드에 넣습니다. 스크립트는 문서 로드와 동시에 로드되어야 하며 DOM 렌더링에 영향을 주어서는 안 됩니다. 이렇게 하면 문서가 준비되면 스크립트를 실행할 수 있습니다. 그래서 defer와 같은 속성이 있습니다. 그러나 호환성에 주의하세요. defer 속성을 지원하지 않는 브라우저의 경우 jQuery와 같이 $(document).ready에 코드를 캡슐화해야 합니다. defer 속성을 가진 모든 스크립트는 나타나는 순서대로 순차적으로 실행되므로 엄격하게 동기화된다는 점에 유의하세요.

2> 이전 요점은 모두 스크립트의 동기 실행에 관한 것입니다(이러한 스크립트의 로드 프로세스는 병렬이며, 유일한 차이점은 요청을 먼저 트리거하는 사람과 나중에 요청을 트리거하는 것입니다). 물론, 우리는 특정 시점에 하나의 js 파일만 실행될 수 있다는 것을 알고 있습니다. 여기서 "병렬"은 js 엔진이 있는 한 이를 먼저 로드하는 사람이 즉시 실행한다는 것을 의미합니다. 지금은 유휴 상태입니다. 여기서 최적화는 두 가지 유형으로 나뉩니다.——

a> async 속성을 추가하면 위에서 언급한 최적화 지점을 실제로 달성할 수 있지만 제한이 높습니다. 즉, 비종속 스크립트를 로드하는 데만 사용됩니다. 가장 적합한 예는 여러 타사 스크립트를 도입하는 것입니다. defer 속성과의 조합도 있는데 정말 귀찮습니다. 물론 호환성 문제도 있습니다. 위의 세 가지 문제로 인해 적용이 제한됩니다. 비동기식을 사용할 때는 종속성에 엄격한 주의를 기울여야 합니다.

b> 스크립트 로딩 스크립트 - 당연히 "스크립트의 병렬 실행"이라는 목적을 달성하기 위해 사용합니다. 동시에 스크립트 종속성 문제를 제어하는 ​​것도 편리하므로 requirejs에서 js 비동기 로딩을 위해 지능형 로딩 관리를 사용합니다.

자, 여기에 쓰겠습니다.

여기서는 비동기 로딩 스크립트에 대해서만 이야기하고 있습니다. 스타일 파일이나 기타 정적 리소스를 비동기적으로 로드하는 또 다른 콘텐츠가 있습니다. 계속됩니다...