논블로킹 로딩 스크립트 분석 [전체]_javascript 기술

브라우저가 단일 스레드이기 때문에 스크립트는 로드 시 다른 리소스의 다운로드를 차단합니다. 현재 브라우저가 개선되었지만 여전히 개선이 필요합니다.
물론 스크립트를 순서대로 실행해야 하지만, 순서대로 다운로드할 필요는 없습니다. 해결 방법:
1. 임베디드 JS
보통 페이지 크기와 캐싱이 더 많은 이점을 가져올 수 있으므로 JS를 외부 파일에 도입하는 것이 좋습니다.
홈페이지나 소량의 JS와 같은 경우에는 허용됩니다.
2. XHR Eval
XMLHttpRequest를 통해 서버 측에서 스크립트를 가져옵니다.
가장 큰 단점은 XHR을 통해 얻은 스크립트를 메인 페이지와 동일한 도메인에 배포해야 한다는 것입니다.

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

Ajax.get("test.js" , 함수( xhr) {
eval(xhr.responseText)
})

3. XHR 주입
XHR을 사용하여 스크립트를 가져오고 스크립트 태그를 생성합니다.
마찬가지로 XHR을 통해 얻은 스크립트는 기본 페이지와 동일한 도메인에 배포되어야 합니다.

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

Ajax.get('test.js' , function ( xhr) {
injectscript(xhr.responseText);
})
function injectscript(scriptText) {
var s = document.createElement('script'); .text = scriptText;
document.getElementsByTagName('head')[0].appendChild(s)
}

4. Iframe의 스크립트 필요한 스크립트를 페이지에 넣은 다음 iframe을 통해 페이지를 로드합니다.
단점은 iframe 자체의 비용이 상대적으로 크고 브라우저 보안 메커니즘으로 인해 iframe의 js가 도메인 간 상위 페이지에 액세스하는 것을 허용하지 않으며 그 반대의 경우도 마찬가지입니다.

5. 스크립트 DOM 요소
JS는 스크립트 DOM 요소를 동적으로 생성하고 src 속성을 설정합니다.

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

var scriptElem = document.createElement('script ');
scriptElem.src = 'http://domain.com/test.js';
document.ge('head')[0].appendChild(scriptElem)

6. Script Defer script 태그에 defer 속성을 추가합니다.
단점은 IE와 일부 새로운 브라우저에서만 지원된다는 점입니다.

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

7. document.write 스크립트 태그 document.write를 사용하여 페이지에 HTML 태그 스크립트를 작성합니다.
단점은 IE에서만 스크립트가 병렬로 로드된다는 점입니다.

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

document.write("");


널리 논의되지 않은 한 가지 차이점은 브라우저의 상태 표시줄, 진행률 표시줄, 탭 아이콘, 마우스 등 브라우저의 사용 상태에 미치는 영향입니다.
서로 종속적인 여러 스크립트를 로드할 때 실행 순서를 보장할 수 있는 기술도 필요합니다.

技术	并行下载	可以跨域	存在Script标签	忙碌指示	顺序保证	大小 (bytes)
XHR Eval	IE, FF, Saf, Chr, Op	no	no	Saf, Chr	-	~500
XHR Injection	IE, FF, Saf, Chr, Op	no	yes	Saf, Chr	-	~500
Script in Iframe	IE, FF, Saf, Chr, Op	no	no	IE, FF, Saf, Chr	-	~50
Script DOM Element	IE, FF, Saf, Chr, Op	yes	yes	FF, Saf, Chr	FF, Op	~200
Script Defer	IE, Saf4, Chr2, FF3.1	yes	yes	IE, FF, Saf, Chr, Op	IE, FF, Saf, Chr, Op	~50
document.write Script Tag	IE, Saf4, Chr2, Op	yes	yes	IE, FF, Saf, Chr, Op	IE, FF, Saf, Chr, Op	~100

대부분의 경우 Script DOM Element가 좋은 선택입니다. 이 방법은 모든 브라우저에 적합하고 도메인 간 제한이 없으며 매우 간단하고 이해하기 쉽습니다. 유일한 단점은 개별 스크립트의 실행 순서를 보장할 수 없다는 점입니다. 종속성이 있는 여러 스크립트를 로드해야 하는 경우 이러한 스크립트를 하나로 결합하여 필요한 순서로 실행되도록 하거나 다른 기술을 사용해야 합니다.
현재 비동기 로딩 중에 실행 순서를 유지하는 방법에는 여러 가지가 있으므로 자세한 설명은 생략하겠습니다.
단일 스크립트
1, 하드코딩된 콜백
2, 창 온로드
3, 타이머
4, 스크립트 온로드
5, 저하 스크립트 태그
다중 스크립트
1 , Managed XHR
2. DOM 요소 및 Doc Write
이 문서는 "고성능 웹사이트 구축을 위한 고급 가이드"를 참조합니다.