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>

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

alert(“hello world”) ;

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

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

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

document.write 메소드

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

<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이 로드될 때까지 실행을 보류합니다. 나타나는 순서대로 실행하세요. 가장 중요한 것은 3f1c4e4b6b16bbbd69b2ee476dc4f83a가 참조에 추가된 후에는 후속 DOM 렌더링을 차단하지 않는다는 것입니다. 그러나refer는 IE에만 ​​적용되므로 일반적으로 덜 사용됩니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!