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")라는 문장이 하나만 있습니다. 이를 통해 자바스크립트가 다음 사항을 어떻게 차단하는지 더 쉽게 확인할 수 있습니다. </script>

그래서 왜 많은 웹사이트가 웹페이지 끝에 javascript를 넣거나 window.onload 또는 docmuemt Ready와 같은 이벤트를 사용하는지 아실 겁니다.

또한 대부분의 Javascript 코드는 페이지를 기다릴 필요가 없기 때문에 비동기 로딩 기능을 갖추고 있습니다. 그렇다면 어떻게 비동기적으로 로드할까요?

document.write 메소드

그래서 document.write()가 차단 없이 문제를 해결할 수 있다고 생각할 수도 있습니다. 물론 <script> 태그를 document.write한 후에는 다음 작업을 실행할 수 있다고 생각할 수도 있습니다. 이는 맞습니다. 이는 동일한 스크립트 태그의 Javascript 코드에 해당되지만 전체 페이지에서는 여전히 차단됩니다. 다음은 테스트 코드입니다. </script>

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

알림 순서는 어떻게 생각하시나요? 다양한 브라우저에서 시도해 볼 수 있습니다. 닫으려는 테스트 페이지는 다음과 같습니다. 예 2.

스크립트의 지연 및 비동기 속성

IE는 IE6부터 다음과 같은 지연 태그를 지원했습니다.

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

IE의 경우 이 태그를 사용하면 IE가 js 파일을 병렬로 다운로드하고 전체 DOM이 로드될 때까지(DOMContentLoaded) 다중 지연 <script>도 실행됩니다. 달리다. 가장 중요한 점은 <script>를 defer에 추가한 후에는 후속 DOM 렌더링을 차단하지 않는다는 것입니다. 그러나 이 연기는 IE에만 ​​적용되므로 일반적으로 덜 사용됩니다. </script>

또한 표준 HTML5에는 javascript의 비동기 로딩을 위한 속성인 async가 추가되어 있습니다. 어떤 값을 지정하든 관계없이 js 파일을 비동기적으로 로딩하기 시작합니다. 그러나 async의 비동기 로딩은 "로딩 후 즉시 실행"이라는 군사 규칙을 충실히 구현한다는 심각한 문제가 있습니다. 따라서 페이지 렌더링을 차단하지는 않지만 순서와 타이밍을 제어할 수는 없습니다. 그의 처형. 이 예를 살펴보면서 느낌을 얻을 수 있습니다.

비동기 태그를 지원하는 브라우저는 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(스크립트_ID){
           document.getElementsByTagName('head')[0].removeChild(script_id);
}
Document.getElementsByTagName('head')[0].appendChild(script);
}

var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs(스크립트);

이 방법은 js 파일을 비동기식으로 로드하는 표준 방법이 되었습니다. 이 방법에 대한 데모는 예 3을 참조하세요. 이 방법은 JSONP에서도 활용되었습니다. 즉, 스크립트의 src에 대해 배경 스크립트(예: PHP)를 지정할 수 있으며, 이 PHP는 매개변수가 json 문자열인 자바스크립트 함수를 반환하고 사전 정의된 자바스크립트 호출을 반환합니다. 기능. 다음 예를 살펴보세요: t.js (이 예는 이전에 Weibo에서 요청한 비동기 ajax 호출의 작은 예입니다.)

요청 시 비동기식으로 js 로드

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

예:

window.load 이벤트에 연결 - 예 4

예제 4와 예 3의 실행 차이점을 비교해야 합니다. 코드 강조 스크립트의 실행과 실행을 확인하기 위해 두 예제 모두에서 코드 강조 자바스크립트를 구체적으로 사용했습니다. 내 알림 실행에 따른 차이점을 알 수 있습니다. .js)

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

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

특정 이벤트와 연계 - 예시 5

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

alert.js를 로드하려면 클릭하세요

이 예는 매우 간단합니다. DOM 요소를 클릭하면 실제로 Alert.js가 로드됩니다.

더보기

그러나 특정 이벤트에 바인딩하는 것은 약간 너무 많은 것 같습니다. 왜냐하면 js는 클릭할 때만 실제로 다운로드되기 때문에 너무 느리기 때문입니다. 자, 여기서 궁극적인 질문에 이르렀습니다. js 파일을 사용자의 로컬 영역에 비동기적으로 다운로드하고 싶지만 실행하지는 않고 실행하고 싶을 때만 실행하고 싶습니다.

이런 것도 있으면 좋을 것 같습니다.

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

var script = document.createElement("script");
script.noexecute = true;
script.src = "alert.js";
document.body.appendChild(script);
 
//后面我们可以这么干
script.execute();

可惜的是，这只是一个美丽的梦想，今天我们的Javascript还比较原始，这个“JS梦”还没有实现呢。

所以，我们的程序员只能使用hack的方式来搞。

有的程序员使用了非标准的script的type来cache javascript。如：

复制代码 代码如下:

因为”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的载入和执行，以及相关的技术有个了解。同时，也希望各前端高手不吝赐教！