ホームページ  >  記事  >  ウェブフロントエンド  >  HTML ページでの js ファイルの非同期読み込み

HTML ページでの js ファイルの非同期読み込み

韦小宝
韦小宝オリジナル
2018-03-14 18:29:341798ブラウズ

通常、サードパーティの JS が直接導入されると、サードパーティの JS が遅いと、ユーザーが待機しているときにページのレンダリングがブロックされ、ユーザー エクスペリエンスが良くありません。したがって、すぐに実行する必要のない一部の js は非同期で読み込むことができます。

読み込み方法は以下の2つがあります

script add async="async"

asyncはHTML5の新しい属性であり、それ以前のバージョンのブラウザには非対応です

<script type="text/javascript" async="async" src="http://thirdpart/js.js" ></script>

jsメソッドを使って非同期読み込みを行います

これメソッド 監視ページが読み込まれたら、ページに js ファイルを導入するスクリプトを追加します

(function() {
function asyncLoad() {
var src = "http://thirdpart/js.js";
var urls = src.split(",");
var x = document.getElementsByTagName(&#39;body&#39;);
if(x && x[0]){
for (var i = 0; i < urls.length; i++) {
var s = document.createElement(&#39;script&#39;);
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = urls[i];
x[0].appendChild(s);
}
}
}
window.attachEvent ? window.attachEvent(&#39;onload&#39;, asyncLoad) :
window.addEventListener(&#39;load&#39;, asyncLoad, false);
})();

以上がHTML ページでの js ファイルの非同期読み込みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。