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

回答:

14

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

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

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

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

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

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

— ガレス・ファリントン
ソース
1
Yahooは、Firefox用のYSlowプラグインも配布しています。これは、上記のベストプラクティスに照らしてページを分析し、レポートカードを提供します。developer.yahoo.com/yslow-
— アラン
1
ページが最初にレンダリングされるときにスクリプトをロードする必要のないサイト要素がある場合に使用できる非同期ロードなどの手法もあります。これと、ページの下部近くにスクリプトを配置することには制限があります。場合によっては、ドキュメントヘッドにJSをロードする必要があります。
— ジェイソンバーチ
7

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/

— 崩壊者
ソース
1
ねえ、あなたはCDNingを盗んだ。それはカナダの何かをすることを意味することになっています！;）
— ジェイソンバーチ
jajajajaの良いもの
— 崩壊者
7

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/

— ジェフ・アトウッド
ソース
3

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

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

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

— ジェイソンバーチ
ソース
1

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

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つのテストを実行しましたが、結果は次のとおりです。

通常のセットアップ

ヘッドにcss、下部にjavascriptを使用したページ読み込み

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

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

ノンブロッキングJS

ノンブロッキングJavaScriptを使用したページの読み込み

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

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

すべてが非ブロッキングであるページの読み込み

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

結論

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

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

もっと：

— サイフ・ベチャン
ソース
違いは青い線の位置です。私が推測しているのは、ページのレンダリングが開始されるときです。エンドユーザーの観点から見ると、これはページが「ロード」されたとき、つまりユーザーがコンテンツを見始めたときです。最初の例では、最後のJSファイルが読み込まれた後、900ミリ秒の時点でレンダリングが開始されます。2つ目は、スタイルシートが読み込まれた後です（〜700ms）。3番目では、HTMLがダウンロードされた後です（約500ミリ秒）。ページのレンダリング後に実際にCSSをロードしたくないので、2番目のアプローチを使用します。
— ティム噴水
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.