IE6/7에서 JavaScript는 두 가지 측면에서 페이지 렌더링을 방해합니다.
스크립트 태그의 웹 페이지 리소스는 스크립트가로드되기 전에 요청 및 다운로드를 중지합니다.
스크립트 태그 아래의 HTML 요소는 스크립트가로드되기 전에 렌더링을 중지합니다.
IE6/7 FIREFOX2/3 SAFARI3 Chrome1 및 Opera에서 스크립트 태그는 다운로드를 방해합니다.
IE8, Safari4 및 Chrome2에서 스크립트가 동시에있을 수 있지만 여전히 다른 리소스의 다운로드를 방해합니다.
다른 리소스와 병렬로 스크립트를 다운로드하는 6 가지 방법이 있습니다.
1.xhr eval- xhr (xmlhttprequest 객체)을 통해 스크립트를 다운로드 한 다음 평가 방법을 사용하여 xhr의 relecteetxt를 실행하십시오.
2.XHR 주입 - XHR을 통해 스크립트를 다운로드 한 다음 스크립트 태그를 작성하고 문서 (본체 또는 헤드 태그)에 삽입 한 다음 스크립트 태그의 텍스트 속성을 XHR의 responseetxt 값으로 설정합니다.
Iframe의 3.xhr- 스크립트 태그를 iframe에 넣고 iframe을 통해 다운로드하십시오.
4.script dom 요소 - 스크립트 태그 생성 및 SRC 속성을 스크립트 주소에 가리 킵니다.
5. 스크립트 연기 - 스크립트 태그의 연기 속성을 추가하십시오. 이것은 IE에서만 유효하지만 Firefox3.1 도이 속성을 지원합니다.
6. Document.Write 메소드를 사용하여 <script src = "" "> 페이지에서 IE에서만 유효합니다.
Cuzillion을 통해 각 방법의 사용 예를 볼 수 있습니다.
외부 스크립트를 실행 한 후 실행 해야하는 인라인 스크립트가있는 경우 동기화해야합니다. "커플 링"이라고하는 커플 링 비동기 스크립트이 기사에서는 현재 "커플 링"을 구현할 수있는 몇 가지 방법을 소개합니다.
Headjs, JS가 동시에 다운로드 할 수 있도록 할 수 있습니다 (그러나 순차적으로 실행) : http://headjs.com/
코드 사본은 다음과 같습니다.
head.js ( "/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function () {
// 모두 완료되었습니다
});
// 가장 간단한 경우. 차단하지 않고 단일 스크립트를로드하고 실행하십시오.
head.js ( "/path/to/file.js");
// 스크립트를로드하고로드 된 후 함수를 실행합니다.
head.js ( "/path/to/file.js", function () {
});
// 파일을 병렬로로드하지만 순서대로 실행합니다.
head.js ( "file1.js", "file2.js", ... "filen.js");
// 모든 스크립트가로드 된 후 기능 실행 기능
head.js ( "file1.js", "file2.js", function () {
});
// 파일이 병렬로로드되어 도착 순서대로 실행됩니다.
head.js ( "file1.js");
head.js ( "file2.js");
head.js ( "file3.js");
// 이전도 작성할 수 있습니다
head.js ( "file1.js"). js ( "file1.js"). js ( "file3.js");