JavaScript の遅延読み込み

JavaScript を遅延読み込みする方法

JavaScript の真の遅延読み込みとは、ページ コンテンツが完全に読み込まれた後にのみ JavaScript を読み込みまたは解析することを意味します (これは、JavaScript がページ速度やクリティカル レンダリング パスに影響を与えることができないことを意味します)。

• 「onload」イベントを使用して外部 JavaScript リソースを呼び出します

• ページのコンテンツが読み込まれる前に外部 JavaScript リソースを読み込むことはできません

• 外部 JavaScript リソースはコンテンツが読み込まれた後にのみ実行を開始し、ページに影響します

説明

インターネットでは、人々が解決策を見つけようとして狂ってしまうことがよくありますが、JavaScript の遅延読み込みもその 1 つです。

多くの人は、「遅延を使用するだけ」、「非同期を使用するだけ」、または「ページの下部に JavaScript を配置するだけ」と言いますが、これらは問題を解決しません。ページが完全にロードされてから (そしてのみ)完全にロードされた後) 外部 JS がロードされます。これらのメソッドでは、Google Page Speed Tool から得られる「JavaScript の読み込みの遅延」警告を通過させることもできません (テスト中に、上記の 3 つのメソッドでこの警告を削除できることが判明したため、翻訳者はこれについていくつかの疑問を抱いています)。

この解決策が答えます。

外部 JavaScript ファイルのスクリプトを呼び出します

このコードは、HTML ドキュメントの 36cc49f0c466276486e50c850b7e4956 タグの前 (HTML ドキュメントの下部近く) に配置されます。外部スクリプトの名前は defer.js です。 36cc49f0c466276486e50c850b7e4956标签之前（靠近HTML文档底部）。外部脚本的名称为defer.js。

<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", downloadJSAtOnload );} else { 
    window.onload = downloadJSAtOnload;}
</script>

这段脚本做了什么？

这段代码说等文档完全加载完，然后加载外部文件”defer.js“。

详细说明

• 1、复制上面的代码

• 2、把代码粘贴到你的HTML文档中，36cc49f0c466276486e50c850b7e4956标签之前

• 3、把defer.js改成你外部文件的名字

• 4、确保到你文件的路径是正确的。例如：如果你使用”defer.js“，那么”defer.js“文件必须和你的HTML文件在相同文件夹下

你可以用它来干嘛（或不能干嘛）

这段代码在你的页面还没完全加载完成之前不会加载外链文件。你应该把你的JavaScript分成两组，一组是页面需要加载的，另一组是做页面加载后要做的事情（比如寻找click事件或其他事情）。可以接受等待并且一直到页面加载后才加载的JavaScript应该都被放到一个外部文件中调用。

例如，在该页面中我使用了上述的脚本来延迟加载谷歌统计、Viglink、以及底部的Google plus头像。我没有理由在页面初始时加载这些文件，因为这些文件和我上述的内容是不相关的，是非必须加载的。也许在你的页面上也会有相同类型的东西，你会在展示给你的用户内容之前让用户等待加载这些资源吗？

为什么其他方式不行？

内联、把脚本放到最底部、使用defer或者async这些方法都没有完成先让页面加载，然后在加载JS的目标，并且这些方式也确实不通用以及跨浏览器。

为什么这很重要？

这是因为Google把页面的加载速度作为排名的一个因素，也因为用户想要更快的加载页面。这对你的移动端SEO也大有益处。Google是从它被调用时开始到页面初始化加载完成来测量你的页面加载速度。这也意味着你需要让页面的loadrrreee

このスクリプトは何をしますか?

このコードは、ドキュメントが完全にロードされるまで待ってから、外部ファイル「defer.js」をロードすることを示しています。

詳しい手順

1. 上記のコードをコピーします

2. コードを HTML ドキュメントの 36cc49f0c466276486e50c850b7e4956 タグの前に貼り付けます

