js で遅延読み込みを実装する方法は何通りありますか? js で遅延読み込みを行う 6 つの方法の紹介-jsチュートリアル-php.cn

js で遅延読み込みを実装する方法は何通りありますか? js で遅延読み込みを行う 6 つの方法の紹介

不言

リリース： 2018-08-22 11:37:01

オリジナル

2571 人が閲覧しました

<p class="markdown_views">この記事の内容は、js で遅延読み込みを実装する方法は何通りあるのかについてです。 js の遅延読み込みの 6 つの方法の紹介は、参考になると思います。 </p> <p>JS 遅延読み込み。これは、JavaScript ファイルを読み込む前にページが読み込まれるのを待つことを意味します。 <br>JS の遅延読み込みにより、ページの読み込み速度が向上します。 <br>一般的なメソッドは次のとおりです: </p> <p>defer属性 <br>async属性 <br>DOMメソッドの動的作成 <br>jQueryのgetScriptメソッドを使用 <br>setTimeout遅延メソッドを使用 <br>JSを最後にロードする </p> <p><strong>1. defer属性 </strong> <br>HTML 4.01は<script> タグは defer 属性を定義します。 <code><script></code>标签定义了 defer属性。 <br>用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。</p> <p>在<code><script></code> 元素中设置 <code>defer</code> 属性，等于告诉浏览器立即下载，但延迟执行。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html> <head> <script src="test1.js" defer="defer"></script> <script src="test2.js" defer="defer"></script> </head> <body>  </body> </html></pre><div class="contentsignin">ログイン後にコピー</div></div><p>说明：虽然<code><script></code> 元素放在了<code><head></code>元素中，但包含的脚本将延迟浏览器遇到<code></html></code>标签后再执行。</p><p>HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行。</p><p>defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。 <strong><br/></strong></p><p><strong>2、async属性</strong> <br/></p><p>HTML5 为 <code><script></code>标签定义了 <code>async</code>属性。与<code>defer</code>目的: スクリプトが実行時にページの構造に影響を与えないことを示します。つまり、スクリプトは、実行前にページ全体が解析されるまで遅延されます。 <strong></strong> <code><script></code> 要素に <code>defer</code> 属性を設定します。これは、ブラウザにすぐにダウンロードするが実行を遅らせるように指示するのと同じです。 <br/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><!DOCTYPE html> <html> <head> <script src="test1.js" async></script> <script src="test2.js" async></script> </head> <body>  </body> </html></pre><div class="contentsignin">ログイン後にコピー</div></div><strong>注: <code><script></code> 要素は <code><head></code> 要素内に配置されていますが、含まれているスクリプトによりブラウザが <code><</code> に遭遇するのが遅れます。 /html></code> タグを実行する前に。 </strong></p>HTML5 仕様では、スクリプトは出現順に実行する必要があります。実際には、遅延スクリプトは必ずしも順番に実行されるわけではありません。 <p><br/> defer 属性は外部スクリプトファイルにのみ適用されます。 HTML5 をサポートする実装では、埋め込みスクリプトによって設定された defer 属性が無視されます。 </p><p><br/><strong></strong></p>2. async 属性<p><strong></strong>HTML5 は、<code><script></code> タグの <code>async</code> 属性を定義します。 <code>defer</code> 属性と同様に、これらは処理スクリプトの動作を変更するために使用されます。繰り返しますが、</p> は外部スクリプトファイルでのみ機能します。 <p> <strong>目的: ページの他のコンテンツを非同期で</strong>ロードするために、スクリプトがダウンロードされて実行されるまでページを待たせないでください。 </p><p><strong>非同期スクリプトは、ページ読み込みイベントの前に実行する必要があります。 </strong> スクリプトが順番に実行されるという保証はありません。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">//这些代码应被放置在</body>标签前（接近HTML文件的底部） <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if(window.addEventListener) window.addEventListener("load",downloadJSAtOnload,false); else if(window.attachEvent) window.attachEvent("onload",downloadJAAtOnload); else window.onload = downloadJSAtload;</script></pre><div class="contentsignin">ログイン後にコピー</div></div><p>非同期は、遅延と同様に、他のリソースのダウンロードをブロックしないため、ページの読み込みには影響しません。 <strong></strong>欠点: ロードの順序を制御できません</p><p></p><p>3. DOMメソッドを動的に作成します<a href="//m.sbmmt.com/js-tutorial-350405.html" target="_self"></a><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$.getScript("outer.js",function(){ //回调函数，成功获取文件后执行的函数 console.log("脚本加载完成") });</pre><div class="contentsignin">ログイン後にコピー</div></div><br>5. setTimeoutの遅延メソッドを使用します<p><a href="//m.sbmmt.com/js-tutorial-375369.html" target="_self"></a> <br>6. JS を最後に読み込むようにします</p> <p><a href="//m.sbmmt.com/js-tutorial-1967.html" target="_self">関連する推奨事項:</a></p>🎜 JavaScript の遅延読み込み🎜🎜🎜🎜🎜JavaScript での画像の遅延読み込みの詳細な説明🎜🎜🎜🎜🎜JavaScript 画像の遅延読み込みライブラリ Echo.js_javascript のヒント🎜🎜

以上がjs で遅延読み込みを実装する方法は何通りありますか? js で遅延読み込みを行う 6 つの方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。