JavaScriptでの読み込みと実行について詳しく解説

前回の記事「ブラウザのレンダリング原理の紹介」に続き、この記事では JavaScript の読み込みと実行について説明します。

一般的に言えば、ブラウザには JavaScript を実行するための 2 つの主要な機能があります:

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>

基本的に、head 内の <script> タグは、後続のリソースの読み込みとページ全体の生成をブロックします。たとえば、上記の例では、JS コード (例) が 1 つだけあります: </script>

alert(“hello world”) ;

その結果、この JS ファイルをロードするときにダイアログ ボックスがポップアップするため、このダイアログ ボックスをクリックした後でのみ後続のリソースがロードされます。ページ全体がロードされて生成されます。

そのため、多くの Web サイトでは Web ページの最後に js を配置するか、window.load、$(document).ready(function(){}) などのイベントを使用します。

さらに、ほとんどの JavaScript コードはページを待つ必要がないため、非同期読み込み機能が必要です。では、どうすれば非同期にロードできるのでしょうか?

document.write メソッド

document.write() メソッドがブロックせずに問題を解決できると思うかもしれません。 document.write メソッドを通じて <script> タグを記述することにより、同じ 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

その後、ページが表示されます。

スクリプトの defer 属性と async 属性

IE は、IE6 以降、次のような defer タグを使用しています。

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

IE の場合、このタグにより、IE は JS ファイルを並行してダウンロードし、後に配置しますDOM 全体がロードされるまで保留を実行すると、複数の defer <script> も出現順に実行されます。最も重要なことは、<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 中国語 Web サイトの他の関連記事を参照してください。