遅延非同期ローディングJavaScript
2760 ワード
Webサイトのインタラクションを強化するために、jQuery、ExtJS、または自分で作成したJSクラスライブラリを使用することがよくあります.これらのファイルは通常、ページの外部ファイルに保存され、体積が大きく、ページのロードに時間がかかり、後のソースのロードを阻害します.
最近Google Analytics統計コードを見ていると、Googleは直接
まずscriptラベルを作成し、asyncプロパティを非同期でロードできるようにしてから、ロードするjsファイルのパスを指定します.上記のコードが実行されると、ページヘッダには次の行が表示されます.
Google Analyticsの統計コードを変更して、私が普段やっているプロジェクトで使用できるようにします.
非同期ロードを有効にする前後の滝図を比較することができます.
....
asyncプロパティが使用されていない場合、後続のリソースはjsファイルのロードが完了してからロードを開始する必要があります.
asyncプロパティを使用すると、ページ上の2つのリソースを同時にロードできます.
注意:asyncはHTML 5のプロパティであり、ブラウザはHTML 5をサポートしなければ効果がありません.
もう1つのケースでは、jsファイルをこんなに早くページにロードする必要がない場合があります.どうすればいいですか?以前書いたJavaScriptイベントリスニングバインディングを参考にして、jsファイルをページのすべての内容を完全にロードしてからロードすることができます.
この方法を使用すると、jsファイルは左右のリソースのロードが完了した後、ロードを開始します.
もちろん、この方法にはもう一つの弊害があります.ページ上の外部リソース(例えば画像)が非常に多い場合、このjsファイルはロードを開始するのに長い間待たなければならない可能性があります.どうやってこの問題を解決しますか?jsに詳しい学生は、解決策を考えていると信じています.あるいは、jQueryの
最近Google Analytics統計コードを見ていると、Googleは直接
<script src="..."></script>
の形式でjsファイルをロードするのではなく、非同期ロードの方法を採用していることがわかりました.(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
//var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
まずscriptラベルを作成し、asyncプロパティを非同期でロードできるようにしてから、ロードするjsファイルのパスを指定します.上記のコードが実行されると、ページヘッダには次の行が表示されます.
<script src="http://www.google-analytics.com/ga.js" async="" type="text/javascript"></script>
Google Analyticsの統計コードを変更して、私が普段やっているプロジェクトで使用できるようにします.
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://CodeCTO.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
非同期ロードを有効にする前後の滝図を比較することができます.
....
asyncプロパティが使用されていない場合、後続のリソースはjsファイルのロードが完了してからロードを開始する必要があります.
asyncプロパティを使用すると、ページ上の2つのリソースを同時にロードできます.
注意:asyncはHTML 5のプロパティであり、ブラウザはHTML 5をサポートしなければ効果がありません.
もう1つのケースでは、jsファイルをこんなに早くページにロードする必要がない場合があります.どうすればいいですか?以前書いたJavaScriptイベントリスニングバインディングを参考にして、jsファイルをページのすべての内容を完全にロードしてからロードすることができます.
(function() {
function async_load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://CodeCTO.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent){
window.attachEvent('onload', async_load);
}else{
window.addEventListener('load', async_load, false);
}
})();
この方法を使用すると、jsファイルは左右のリソースのロードが完了した後、ロードを開始します.
もちろん、この方法にはもう一つの弊害があります.ページ上の外部リソース(例えば画像)が非常に多い場合、このjsファイルはロードを開始するのに長い間待たなければならない可能性があります.どうやってこの問題を解決しますか?jsに詳しい学生は、解決策を考えていると信じています.あるいは、jQueryの
$(document).ready()
の方法を参考にすることができます.