3

私が知りたいのは、これに直角からアプローチしているかどうかです。

作成しているasp.netアプリがあります。アプリの全体的な外観にマスターページを使用しています(以下にコードを示します)。

メニューシステムにjQueryの.load()関数のような動的ロードを使用してコンテンツをロードしてもらいたいのですが。それは大丈夫です、そして私はそれを持っています。この.load()関数はinnerHTML、そのコンテンツをページに送り込むために使用します。これは、そのページでモジュール固有のスクリプトとスタイルをロードする場合に問題になります。

私の質問は、このような環境で、これらのモジュールのスクリプトをどのようにロードするのですか?アプリの初期ロード時にすべてのスクリプトをロードする必要がありますか?このアプリは決して「それほど大きく」なることはありませんが、万が一に備えて正しく実行するようにしたいと思います。

マスターシート

<div id="primaryNavigation">
    <ul>
        <li class="current"><a href="../Default.aspx">Main</a></li>
        <li><a href="../Modules/Page1.aspx">Some Overview</a></li>
        <li><a href="../Modules/Page2.aspx">Reporting</a></li>
        <li><a href="../Modules/Page3.aspx">More Reporting</a></li>
        <li><a href="../Modules/Page4.aspx">About</a></li>
    </ul>
</div>

<div id="mainContentContainer">
    <asp:ContentPlaceHolder ID="cphBody" runat="server" />
</div>

Contentタグ内のモジュールの例

<div id="container"> 
    Inside a page

    <script id="scriptToLoad" type="text/javascript">
      alert('Something');

      head.ready(function () { console.log('please print'); }); 
    </script>

</div>

<div id="includeScripts">
    ../Files/Javascript/SomeModuleSpecificJs.js
    ../Files/Javascript/SomeModuleSpecificJs1.js    
</div>

div私のアイデアは、「includeScripts」のIDを持つ各モジュールにを設定し、このようなマスターシート内のメソッドからそれらをロードすることでした。この方法は機能しますが(明らかに多少の調整が必要です)、ユーザーがモジュールをクリックし続けると、最終的にすべてのファイルがロードされます。その場合は、それらすべてをマスターシートにロードすることもできます。

MasterPageがロードされたときに実行されるJS

$navigation = $("#primaryNavigation").delegate('ul li a', 'click', function () {
                    $('#primaryNavigation').find('li').removeClass('current');
                    $(this).parent().addClass('current');

                    $('#mainContentContainer').load($(this).attr('href') + ' #container');

// Obviously this would overwrite the content from the container, this is merely proof of concept
                $('#mainContentContainer').load($(this).attr('href') + ' #includeScripts');

                    var jsArray = $('#includeScripts').text().trim().split("\n");

                    $.each(jsArray, function (index, value) {
                        $.getScript(value);
                    });

                    return false;
                });
4

1 に答える 1

6

についてはわかりませんが.load()、JQueryの、、.html()および.append()その他のいくつかの関連関数は、指定されたHTMLで見つかったスクリプトタグを自動的に実行します。load()それがあなたのためにそれをしないならば、それは代わりに使うのに十分簡単であるはずです$.get(..., function(){$('#myElement').html();});。この目的のために特別に独自の拡張機能を作成することもできます。

スタイルシートは別の話かもしれません。私は通常、ページごとに1つのスタイルシートを使用しました。

編集

私はあなたの質問を読むのにもう少し時間を費やしました、そして私はそれに完全に答えなかったことに気づきました。

アプリの初期ロード時にすべてのスクリプトをロードする必要がありますか?

これは、スクリプトのサイズと、ユーザーがシステムを操作する方法によって異なります。このセミナーでは、Google Waveを作成した人々が、この問題にどのように対処したかについて話します。ある時点で、スピーカーは「知覚されるレイテンシーは最適化するための最も重要なことです」と言います。問題は、初期のバージョンでは、JavaScriptファイル(GWTによって最適化およびコンパイルされた)のサイズが数メガバイトであったことでした。接続が遅い人(携帯電話のブラウザなど)は、受信トレイに何が入っているかを確認する前に、このコードがすべてダウンロードされるまで長時間待たなければなりません。彼らの解決策は、コードに「分割点」を作成して、チャンクでロードできるようにすることでした。受信トレイを表示するために必要なコードを最初にロードすることができますが、連絡先パネルはユーザーが「

しかし、あなたはこれをやり過ぎてしまう可能性があります。このビデオのもう1人の講演者は、読み込みに費やされた時間は、主に2つのカテゴリのいずれかに該当すると述べています。

  • 不要なデータを取得し、
  • HTTPリクエストが多すぎます

各HTTPラウンドトリップにはある程度のオーバーヘッドが伴うため、必要に気付いたときに数ミリ秒で別のラウンドトリップを行う必要がないように、まだ必要のないコードをロードする価値があります。

あなたが言うので:

このアプリは決して「それほど大きく」なることはありません

...おそらく後者のカテゴリに分類されると思います(HTTPリクエストが多すぎます)。その場合の最善の方法は次のとおりです。

  1. Chirpyなどのツールを使用して、すべてのjavascriptファイルを1つのファイルに統合します(デバッグモードでない場合は自動的に縮小できます)。
  2. アプリケーションにこのjavascript機能のすべてを使用しないログインページがある場合は、ログインページscriptの下部にこのjavascriptファイルのタグを追加して、ユーザーが入力に忙しいときにユーザーのブラウザがバックグラウンドでファイルをダウンロードできるようにします。ユーザー名とパスワード。scriptサイトの残りの部分のマスターページには、スクリプトファイルを標準タグに1回含めるだけです。
  3. ユーザーのブラウザがこのファイルを1回だけ要求するように、サイトのキャッシュルールが適切に設定されていることを確認してください。
  4. javascript(特に縮小されたjavascript)はgzip圧縮に非常に適しているため、サイトがこのjavascriptファイルを圧縮するように設定されていることを確認してください。

これを実行すると、JavaScriptファイルをロードすることによる「知覚される待ち時間」がないことがわかります。

アプリケーションが最終的に「それほど大きく」なった場合は、GoogleWaveチームが行ったようにプログラムをモジュールに分割する必要があります。ただし、システムの使用方法に基づいてモジュールを選択してください。たとえば、ごく少数のユーザーだけが管理インターフェースを使用する可能性がある場合は、すべての管理UIコードを、「通常の」ユーザーがダウンロードする必要のない別のモジュールに配置する必要があります。

UIの専門家は、どこに線を引くかを決めるとき、基本的に5分の1秒が、典型的な人間の脳が「それはうまくいったのか」と疑問に思い始めるポイントだと言います。ユーザーがボタンをクリックし、何かが発生するのを見るまでにそれより長く待たなければならない場合、「知覚される待ち時間」のポイントに到達しています。それを超えるものは、ユーザーにとってますます煩わしくなります。

于 2011-03-25T18:13:57.283 に答える