JavaScript의 로딩 및 실행에 대한 자세한 설명

이전 기사 "브라우저 렌더링 원리 소개"에 이어 이번 기사에서는 JavaScript의 로딩 및 실행에 대해 설명합니다.

일반적으로 브라우저에는 JavaScript 실행을 위한 두 가지 주요 기능이 있습니다.

1) 로드 후 즉시 실행

2) 후속 차단 실행 시 페이지 콘텐츠(페이지 렌더링 및 기타 리소스 다운로드 포함)

따라서 여러 JS 파일이 도입되면 브라우저의 경우 이러한 JS 파일이 순차적으로 로드되어 하나씩 실행됩니다. 또 다른.

JavaScript는 HTML 문서의 DOM 트리를 작동할 수 있기 때문에 브라우저는 일반적으로 CSS 파일을 병렬로 다운로드하는 것처럼 JS 파일을 병렬로 다운로드하지 않습니다. 이는 JS 파일의 특수성 때문입니다. 따라서 JavaScript가 후속 DOM 요소를 작동하려고 하면 브라우저는 객체를 찾을 수 없다는 오류를 보고합니다. 이는 JavaScript가 실행될 때 후속 HTML이 차단되고 DOM을 작동할 때 후속 노드가 없기 때문입니다. 나무.

전통적인 방식

다음과 같은 코드를 작성하면:

<script type="text/javascript"  src="http://coolshell.cn/asyncjs/alert.js"></script>

기본적으로 헤드의 <script> 태그는 후속 리소스 로드와 전체 페이지 생성을 차단합니다. 예를 들어 위의 예에는 JS 코드 문장이 하나만 있습니다(예): </script>

alert(“hello world”) ;

효과는 이 JS 파일을 로드할 때 대화 상자가 팝업되므로 후속 리소스는 다음 리소스만 로드됩니다. 이 대화 상자를 클릭하면 전체 페이지가 생성됩니다.

그래서 많은 웹사이트에서는 웹페이지 끝에 js를 넣거나 window.load, $(document).ready(function(){})와 같은 이벤트를 사용합니다.

또한 대부분의 JavaScript 코드는 페이지를 기다릴 필요가 없으므로 비동기 로딩 기능이 필요합니다. 그렇다면 어떻게 비동기적으로 로드할까요?

document.write 메소드

document.write() 메소드가 논블로킹 문제를 해결할 수 있다고 생각할 수도 있습니다. 방법. document.write 메소드를 통해 <script> 태그를 작성하면 동일한 스크립트 태그 내에서 JS 코드에 대해 다음과 같은 작업을 실행할 수 있습니다. 그러나 여전히 전체 페이지가 차단됩니다. 다음은 테스트 코드(예)입니다. </script>

<script type="text/javascript" language="javascript">
    function loadjs(script_filename) {
        document.write(&#39;<&#39; + &#39;script language="javascript" type="text/javascript"&#39;);
        document.write(&#39; src="&#39; + script_filename + &#39;">&#39;);
        document.write(&#39;<&#39;+&#39;/script&#39;+&#39;>&#39;);
        alert("loadjs() exit...");
    } 
    var script = &#39;http://coolshell.cn/asyncjs/alert.js&#39;;
 
    loadjs(script);
    alert("loadjs() finished!");</script>
 <script type="text/javascript" language="javascript">
   alert("another block");</script>

팝업 대화 상자는

loadjs() exit...
loadjs() finished!
hello world
another block

페이지가 표시됩니다.

script defer 및 async 속성

IE는 IE6부터 defer 태그를 사용해 왔습니다. , 예:

<script defer type="text/javascript" src="./alert.js" ></script>

IE의 경우 이 태그는 IE가 JS 파일을 병렬로 다운로드하도록 하고 전체 DOM이 로드될 때까지 실행을 보류합니다. 나타나는 순서대로 실행하세요. 가장 중요한 것은 <script>가 참조에 추가된 후에는 후속 DOM 렌더링을 차단하지 않는다는 것입니다. 그러나refer는 IE에만 ​​적용되므로 일반적으로 덜 사용됩니다. </script>

HMTL 5에는 JavaScript의 비동기 로딩을 위한 속성인 async도 추가되었습니다. 어떤 값을 할당하든 상관없이 해당 값이 표시되는 한 JS 파일이 비동기적으로 로드되기 시작합니다. 그러나 async의 비동기 로딩은 "로딩 후 즉시 실행" 규칙을 충실히 수행한다는 심각한 문제를 안고 있다. 따라서 페이지 렌더링을 차단하지는 않지만 실행 순서와 타이밍을 제어할 수는 없습니다(예).

async 태그를 지원하는 브라우저는 다음과 같습니다. Opera에서는 아직(여기부터는) 지원하지 않으므로 이 방법은 별로 좋지 않습니다.

DOM을 동적으로 생성하는 방법

이 방법이 아마도 가장 일반적으로 사용되는 방법일 것입니다.

function 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(script);
} 
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs(script);

이 방법은 js 파일을 비동기적으로 로드하는 표준 방법이 거의 되었습니다(예). 이 방법은 jsonp 항목에서도 작동합니다. 즉, 스크립트의 src에 대해 배경 스크립트(예: PHP)를 지정할 수 있으며, 이 PHP는 매개변수가 json 문자열인 JavaScript 함수를 반환하며, 이는 사전 정의된 JavaScript 함수를 호출하기 위해 반환됩니다. 작성자의 참고 예: t.js (이 예는 작성자가 이전에 Weibo에서 요청한 비동기 ajax 호출의 작은 예입니다.)

요청 시 JS 비동기 로딩

위의 DOM 메소드 예는 JavaScript의 비동기 로딩 문제를 해결하지만, 우리가 지정한 타이밍에 실행되기를 바라는 문제는 해결하지 못합니다. 따라서 위의 DOM 메서드를 특정 이벤트에 바인딩해야 합니다.

예:

1) window.load 이벤트에 바인딩 (예)

window.load = loadjs("http://coolshell.cn/asyncjs/alert.js")

2) 특정 이벤트에 바인딩 (예)

<p style="cursor: pointer" onclick="LoadJS()">Click to load alert.js </p>

예를 들어 DOM 요소를 클릭하면 JS 파일이 로드됩니다.

더보기

有的人可能会觉得绑定在某个特定事件上似乎过了一点，而在点击时才载入JS又太慢了。这里抛出一个终极问题：我们想要异步地把JS文件下载到用户本地，但是又不执行，仅当我们想要执行的时候才去执行。

作者提出了一种方式，就像多年之前玩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 下按F12（或者Ctrl+Shit+I），切换到 network页，可以看到 alert.js 文件已经下载了但是却没有执行弹出 "hello,world"对话框的操作。然后我们再用之前“绑在特定的事件上”的方式，因为浏览器端有缓存了，不会在从服务器上下载 alert.js 文件了，这样就能保证执行速度了。

我们还可以用Ajax的方式，比如：

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

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

来源：JavaScript 的装载和执行

위 내용은 JavaScript의 로딩 및 실행에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!