0

自从我从原型交换到 jquery 后，我遇到了很多我以前从未知道存在的性能问题。

但这不是问题。问题是关于我正在使用的这个功能：（注意我们有一个巨大的网络应用程序）我正在使用这个功能：

<!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>

因此，如果网页的某个元素需要这些文件，则使用此函数加载 js 文件。由于我们有很多页面，有时很少，有时会加载，这种方法似乎很有意义。但是：由于这个函数是按需加载的，而不是像标题中的标准那样，我不确定这是否会造成性能问题。在 FF 10 中，我得到 200-600 毫秒 ，请参见此处

看看这里在标题中使用硬编码值的不同方法：

硬编码的头部 js 链接 我得到 ~100-300 毫秒

放弃对按需加载的所有支持？你得到类似的结果吗？

编辑我想交叉引用这个问题，因为它似乎相关，因为 jquery/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 回答