ホームページ > 記事 > ウェブフロントエンド > 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('script'); s.type = 'text/javascript'; s.async = true; s.src = urls[i]; x[0].appendChild(s); } } } window.attachEvent ? window.attachEvent('onload', asyncLoad) : window.addEventListener('load', asyncLoad, false); })();
以上がHTML ページでの js ファイルの非同期読み込みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。