막힘 없 는 로드 스 크 립 트 분석[전]

브 라 우 저 는 단일 스 레 드 이기 때문에 스 크 립 트 를 불 러 올 때 다른 자원 을 다운로드 하 는 것 을 막 습 니 다.현재 브 라 우 저 는 개선 되 었 지만 개선 이 필요 합 니 다.스 크 립 트 는 순서대로 실행 되 어야 하지만 순서대로 다운로드 할 필요 가 없습니다.해결 방법:1.내 장 된 JS 는 보통 페이지 크기 와 캐 시 로 인해 더 많은 혜택 을 가 져 올 수 있 기 때문에 외부 파일 이 JS 를 도입 하 는 것 이 좋 습 니 다.소수의 경우,예 를 들 어 첫 페이지,소량의 JS 상황 에서 도 받 아들 일 수 있다.2。XHR Eval 은 XML HttpRequest 를 통 해 서버 에서 스 크 립 트 를 가 져 옵 니 다.XHR 를 통 해 얻 은 스 크 립 트 는 홈 페이지 와 같은 도 메 인 에 배치 해 야 한 다 는 것 이 주요 결함 입 니 다

 
Ajax.get("test.js", function (xhr) { 
eval(xhr.responseText); 
}); 

3。XHR 주입 은 XHR 를 사용 하여 스 크 립 트 를 가 져 오고 script 탭 을 만 듭 니 다.마찬가지 로 XHR 를 통 해 얻 은 스 크 립 트 는 홈 페이지 와 같은 도 메 인 에 배치 해 야 합 니 다

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

4。Script in Iframe 은 필요 한 스 크 립 트 를 한 페이지 에 넣 고 iframe 을 통 해 이 페이지 를 불 러 옵 니 다.단점 은 iframe 자체 의 씀 씀 이 가 비교적 크다 는 것 이다.또한 브 라 우 저 보안 체 제 는 iframe 의 js 가 도 메 인 을 뛰 어 넘 는 부모 페이지 에 접근 하 는 것 을 허용 하지 않 고 반대로 도 마찬가지 이다.5。Script DOM Element JS 동적 으로 script 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 와 일부 새로운 브 라 우 저 만 지원 하 는 것 이다

 
<script defer src='test.js'></script> 

7。document.write Script Tag 는 document.write 를 사용 하여 HTML 태그 script 을 페이지 에 기록 합 니 다.단점 은 IE 에서 만 스 크 립 트 를 병렬 로 불 러 오 는 것 입 니 다

 
document.write("<script type='text/javascript' src='test.js'><\/script>"); 

여러분 이 광범 위 하 게 토론 하지 못 한 차이 점 은 브 라 우 저의 바 쁜 상태 에 대한 영향 입 니 다.브 라 우 저의 상태 표시 줄,진도 표시 줄,Tab 아이콘 과 마 우 스 를 포함 합 니 다.서로 의존 관계 가 있 는 스 크 립 트 를 여러 개 불 러 올 때 실행 순 서 를 보장 할 수 있 는 기술 이 필요 합 니 다.
기술. 
 
병렬 다운로드 
 
크로스 가능 
 
스 크 립 트 탭 존재 
 
바 쁜 지시 
순서 보증 
크기(바이트)
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,Hardcoded Callback 2,Window Onload 3,Timer 4,Script Onload 5,Degrading Script 태그 여러 스 크 립 트 1,Managed XHR 2,DOM Element and Doc 쓰기 본 고 는 을 참고 한다.