우선, JavaScript의 로딩 및 실행에 대해 이야기하고 싶습니다. 일반적으로 브라우저에는 JavaScript 작동을위한 두 가지 주요 기능이 있습니다. 1)로드 직후에 실행, 2) 실행 중 페이지의 후속 컨텐츠 (페이지 렌더링 및 기타 리소스 다운로드 포함)를 차단합니다. 따라서 여러 JS 파일이 도입되면 브라우저의 경우 이러한 JS 파일이 일련의로드되어 순차적으로 실행됩니다.
JavaScript는 HTML 문서의 DOM 트리를 작동 할 수 있으므로 브라우저는 일반적으로 JS 파일의 특수성으로 인해 발생하기 때문에 일반적으로 병렬 다운로드와 같이 CSS 파일을 병렬로 다운로드하지 않습니다. 따라서 JavaScript에서 후속 DOM 요소를 작동하려면 기본적으로 브라우저는 객체를 찾을 수 없다는 오류를보고합니다. JavaScript가 실행되면 HTML이 차단되고 DOM 트리 뒤에 DOM 노드가 없기 때문입니다. 따라서 프로그램은 오류로보고됩니다.
전통적인 방법
따라서 코드에 다음 코드를 작성하면 다음과 같습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript"
src = "http://coolshell.cn/asyncjs/alert.js"> </script>
기본적으로 헤드의 <cript> 태그는 후속 리소스의로드와 전체 페이지의 생성을 차단합니다. 예제 1. 참고 : alert.js : alert ( "hello world")에는 한 문장이 하나 밖에 없으므로 JavaScript가 그 뒤에 물건을 어떻게 차단하는지 쉽게 볼 수 있습니다.
따라서 많은 웹 사이트가 Window.onload 또는 Docmuemt Ready와 같은 이벤트를 사용하여 웹 페이지 끝에 JavaScript를 넣는 이유를 알고 있습니다.
또한 대부분의 JavaScript 코드는 페이지를 기다릴 필요가 없으므로 기능을 비동기로로드합니다. 그렇다면 어떻게 비동기 적으로로드합니까?
document.write 메소드
따라서 document.write ()가 차단되지 않는 문제를 해결할 수 있다고 생각할 수 있습니다. 물론 문서 <스크립트> 태그를 실행할 수 있다고 생각할 것입니다. 다음과 같은 내용을 실행할 수 있습니다. 동일한 스크립트 태그의 JavaScript 코드의 경우에는 해당되지만 전체 페이지의 경우 여전히 차단됩니다. 다음은 테스트 코드입니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript"언어 = "javaScript">
함수 loadjs (script_filename) {
document.write ( '<' + 'script language = "javaScript"type = "text/javaScript");
document.write ( 'src = "' + script_filename + '">');
document.write ( '<'+'/script'+'>');
ALERT ( "loadjs () 종료 ...");
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs (스크립트);
Alert ( "loadjs () 완료!");
</스크립트>
<script type = "text/javaScript"언어 = "javaScript">
경고 ( "다른 블록");
</스크립트>
경고 순서는 무엇이라고 생각하십니까? 다른 브라우저에서 시도 할 수 있습니다. 닫으려는 테스트 페이지는 다음과 같습니다. 예 2.
스크립트의 연기 및 비동기 속성
IE는 IE6 이후로 연기 태그를 지원했습니다.
코드 사본은 다음과 같습니다.
<Script DEFER TYPE = "TEXT/JAVASCRIPT"SRC = "./ ALERT.JS">
</스크립트>
IE의 경우,이 태그를 사용하면 IE가 JS 파일을 병렬로 다운로드하고 전체 DOM로드가 완료 될 때까지 (DOMContentLoaded) 실행을 유지할 수 있습니다. 다중 연기 <cript>도 실행될 때 나타나는 순서대로 실행됩니다. 가장 중요한 것은 연기 후 <cript>에 추가 된 후 후속 DOM의 렌더링을 차단하지 않는다는 것입니다. 그러나이 연기는 IE에만 사용되기 때문에 일반적으로 덜 사용됩니다.
표준 HTML5는 또한 JavaScript를 비동기 적으로로드하는 속성을 추가합니다 : 비동기. 어떤 값을 할당 하든지, 표시되는 한, JS 파일을 비동기로로드하기 시작합니다. 그러나 비동기 로딩에는 심각한 문제가 발생합니다. 즉,로드 후 즉시 "실행"을 충실히 구현하므로 페이지의 렌더링을 차단하지는 않지만 실행 순서와 타이밍을 제어 할 수 없습니다. 이 예를 살펴보고 경험할 수 있습니다.
비동기 태그를 지원하는 브라우저는 다음과 같습니다. Firefox 3.6+, Chrome 8.0+, Safari 5.0+, IE 10+, Opera는 (여기에서) 지원하지 않으므로이 방법도 그리 좋지 않습니다. 모든 브라우저가 할 수있는 것은 아니기 때문입니다.
동적으로 DOM을 만듭니다
이 방법은 아마도 가장 많이 사용될 것입니다.
코드 사본은 다음과 같습니다.
함수 loadjs (script_filename) {
var script = document.createElement ( 'script');
script.setattribute ( 'type', 'text/javaScript');
script.setattribute ( 'src', script_filename);
script.setattribute ( 'id', 'coolshell_script_id');
script_id = document.getElementById ( 'coolshell_script_id');
if (script_id) {
document.getElementsByTagName ( 'head') [0] .removeChild (script_id);
}
document.getElementsByTagName ( 'head') [0] .AppendChild (스크립트);
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs (스크립트);
이 방법은 거의 JS 파일을로드하는 표준 비동기 방법이되었습니다. 이 방법을 시연하려면 다음을 참조하십시오. 예 3.이 방법은 JSONP와 함께 재생됩니다. 이 예제를 살펴볼 수 있습니다. T.JS (이 예제는 이전에 Weibo에서 수집 한 비동기 Ajax 호출의 작은 예입니다).
요구에 따라 JS를 비동기로로드하십시오
DOM 메소드의 위의 예는 JavaScript의 비동기로드 문제를 해결하지만 지정할 때 실행하려는 문제를 해결하지는 않습니다. 따라서 위의 DOM 메소드를 특정 이벤트에 바인딩하면됩니다.
예를 들어:
Window.LOAD 이벤트 - 예제 4
예제 4와 예제 3 사이의 실행 차이를 비교해야합니다. 두 예제 모두에서 코드 강조 표시와 함께 스크립트의 실행 및 alert.js의 실행을보기 위해 코드 강조 표시와 함께 JavaScript를 특별히 사용했습니다. 당신은 차이를 알 것입니다)
코드 사본은 다음과 같습니다.
Window.load = loadjs ( "http://coolshell.cn/asyncjs/alert.js")
특정 이벤트와 연결 - 예 5
코드 사본은 다음과 같습니다.
<p style = "cursor : pointer"onclick = "loadjs ()"> alert.js </p>를로드하려면 클릭하십시오
이 예는 매우 간단합니다. DOM 요소를 클릭 할 때만 ALERT.JS가 실제로로드됩니다.
더
그러나 JS의 실제 다운로드는 클릭 할 때만 수행되기 때문에 특정 이벤트에 대한 바인딩은 약간 지나치게 전달되는 것 같습니다. 좋아, 여기서 우리는 궁극적 인 문제를 던져야한다 - 우리는 JS 파일을 사용자의 위치 영역에 비동기로 다운로드하고 싶지만 실행하려는 경우에만 실행하지는 않는다.
다음 방법이 있으면 좋을 것입니다.
코드 사본은 다음과 같습니다.
var script = document.createElement ( "스크립트");
script.noexecute = true;
script.src = "alert.js";
document.body.appendChild (스크립트);
// 나중에 할 수 있습니다
script.execute ();
불행히도, 이것은 단지 아름다운 꿈입니다. 오늘날 우리의 JavaScript는 여전히 비교적 원시적 이며이 "JS Dream"은 아직 실현되지 않았습니다.
따라서 프로그래머는 해킹 만 사용하여 수행 할 수 있습니다.
일부 프로그래머는 비표준 스크립트 유형을 사용하여 JavaScript를 캐시합니다. 좋다:
코드 사본은 다음과 같습니다.
<스크립트 유형 = 캐시/스크립트 src = "./ alert.js"> </script>
"캐시/스크립트"이므로 브라우저가 전혀 구문 분석 할 수 없으므로 브라우저는 alert.js를 JavaScript로 실행할 수 없지만 JS 파일을 다운로드해야하므로 수행 할 수 있습니다. 불행히도, WebKit은 HTML 표준을 엄격하게 따릅니다. 인식되지 않은 것들에 대해서는 직접 삭제하고 아무것도하지 않습니다. 그래서 우리의 꿈은 다시 깨졌습니다.
그래서 우리는 그것을 조금 더 해킹해야합니다. N과 마찬가지로 몇 년 전에 Preload 이미지를 재생했을 때 객체 태그 (또는 iframe 태그)를 사용할 수 있으므로 다음 코드가 있습니다.
코드 사본은 다음과 같습니다.
함수 cachejs (script_filename) {
var cache = document.createElement ( 'Object');
cache.data = script_filename;
cache.id = "coolshell_script_cache_id";
cache.width = 0;
cache.height = 0;
document.body.appendChild (캐시);
}
그런 다음이 기능을 마지막에 호출합니다. 관련 예를 참조하십시오 : 예 6
Ctrl+shit+i를 누르고 Chrome에서 네트워크 페이지로 전환하면 Alert.js가 다운로드되었지만 실행되지 않았 음을 알 수 있습니다. 그런 다음 브라우저쪽에 캐시가 있기 때문에 Alert.js는 더 이상 서버에서 다운로드되지 않기 때문에 예 5의 메소드를 사용합니다. 따라서 실행 속도를 보장 할 수 있습니다.
이런 종류의 예압에 익숙해야합니다. 다음과 같은 AJAX 메소드를 사용할 수도 있습니다.
코드 사본은 다음과 같습니다.
var xhr = 새로운 xmlhttprequest ();
xhr.open ( 'get', 'new.js');
xhr.send ( '');
나는 더 이상 말하지 않고 여기에 예를 들지 않을 것입니다. 직접 시도해 볼 수 있습니다.
마지막으로, 하나는 ControlJS이고 다른 하나는 headjs이며, 비동기로드 JavaScript 파일을 만드는 데 특별히 사용됩니다.
좋아, 이것은 모든 내용입니다. JavaScript 로딩 및 실행을 이해하고 읽은 후 관련 기술을 이해할 수 있기를 바랍니다. 동시에, 나는 또한 모든 프론트 엔드 전문가들이 당신에게 조언을주기를 바랍니다!