0

JavaScript をより少ない部分に統合し、http リクエストの数を減らすことは、多くの場合推奨される最適化です。小規模なサイトでは、次のような構造に簡単に到達できます。

/js/jQuery-xx.js
/js/plugins.js
/js/app.js

app.jsかなり重くなる可能性のある控えめなサイト (jQuery を少しだけ洗練したもの) でさえ。整理するために、実装を論理ビットに分割するのは簡単です。

..
/js/app-global.js
/js/app-contact.js
/js/app-products.js
/js/app-splash.js

個別のファイルとして、特定のコンテキストでそれらを要求するのは簡単ですが、個々のサイズは非常に小さく、1 ピースあたり約 1 ～ 3 kb です。を務めたapp.js。

しかしapp.js、約 20 個ほどの jQuery セレクターと、ほとんどのページで使用されていないその他の JavaScript を含むファイルであることが私には思い浮かびます。ほとんどのコンテキストに存在しない要素を対象とする場合、これらの jQuery セレクターを起動させるために CPU サイクルが浪費されているようです。

より差し迫った最適化はどれですか: • http リクエストの削減? • 未使用の jQuery セレクターを減らすには？

プロファイリングに Chrome の監査ツールを使用していますが、javascript ファイルのネットワーク リクエストを減らすことを推奨しています。膨張を測定するためのガイドラインはありjQuery.ready(…);ますか?

アップデート

提示された証拠を比較検討する最も簡単な方法は、実装コードを 1 つのファイルとして提供し、ルーティング システムを使用してさまざまなモジュールをアクティブにすることです。私の場合、すでに構築した単純な php ルーターに接続しました。

root.php

<script type="text/javascript">
var myApp = {
    modules: {}
    bootstrap: function()
    {
    <?php
    if ( $pageId == 'contact' )
      echo 'myApp.modules.contact();';

    if ( $pageId == 'index' )
      echo 'myApp.modules.splash();';

    if ( preg_match( '~^help/~iu', $pageid ) )
      echo 'myApp.modules.faq();';
   ?>
   }      
}
</script>
<script type="text/javascript" src="/js/jquery1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-plugins.js"></script>
<script type="text/javascript" src="/js/myApp.js"></script>

myApp.js

$(document).ready(function()
{
   myApp.bootstrap();
   //… global jQuery stuff …
});

// Define modules

myApp.modules.splash = function() {
  $('#splash').click(
     //…etc…
  );
}

myApp.modules.faq = function() {
  $('.faq').show( 
     //…etc…
  );
}

myApp.modules.contact = function() {
  $('.contact').bind(
     //…etc…
  );
}
4

2 に答える 2

3

できるだけ少ないファイルで静的コンテンツを提供することが常に推奨されます。存在しないコンテンツでの実行が心配な場合は、ページの読み込み時にすべてが自動的に起動するのではなく、指示されたときに起動するようにコードを整理する必要があります。そうすれば、特定のページで必要なコードのみを実行できます。最も簡単な方法は、各ページのコンテンツを独自の関数でラップすることです。

window.aboutPage = function() {
    $('').css(); //some stuff
}

次に、aboutページの下部で、読み込み後にすべての外部スクリプトが適切な関数を起動します

<script>$(window.aboutPage) //fire aobutPage stuff on ready</script>

このコードのモジュール化を実現できるフレームワークもあります

于 2013-06-12T23:11:16.820 に答える
1

モジュールを使用している場合 (RequireJS だと思いますか?)、単純な「ルーター」を実装することで、グローバル/ウィンドウ オブジェクトに多数の関数を配置することを回避できます。メイン アプリ モジュールで、次のような「ルート」のハッシュを定義します。

var routes = {
    '/contact': contact,
    '/products': products,
    '/splash': splash
};

contact、products、およびのそれぞれは、 splash「DOM の準備ができている」ときに呼び出したい関数です。次に、同じアプリ モジュールの他の場所で、次のような適切な関数を jQuery の準備完了ハンドラーとして渡します。

$(routes[window.location.pathname])

ご了承ください：

  1. 本当に必要な URL/パスの部分のみを使用していることを確認するために、何か凝ったことをする必要があるかもしれません。
  2. (必要に応じて) jQuery の依存関係を削除し、RequireJS のdomReady. それらは明らかに同じように機能します。
于 2013-06-13T01:27:55.067 に答える