0

プロトタイプからjqueryに切り替えたので、これまで存在したことを知らなかった多くのパフォーマンスの問題が発生しています。

しかし、それは問題ではありません。質問は私が使用しているこの関数についてです:(巨大なWebアプリケーションがあることに注意してください）私はこの関数を使用しています：

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>



<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div title="jquery ui exists" style="width: 500px; height: 500px; background-color: lightblue"  >hover me</div>
  <script>
  var MyApp ={
        loadJsNow: function(libFilename){
                //the synchronous call ensures the library is in fact loaded before this
          //(which does not work for crossdomain requests, just for docu)
                //function returns:     

                $.ajax({
                        url: libFilename,
                        dataType: "script",                     
                        type: "GET",
                        async: false,
                        cache: true,
                        complete: function(data){
                           $("div").tooltip();
                        }

                });


            }
    }


       MyApp.loadJsNow("http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js");


  </script>



</body>
</html>

したがって、この関数は、Webページの特定の要素に必要な場合にjsファイルをロードするために使用されます。非常に多くのページがあり、ページがほとんどない場合もあれば、読み込まれる場合もあるため、このアプローチは理にかなっているように見えました。しかし、この関数はオンデマンドで読み込まれ、通常のヘッダーとは異なり、これがそれ自体でパフォーマンスの問題を引き起こすかどうかはわかりません。FF 10では、200〜600ミリ秒かかり ます。こちらをご覧ください

ヘッダーにハードコードされた値を使用した別のアプローチをここで見てください。

ハードコードされたヘッドjsリンク 私は〜100-300ミリ秒を取得しています

オンデマンドローディングのすべてのサポートを削除しますか？同様の結果が得られますか？

編集私はこの質問を相互参照したいと/firefoxがオンデマンドのjavascriptロードのキャッシングを正しく処理していないように見えるためです。時々それは機能します、そして同じページでそれは再び機能しません。

4

2 に答える 2

1

代わりにrequirejsの使用を検討しましたか？私は質問に答えたり、質問に直接関係のない答えをしたりする人ではありませんが、この場合、それは本当にあなたを助けるかもしれません。

私は、requirejsを使用し、非同期を使用し、完了時にイベントを発生させるようにスクリプトを変更しました。これにより、複数のスクリプトに対する複数の非同期リクエストが可能になりますが、それでもすべてのスクリプトの準備ができたときにのみ実行されます。

http://requirejs.org/docs/api.html

http://jsbin.com/oxekod/9/edit

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">var startDate = new Date();</script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://requirejs.org/docs/release/2.1.1/comments/require.js"></script>
<!--
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
-->


<meta charset=utf-8 />
<title>JS Bin</title>

    <!-- make sure this is declared in head -->
    <script>
  var MyApp ={
     queue: []
     , loadJsNow: function(strScript)
    { // add to the queue, but don't start loading just yet...
                MyApp.queue.push(strScript);
    }
  };
  </script>
</head>
<body>
  <div title="jquery ui exists" style="width: 500px; height: 500px; background-color: lightblue"  >hover me</div>

  <!-- throughout your app, add scripts as needed -->
  <script>
    MyApp.loadJsNow("http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js");
  </script>

  <script>
    $(function()
      {
        // when everything's ready, run your scripts through require.
        // after require loads ALL scripts, let jquery trigger a custom event called, say, 'scriptsloaded'
        require(MyApp.queue, function() { $(document).trigger('scriptsloaded'); });
      });
  </script>

  <script>
    $(document).on('scriptsloaded', function()
      {
        // anything that needs to wait for dynamic scripts should wait for the custom event to fire on document
        // once fired, all scripts are loaded, and do what you want.
        $('div').tooltip();

        var endDate = new Date();
        alert('diff: ' + (endDate.getTime() - startDate.getTime()));
      });
  </script>

</body>
</html>
于 2012-11-08T14:55:50.367 に答える
0

Eli Gassert が示唆したように、サードパーティの依存関係ローダーを使用して、自分でそれを行うには、関数をこれに変更します

  loadJsNow: function(libFilename){

      var fileref=document.createElement('script');
      fileref.setAttribute("type","text/javascript");
      fileref.setAttribute("src", libFilename);
     }

これによりファイルがロードされますが、DOM にはありません。必要に応じて、それらをヘッダーに追加して、これを MyApp に追加します。

headElementRef: document.getElementsByTagName("head")[0],

そしてこれをメソッドに：

  this.headElementRef.appendChild(fileref);
于 2012-11-08T19:51:31.550 に答える