ホームページ > 記事 > ウェブフロントエンド > 詳細なサンプルコードを使用して JavaScript の読み込みと実行をより効率的にする方法
詳細なサンプルコードを使用して JavaScript の読み込みと実行をより効率的にする方法
- 伊谢尔伦オリジナル
- 2017-07-21 16:04:031256ブラウズ
スクリプトは、HTML ページの先頭または本文に配置できます。
スクリプトを本文に挿入します。ブラウザが 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを検出すると、ブラウザはスクリプトがテキスト タグを挿入するか HTML タグを挿入するかわからないため、HTML ページの分析を停止してスクリプトを実行します。 src を使用してスクリプトを追加すると、ブラウザは同じことを行います。スクリプトの処理中、ページのレンダリングとユーザーの操作は完全にブロックされます。スクリプトのダウンロードと実行により、ページのレンダリングに使用される画像などの他のリソースのダウンロードがブロックされます。
スクリプトの場所
上記の理由により、スクリプトは常にページの下部、36cc49f0c466276486e50c850b7e4956 の前に配置する必要があります。
簡単な例:
<html> <head> <title>Script Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Hello world!</p> <script type="text/javascript" src="file1.js"></script> <script type="text/javascript" src="file2.js"></script> <script type="text/javascript" src="file3.js"></script> </body> </html>
スクリプトをマージする
スクリプトはページのレンダリングをブロックするため、スクリプトがインラインであるか外部であるかに関係なく、ページでの 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの使用を減らす必要があります。外部スクリプトを扱う場合は、リクエストの確立に時間がかかるため、ブラウザが 100 kb のスクリプトをダウンロードするのにかかる時間は、25 kb のスクリプト 4 つをダウンロードするよりもはるかに短くなります。したがって、ページでは外部スクリプトへの参照を最小限に抑える必要があります。
ノンブロッキング スクリプト
その秘密は、ページの読み込みが完了した後、つまりウィンドウ オブジェクトの onload イベントがトリガーされる前にスクリプトを読み込むことです。これを実装する方法はいくつかあります:
1. defer を使用します
<html>
<head>
<title>Script Defer Example</title>
</head>
<body>
<script defer>
alert("defer");
</script>
<script>
alert("script");
</script>
<script>
window.onload = function(){
alert("load");
};
</script>
</body>
</html> このテクノロジーの欠点は、IE4+ と FF3 でのみサポートされていることです。 .5以上。
ノンブロッキング スクリプト (続き)
2. 動的スクリプト要素
3f1c4e4b6b16bbbd69b2ee476dc4f83a は通常の HTML タグと本質的に異なるものではないため、標準の DOM メソッドを使用してスクリプト ファイル参照を動的に追加できることを知っておく必要があります。方法は以下の通りです:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);このタグをhtmlに追加するとスクリプトファイルのダウンロードが開始されます。このメソッドの特徴の 1 つは、ファイルのダウンロードと実行が HTML ページの他の部分の処理をブロックしないことです。通常、このようなスクリプトは、特にファイルに含まれるコードをページの読み込みイベントで実行する必要がある場合、6c04bd5ca3fcae76e30b72ad730ca86d に配置するよりも 93f0f5c25f18dab9d176bd4f6de5d30e に配置する方が安全です。本文の内容が完全に読み込まれていない場合、IE でも「操作が禁止されています」というエラーが表示されます。
スクリプトファイルがダウンロードされると、スクリプトはすぐに実行されます（FFとOperaは同様に追加された以前のスクリプトの実行を待ちます）。スクリプト自体が実行される場合はこれで問題ありません。ただし、スクリプトにページ上の他のスクリプトで使用されるインターフェイスが含まれている場合は、スクリプトがロードされて使用可能であることを確認する必要があります。幸いなことに、Firefox、Opera、Chrome、および Safari 3 以降では、script タグの src の値を取得した後にロード イベントがトリガーされます。
var script = document.createElement("script")
script.type = "text/javascript";
//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){
alert("Script loaded!");
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);IE は、別のソリューション準備完了状態変更イベントを提供します。ダウンロードされたスクリプト ファイルの状態に応じて、readyState の値は次のとおりです。
「初期化されていない」
デフォルト状態
「loading」
ダウンロード開始
「loaded」
ダウンロード完了
「interactive」
ダウンロードは完了したが完了していないすべて利用可能
「完全」
すべてのデータが利用可能
IE 実装:
var script = document.createElement("script")
script.type = "text/javascript";
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
alert("Script loaded.");
}
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);以上が詳細なサンプルコードを使用して JavaScript の読み込みと実行をより効率的にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。