Question

自从我从原型交换到jquery后，我经历了很多性能问题，我以前从未知道过。

但这不是问题。问题是我正在使用的这个功能：（注意我们有一个huuge 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>

因此，如果网页的某个元素需要js文件，则此函数用于加载js文件。由于我们有这么多的页面，有时很少，有时加载它们，这种方法似乎有意义。但：由于此函数按需加载，而不是标题中的标准，我不确定这是否会自行产生性能问题。在FF 10中，我得到200-600毫秒 see here

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

Hardcoded head js links 我得到~100-300毫秒

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

编辑我想要crossreference this question，因为它似乎相关，因为jquery / firefox似乎没有正确处理按需javascript加载的缓存。有时它可以工作，然后在同一页面上它不再起作用。

Answer 1

您是否考虑过使用requirejs？我不是回答问题并给出与问题没有直接关系的答案的人，但在这种情况下，它可能对你有所帮助。

我修改了你的脚本以使用requirejs并仍然使用async并在完成时触发事件。这将允许多个脚本的多个异步请求，但仍然只在所有脚本准备就绪时执行。

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>

Answer 2

正如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);

Jquery性能：在大多数浏览器中，js和css文件的加载和缓存有什么用？

2 个答案: