Javascript 로딩 및 실행에 대한 자세한 설명_기본지식

먼저 Javascript의 로딩과 실행에 대해 이야기하고 싶습니다. 일반적으로 브라우저에는 Javascript 실행에 대한 두 가지 주요 특징이 있습니다. 1) 로드 후 즉시 실행됩니다. 2) 실행 시 페이지의 후속 콘텐츠(페이지 렌더링 및 기타 리소스 다운로드 포함)를 차단합니다. 따라서 여러 js 파일이 도입되면 브라우저의 경우 이러한 js 파일이 직렬로 로드되어 순차적으로 실행됩니다.

자바스크립트는 HTML 문서의 DOM 트리를 운영할 수 있기 때문에 브라우저는 일반적으로 js 파일을 병렬로 다운로드하는 것과 CSS 파일을 병렬로 다운로드하지 않습니다. 이는 js 파일의 특수성 때문입니다. 따라서 자바스크립트가 후속 DOM 요소를 조작하려는 경우 기본적으로 브라우저는 객체를 찾을 수 없다는 오류를 보고합니다. Javascript가 실행되면 후속 HTML이 차단되고 DOM 트리에 후속 DOM 노드가 없기 때문입니다. 그래서 프로그램에서 오류를 보고했습니다.

전통적인 방식

따라서 코드를 작성할 때 다음 코드를 작성하세요.

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

<스크립트 유형="텍스트/자바스크립트"
src="http://coolshell.cn/asyncjs/alert.js">>

기본적으로 헤드의 <script> 태그는 후속 리소스 로드와 전체 페이지 생성을 차단합니다. 나는 여러분이 살펴볼 특별한 예를 만들었습니다: 예 1. 참고: 내 경고.js에는 경고("hello world")라는 문장이 하나만 있습니다. 이를 통해 자바스크립트가 다음 사항을 어떻게 차단하는지 더 쉽게 확인할 수 있습니다. </p> <p>그래서 왜 많은 웹사이트가 웹페이지 끝에 javascript를 넣거나 window.onload 또는 docmuemt Ready와 같은 이벤트를 사용하는지 아실 겁니다. </p> <p>또한 대부분의 Javascript 코드는 페이지를 기다릴 필요가 없기 때문에 비동기 로딩 기능을 갖추고 있습니다. 그렇다면 어떻게 비동기적으로 로드할까요? </p> <p>document.write 메소드</p> <p>그래서 document.write()가 차단 없이 문제를 해결할 수 있다고 생각할 수도 있습니다. 물론 <script> 태그를 document.write한 후에는 다음 작업을 실행할 수 있다고 생각할 수도 있습니다. 이는 맞습니다. 이는 동일한 스크립트 태그의 Javascript 코드에 해당되지만 전체 페이지에서는 여전히 차단됩니다. 다음은 테스트 코드입니다. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="35700" class="copybut" id="copybut35700" onclick="doCopy('code35700')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code35700"> <br> <script type="text/javascript" 언어="javascript"><br> 함수 loadjs(script_filename) {<br>          document.write('<' 'script 언어="javascript" type="text/javascript"');<br />            document.write(' src="' script_filename '">');<br> document.write('<' '/script' '>');<br> Alert("loadjs() 종료...");<br> }<br> var script = 'http://coolshell.cn/asyncjs/alert.js';<br> Loadjs(스크립트);<br> Alert("loadjs()가 완료되었습니다!");<br> <br> <script type="text/javascript" 언어="javascript"><br> Alert("다른 블록");<br> <br> </div> <p>알림 순서는 어떻게 생각하시나요? 다양한 브라우저에서 시도해 볼 수 있습니다. 닫으려는 테스트 페이지는 다음과 같습니다. 예 2. </p> <p>스크립트의 지연 및 비동기 속성</p> <p>IE는 IE6부터 다음과 같은 지연 태그를 지원했습니다. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="13673" class="copybut" id="copybut13673" onclick="doCopy('code13673')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code13673"> <br> <script defer type="text/javascript" src="./alert.js" ><br> <br> </div> <p>IE의 경우 이 태그를 사용하면 IE가 js 파일을 병렬로 다운로드하고 전체 DOM이 로드될 때까지(DOMContentLoaded) 다중 지연 <script>도 실행됩니다. 달리다. 가장 중요한 점은 <script>를 defer에 추가한 후에는 후속 DOM 렌더링을 차단하지 않는다는 것입니다. 그러나 이 연기는 IE에만 ​​적용되므로 일반적으로 덜 사용됩니다. </p> <p>또한 표준 HTML5에는 javascript의 비동기 로딩을 위한 속성인 async가 추가되어 있습니다. 어떤 값을 지정하든 관계없이 js 파일을 비동기적으로 로딩하기 시작합니다. 그러나 async의 비동기 로딩은 "로딩 후 즉시 실행"이라는 군사 규칙을 충실히 구현한다는 심각한 문제가 있습니다. 따라서 페이지 렌더링을 차단하지는 않지만 순서와 타이밍을 제어할 수는 없습니다. 그의 처형. 이 예를 살펴보면서 느낌을 얻을 수 있습니다. </p> <p>비동기 태그를 지원하는 브라우저는 Firefox 3.6, Chrome 8.0, Safari 5.0, IE 10이며, Opera는 아직(여기부터는) 지원하지 않으므로 이 방법은 별로 좋지 않습니다. 왜냐하면 모든 브라우저가 그것을 할 수 있는 것은 아니기 때문입니다. </p> <p>DOM의 동적 생성</p> <p>아마도 이 방법이 가장 일반적으로 사용되는 방법일 것입니다. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="53194" class="copybut" id="copybut53194" onclick="doCopy('code53194')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code53194"> <br> 함수 loadjs(script_filename) {<br> var script = document.createElement('script');<br> ​ script.setAttribute('type', 'text/javascript');<br> ​ script.setAttribute('src', script_filename);<br> ​ script.setAttribute('id', 'coolshell_script_id');<br> <br> ​ script_id = document.getElementById('coolshell_script_id');<br> If(스크립트_ID){<br>            document.getElementsByTagName('head')[0].removeChild(script_id);<br> }<br> Document.getElementsByTagName('head')[0].appendChild(script);<br> }<br> <br> var script = 'http://coolshell.cn/asyncjs/alert.js';<br> loadjs(스크립트);<br> </div> <p>이 방법은 js 파일을 비동기식으로 로드하는 표준 방법이 되었습니다. 이 방법에 대한 데모는 예 3을 참조하세요. 이 방법은 JSONP에서도 활용되었습니다. 즉, 스크립트의 src에 대해 배경 스크립트(예: PHP)를 지정할 수 있으며, 이 PHP는 매개변수가 json 문자열인 자바스크립트 함수를 반환하고 사전 정의된 자바스크립트 호출을 반환합니다. 기능. 다음 예를 살펴보세요: t.js (이 예는 이전에 Weibo에서 요청한 비동기 ajax 호출의 작은 예입니다.) </p> <p>요청 시 비동기식으로 js 로드</p> <p>위의 DOM 메소드 예는 Javascript의 비동기 로딩 문제를 해결하지만, 우리가 지정한 타이밍에 실행되기를 원하는 문제는 해결하지 못합니다. 따라서 위의 DOM 메소드를 특정 이벤트에 연결하기만 하면 됩니다. </p> <p>예: </p> <p>window.load 이벤트에 연결 - 예 4</p> <p>예제 4와 예 3의 실행 차이점을 비교해야 합니다. 코드 강조 스크립트의 실행과 실행을 확인하기 위해 두 예제 모두에서 코드 강조 자바스크립트를 구체적으로 사용했습니다. 내 알림 실행에 따른 차이점을 알 수 있습니다. .js) </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="34632" class="copybut" id="copybut34632" onclick="doCopy('code34632')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code34632"> <br> window.load = loadjs("<a href="http://coolshell.cn/asyncjs/alert.js">http://coolshell.cn/asyncjs/alert.js</a>")<br> </div> <p>특정 이벤트와 연계 - 예시 5</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="16878" class="copybut" id="copybut16878" onclick="doCopy('code16878')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code16878"> <br> <p style="cursor:pointer" onclick="LoadJS()">alert.js를 로드하려면 클릭하세요</p><br> </div> <p>이 예는 매우 간단합니다. DOM 요소를 클릭하면 실제로 Alert.js가 로드됩니다. </p> <p>더보기</p> <p>그러나 특정 이벤트에 바인딩하는 것은 약간 너무 많은 것 같습니다. 왜냐하면 js는 클릭할 때만 실제로 다운로드되기 때문에 너무 느리기 때문입니다. 자, 여기서 궁극적인 질문에 이르렀습니다. js 파일을 사용자의 로컬 영역에 비동기적으로 다운로드하고 싶지만 실행하지는 않고 실행하고 싶을 때만 실행하고 싶습니다. </p> <p>이런 것도 있으면 좋을 것 같습니다. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="43581" class="copybut" id="copybut43581" onclick="doCopy('code43581')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code43581"> <br> var script = document.createElement("script");<br> script.noexecute = true;<br> script.src = "alert.js";<br> document.body.appendChild(script);<br>  <br> //后面我们可以这么干<br> script.execute();<br> </div> <p>可惜的是，这只是一个美丽的梦想，今天我们的Javascript还比较原始，这个“JS梦”还没有实现呢。</p> <p>所以，我们的程序员只能使用hack的方式来搞。</p> <p>有的程序员使用了非标准的script的type来cache javascript。如：</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="63471" class="copybut" id="copybut63471" onclick="doCopy('code63471')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code63471"> <br> <script type=cache/script src="./alert.js"></script>

因为”cache/script”，这个东西根本就不能被浏览器解析，所以浏览器也就不能把alert.js当javascript去执行，但是他又要去下载js文件，所以就可以搞定了。可惜的是，webkit严格符从了HTML的标准——对于这种不认识的东西，直接删除，什么也不干。于是，我们的梦又破了。

所以，我们需要再hack一下，就像N多年前玩preload图片那样，我们可以动用object标签（也可以动用iframe标签），于是我们有下面这样的代码：

复制代码 代码如下:

function 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(cache);
}

然后，我们在的最后调用一下这个函数。请参看一下相关的示例：示例六

在Chrome下按 Ctrl Shit I，切换到network页，你就可以看到下载了alert.js但是没有执行，然后我们再用示例五的方式，因为浏览器端有缓存了，不会再从服务器上下载alert.js了。所以，就能保证执行速度了。

关于这种preload这种东西你应该不会陌生了。你还可以使用Ajax的方式，如：

复制代码 代码如下:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'new.js');
xhr.send('');

到这里我就不再多说了，也不给示例了，大家可以自己试试去。

最后再提两个js，一个是ControlJS，一个叫HeadJS，专门用来做异步load javascript文件的。

好了，这是所有的内容了，希望大家看过后能对Javascript的载入和执行，以及相关的技术有个了解。同时，也希望各前端高手不吝赐教！