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

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

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)
}

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

");


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

技术	并行下载	可以跨域	存在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
이 문서는 "고성능 웹사이트 구축을 위한 고급 가이드"를 참조합니다.