CODEWITHSUNDEEP
jqueryperformancedynamic-loading
Toskan
Toskan

Reputation: 14931

Jquery performance: what is better in most browsers, for loading and caching of js and css files?

Since I swapped from prototype to jquery i'm going through a lot of performance issues I never knew existed before.

but that's not the question. The question is about this function i'm using: (note we have a huuge web application) I'm using this function:

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

So this function is used to load js files if they are required for a certain element of the web page. Since we have so many pages with sometimes little on them, and sometimes loads on them, this approach seemed to make sense. BUT: Since this functions loads on demand, and not like standardly in the header, i'm not sure whether this creates a performance problem by itself. In FF 10 i get 200-600 ms see here

Have a look here at the different approach with the hardcoded values in header:

Hardcoded head js links i'm getting ~100-300 ms

drop all support for the on demand loading? do you get similar results?

EDIT i want to crossreference this question, because it seems relevant since jquery / firefox seems to not deal the caching of the on demand javascript loading correctly. Sometimes it works, then on the same page it does not work again.

Upvotes: 0

Views: 266

Answers (2)

Erv
Erv

Reputation: 415

As Eli Gassert suggested you can use a thirdparty dependency loader To do it on your own change your function to this

  loadJsNow: function(libFilename){

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

This will load the file but it will not be in the DOM. If you want you can add them to the header add this into MyApp:

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

and this into the method:

  this.headElementRef.appendChild(fileref);

Upvotes: 0

Eli Gassert
Eli Gassert

Reputation: 9763

Have you considered using requirejs instead? I'm not one for responding to a question and giving an answer not directly relevant to the question, but in this case it might really help you.

I modified your script to use requirejs and to still use async and to fire events when done. This will allow for multiple, async requests for multiple scripts but still only execute when all the scripts are ready.

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>

Upvotes: 1

Related Questions