CODEWITHSUNDEEP
javascriptjqueryperformance
peirix
peirix

Reputation: 37771

jQuery html() acting really slow

I was testing something I read earlier about how random Math.random() really is, and wanted to display 10000 numbers that was supposed to be a random number between 0 and 10000000.

To see the test, I chose to just join the array of random numbers to a string with <br> between each integer. And then I just did $("#"+elm).html(randomNumberString); which was really slow. I just figured it was the generation and sorting of random numbers into an array. But as I started placing timers in my code, it got appearant that it was the output that was slowing everything down.

Just as a test I did document.getElementById(elm).innerHTML = randomNumberString;

jQuery.html(): 2500ms getElementById.innerHTML: 170ms

I tried this across all 5 browsers, and the numbers were very close in all browsers... Am I using jQuery wrong in this instance? I also tried append and fetching the element before the timer started, so I could simply do $(elm).html(), but that didn't help. It seems to be the actual html() function that's slowing everything down..?

EDIT I ended up doing this:

randomStringNumber = "<div>" + randomStringNumber + "</div>";

and now the whole thing runs a lot faster: jQuery.html(): 120ms getElementById.innerHTML: 80ms

Still faster using oldschool html, though. And if anyone has an answer to why wrapping it in one element is faster, I'd appreciate that...

Upvotes: 13

Views: 12490

Answers (3)

Haim Evgi
Haim Evgi

Reputation: 125644

25 tip to improve your jquery use

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

http://acsenthil.wordpress.com/2011/07/04/improve-your-jquery-25-excellent-tips/

  1. Load the framework from Google Code
  2. Use a cheat sheet
  3. Combine all your scripts and minify them
  4. Use Firebug’s excellent console logging facilities
  5. Keep selection operations to a minimum by caching
  6. Keep DOM manipulation to a minimum
  7. Wrap everything in a single element when doing any kind of DOM insertion
  8. Use IDs instead of classes wherever possible
  9. Give your selectors a context
  10. Use chaining properly
  11. Learn to use animate properly
  12. Learn about event delegation
  13. Use classes to store state
  14. Even better, use jQuery’s internal data() method to store state
  15. Write your own selectors
  16. Streamline your HTML and modify it once the page has loaded
  17. Lazy load content for speed and SEO benefits
  18. Use jQuery’s utility functions
  19. Use noconflict to rename the jquery object when using other frameworks
  20. How to tell when images have loaded
  21. Always use the latest version
  22. How to check if an element exists
  23. Add a JS class to your HTML attribute
  24. Return ‘false’ to prevent default behaviour
  25. Shorthand for the ready event

Upvotes: 7

Ricibald
Ricibald

Reputation: 9949

The fastest way is this:

 $.getJSON("/Admin/GetFolderList/", function(result) {
        var optionsValues = '<select>';
        $.each(result, function(item) {
            optionsValues += '<option value="' + item.ImageFolderID + '">' + item.Name + '</option>';
        });
        optionsValues += '</select>';
        var options = $('#options');
        options.replaceWith(optionsValues);
    });

According to this link is the fastest way because you wrap everything in a single element when doing any kind of DOM insertion.

Upvotes: 4

Darin Dimitrov
Darin Dimitrov

Reputation: 1039508

This seems like a limitation of the html function. In this discussion the following function was suggested as replacement:

$.fn.replaceHtml = function( val ) {
    var stack = [];
    return this.each( function(i, el) {
        var oldEl = el;
        /*@cc_on // Pure innerHTML is slightly faster in IE
        oldEl.innerHTML = html;
        return oldEl;
        @*/
        var newEl = oldEl.cloneNode(false);
        newEl.innerHTML = html;
        oldEl.parentNode.replaceChild(newEl, oldEl);
        /* Since we just removed the old element from the DOM, return a reference
        to the new element, which can be used to restore variable references. */
        stack.push( newEl );
    }).pushStack( stack );
};

Upvotes: 1

Related Questions