遅延荷重JS

JavaScriptの遅延ローディングはウェブ上で、あなたが狂って解決策を探しに行くことができる問題の一つです.
多くの人が「defer」や「async」と言っています.「javascriptコードをページの下に置いてください」と言っています.
上記の方法はすべてウェブページで完全にロードした後、外部jsをロードする問題を解決できません.これらの方法はたまにGoogleページの速度テストツールの「遅延ロードjavascript」から警告を受けます.ここのソリューションはGoogleヘルプページからのオススメです.
JavaScriptのロードをどのように遅延しますか?
以下はGoogleおすすめのコードです.これらのコードはラベルの前に置かれるべきです(HTMLファイルの下に近い).また、外部の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のラベルに貼り付ける前(HTMLファイルの底近く)
3.「defer.js」を修正して外部JSファイル名にします.
4.あなたのファイルパスが正しいことを確認します.例えば、「defer.js」だけを入力すると、「defer.js」ファイルは必ずHTMLファイルと同じフォルダにあります.
このコードはどこで使えますか?
このコードはドキュメントが読み込まれるまで、指定された外部のJSファイルを読み込むことができます.したがって、これらのページを正常にロードする必要があるjavascriptコードをここに置くべきではない.JavaScriptコードを二つのグループに分けるべきです.一つは、ページの必要に応じてすぐにロードされるjavascriptコードであり、もう一つはページローディング後に操作されるjavascriptコード(例えば、clickイベントまたは他のものを追加する)である.これらはページのロード後に実行するJavaScriptコードを待って、外部のファイルに置いてから導入してください.
例えば、このページでは上記のファイルを使って遅延読み込みを行います. - Google analtics、Viglink(私はどうやってお金を稼いでいますか?)と、下にあるGoogle+バッジ(私のソーシャルメディア)を表示します.これは私にとって、初期ページでこれらのファイルをロードする理由がありません.初期段階では、上記のような関係のない内容をロードする必要がないからです.あなたのページにも同じ性質のファイルがあるかもしれません.ユーザーにページの内容を見る前に、これらのファイルのロードを待つつもりですか?
なぜ他の方法を使わないですか?
コードを直接挿入し、スクリプトをボトムに置いたり、「defer」や「async」を使ったりしますが、これらの方法はすべて先にページを読み込んでからJSを読み込む目的に達していません.また、各ブラウザでは必ず一致していません.
なぜ重要ですか?
その重要性はGoogleがページのスピードをランキングの要素の一つとしています.ユーザーも素早くページをロードしたいからです.また、モバイルサーチエンジンの最適化も重要である.Googleはページの最初の読み込み時間に基づいてページ速度を測定します.これはあなたができるだけ速くページのロードイベントを得ることを意味します.ページの最初の読み込み時間はGoogleがあなたのウェブページの品質を評価します.また、ユーザーがページの読み込みを待っていることを忘れないでください.Googleは、上記のようなどうでもいい内容を重要性順に並べ、すべてのリソース(js、css、imagsなど)をキーのレンダリング経路から逸脱させることを積極的に推進し、推奨しています.ユーザーを喜ばせ、Googleを楽しませることができれば、あなたはこうするべきです.
使い方の例
ページを作成しました.このページでコードの使用が見られます.
テストさせるサンプルファイル
はい、説明のために、いくつかのサンプルページを作ってあなたにテストをさせました.どのページも同じことをします.これは普通のHTMLページで、2秒待ちで「ハローワールド」を出力するjavascriptスクリプトが含まれています.これらのファイルをテストしてもいいです.ロード時間は2秒の待ち時間を含まないです.

直接スクリプトのページを挿入します. ここをクリックしてください.

は「defer」外部スクリプトを使用するページを持っています. ここをクリックしてください.

上記の推奨コードを使用したページ– ここをクリックしてください.
肝心な点
すべてを圧倒する重要な任務は、できるだけ早くユーザーにコンテンツを渡すことです.私達はずっとどのように私達のjavascriptコードに対応するか考えていません.しかし、ユーザは、どうでもいいスクリプトのいくつかのために、コンテンツのために待たされるべきではない.フッターがどんなにクールであっても、フッターにスクロールしない可能性のあるユーザーに、フッターをクールにするjavascriptファイルをロードさせる理由がありません.
 
参考:http://www.chinaz.com/web/2015/0629/417766.shtml