web-dev-qa-db-ja.com

パフォーマンスを最適化するためにページにJavascriptをロードする最良の方法は何ですか？

JavaScriptをページにロードして、ロードを高速化する方法はありますか？

javascriptoptimizationperformance
14
Jason

できることがいくつかあります。

  1. JavaScriptの前にHTMLとCSSをロードします。これにより、ページをレイアウトしてレンダリングするために必要なすべてがブラウザに提供されます。これにより、ユーザーはページがきびきびしているように見えます。スクリプトタグまたはブロックは、可能な限り本体タグの近くに配置します。

  2. CDNの使用を検討してください。 JQueryのような人気のあるライブラリを使用している場合、多くの企業（google、yahooなど）は、ライブラリのロードに使用できる無料のCDNを運用しています。

  3. 埋め込みスクリプトの代わりに外部ファイルからコードをロードします。これにより、ブラウザーはJSコンテンツをキャッシュする機会を与えられ、まったくロードする必要がなくなります。連続したページの読み込みが速くなります。

  4. WebサーバーでZip圧縮をオンにします。

Yahooには、ページの読み込み時間を短縮するのに役立つ提案の 素晴らしいページ があります。

14
Gareth Farrington

Minifing、gziping、CDNingに加えて（新しい単語？）。ロードを延期することを検討する必要があります。基本的にこれは、スクリプトを動的に追加し、ブロッキングを防ぎ、並行ダウンロードを許可することです。

それを行うには多くの方法があります、これは私が好むものです

<script type="text/javascript">
    function AttachScript(src) {
        window._sf_endpt=(new Date()).getTime();
        var script = document.createElement("script");
        document.getElementsByTagName("body")[0].appendChild(script);
        script.src = src;
    }
    AttachScript("/js/scripts.js");
    AttachScript("http://www.google-analytics.com/ga.js");
</script>

これを閉じるbodyタグの直前に配置し、AttachScriptを使用してすべてのjsファイルをロードします。
詳細はこちら http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

7
The Disintegrator

Googleがアナリティクスを読み込む方法もご覧ください。

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.Push(['_setAccount', 'UA-xxxxxxx-x']);
  _gaq.Push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

「ベストプラクティス」の一種のスクリプトと見なされているため、
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

7
Jeff Atwood

数人のGoogle社員 Velocity 2010で新しいオープンソースプロジェクトを発表Diffable と呼ばれます。 Diffableは、新しいバージョンがリリースされたときに新しいファイル全体を送信するのではなく、ユーザーのキャッシュに保存されているバージョン以降に変更されたJS、HTML、およびCSSの部分のみをインクリメンタルに発行するための魔法を実行します。

この手法はとてつもなくクールであり、現在頻繁に小さなコード変更を伴う大きなJavaScriptコードベースを使用しているWebサイトで最も効果的です（そして努力する価値があります）。これは特に、少なくとも 毎週火曜日に1回のリリース を経て、平均で年間約100件の新しいリリースが行われるGoogleマップのようなアプリケーションに当てはまります。また、HTML5ローカルストレージが広く普及すると、一般的に多くの意味を持ちます。

ちなみに、GoogleのMichael Jonesが（地理空間の文脈で）変更について話すのを見たことがない場合は、彼の全体を見る価値があります GeoWeb 2009の基調講演 。

3
JasonBirch

この質問の更新を提供するため。現代では、ノンブロッキングロードの方法はもう必要ないと思います。ブラウザがあなたのためにそれをします。

StackOverflowに質問を追加しました。ここにコンテンツを追加します。

唯一の違いは、loadイベントが少し早く発生することですが、ファイル自体のロードは同じままです。また、ノンブロッキングスクリプトを使用してonloadがより早く起動しても、JSファイルがより早く起動されるという意味ではありません。私の場合、通常のセットアップが最高でした

さて、最初のスクリプトは次のようになります。

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.stylesは、すべてのファイルのすべてのURLを保持する単なるオブジェクトです。

3つのテストを実行しましたが、結果は次のとおりです。

通常のセットアップ

Page load with css in the head and javascript at the bottom

これは通常のセットアップです。ヘッドに4つのcssファイルがあり、ページの下部に3つのcssファイルがあります。

今、私は何もブロックしていません。すべてが同時にロードされていることがわかります。

ノンブロッキングJS

Page load with non-blocking javascript

これをもう少し進めるために、jsファイルのみを非ブロッキングにしました。上記のスクリプトでこれを行います。私のCSSファイルが負荷をブロックしていることが突然わかります。最初の例では何もブロックしていないため、これは奇妙です。 cssが突然負荷をブロックするのはなぜですか？

すべてがノンブロッキング

Page load with everything non-blocking

最後に、すべての外部ファイルが非ブロッキング方式でロードされるテストを行いました。今、私たちの最初の方法との違いは見られません。どちらも同じように見えます。

結論

私の結論は、ファイルは既に非ブロッキング方式でロードされているということです。特別なスクリプトを追加する必要はありません。

または、私はここで何かが欠けていますか？

もっと：

1
Saif Bechan