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

通常、サードパーティの 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('body');
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 サイトの他の関連記事を参照してください。