• 3. defer.js を外部ファイルの名前に置き換えます
  4. ファイルへのパスが正しいことを確認します。例: 「defer.js」を使用する場合、「defer.js」ファイルは HTML ファイルと同じフォルダーに存在する必要があります🎜🎜🎜🎜それを何に使用できるか (または何ができないか)🎜 🎜この段落 コードは、ページが完全に読み込まれるまで外部リンク ファイルを読み込みません。 JavaScript を 2 つのグループに分割する必要があります。1 つはページの読み込みに必要なグループで、もう 1 つはページの読み込み後に必要な処理 (クリック イベントやその他の処理の検索など) を実行するグ​​ループです。ページの読み込み後まで待機して読み込むことができる JavaScript は、外部ファイルから呼び出す必要があります。 🎜🎜たとえば、このページでは、上記のスクリプトを使用して、Google 統計、Viglink、下部の Google プラス アバターを遅延読み込みしました。これらのファイルは上で述べたコンテンツに関連しておらず、ロードする必要がないため、ページの先頭でこれらのファイルをロードする理由はありません。おそらくページ上に同じタイプのものがある場合、ユーザー コンテンツを表示する前に、それらのリソースが読み込まれるまでユーザーを待たせるでしょうか? 🎜🎜なぜ他の方法ではないのでしょうか? 🎜🎜インライン化、スクリプトの下部への配置、defer または async の使用はすべて、最初にページをロードしてから JS をロードするという目的を達成できません。これらのメソッドは実際にはユニバーサルではなく、ブラウザー間で使用できるものではありません。 🎜🎜なぜこれが重要なのでしょうか? 🎜🎜これは、Google がページの読み込み速度をランキング要因として使用しており、ユーザーはページの読み込み速度が速いことを望んでいるからです。これは、モバイル SEO🎜 にも最適です。 Google は、 ページの読み込み速度 🎜 を呼び出してから最初のページの読み込みが完了するまでを測定します。これは、ページの load イベントをできるだけ早く完了させる必要があることも意味します。 Google は、ホームページの読み込み時間に基づいてページを評価します (ユーザーはページが読み込まれるのを待っていることを忘れないでください)。 🎜🎜Google は、🎜スクロールせずに見えるコンテンツの優先順位付け🎜 (画面のコンテンツが優先される) を積極的に推進および推奨しています。したがって、オフスクリーン リソース (js、css、画像など) をメインのレンダリング パスから遠ざけることは、努力する価値があります。それがユーザーを幸せにし、Google を幸せにするのであれば、やらない理由はありません。 🎜🎜使用例🎜🎜 ページを作成しました。🎜ここをクリック🎜すると、ここで上記のコード スニペットを使用したことがわかります。 🎜🎜サンプル ファイルのテスト🎜🎜わかりました。説明のために、テスト用にいくつかのテスト ページを作成しました。各ページは同じことを行います。純粋な HTML ページではスクリプトを使用し、「hello world」を出力するまで 2 秒待ちます。これらのページをテストすると、コンテンツをすぐに表示する方法が 1 つしかないことがわかります (ページの読み込み時間には、待機する 2 秒は含まれません)。 🎜🎜🎜🎜スクリプトインライン - 🎜クリックして表示🎜🎜

• 外部スクリプトをロードするには「defer」を使用します— クリックして表示

• 上記の推奨コードを使用してください— クリックして表示

キーポイント

最も重要なポイントは次のとおりですできるだけ早くユーザーにコンテンツを提示します。一部のスクリプトは視覚的なコンテンツの下で処理を行うため、JavaScript の処理方法ではそのようなことは行っていません。ページの下部がどれほどクールであっても、ユーザーがページの下部までスクロールしないのであれば、ページの下部をクールにするスクリプトをロードする理由はありません。

ツール

JavaScript使用ツールを使用して、ページでJavaScriptがどのように使用されているかをテストします。

---

補足拡張

1. defer と async

どちらの属性もページ最適化の目的で使用できますが、違いは何ですか? 1 枚の写真で答えがわかります:

2. 折りたたまずに

wordstream の定義によると:

折りたたまずに は、Web ページの領域を指します。スクロール。

Below the fold是指网页中只有滚动才可见的区域。

Above the Fold指不需滚动页面就可见的内容区域。

一般而言，不需滚动就展示在屏幕中的内容会接受更多的注意力，需要滚动才可见的内容受到较低的关注。foldAbove the Fold は、ページをスクロールせずに表示されるコンテンツ領域を指します。

一般的に、スクロールせずに画面に表示されるコンテンツはより多くの注目を集めますが、スクロールして表示する必要があるコンテンツはあまり注目されません。 foldビューはニュース出版業界からのものです。

🎜🎜