Question

We’ve all seen people who do this:

jQuery('a').each(function(){
    jQuery(this)[0].innerHTML += ' proccessed';
});

function letsPoluteNS() {
    polute = '';
    for (morePolution = 0; morePolution < arguments.length; morePolution++)
        polute.join(arguments[morePolution]);
    return polute;
}

and so on. I was wondering what people have seen the most common JavaScript/jQuery technique that is slowing down the page and/or wasting time for the JavaScript engine.

I know that this question may not seem to fit into what’s an accepted question, yet I’m asking “what is the most common accepted waste?”

Answer 1

I’m guilt of this. Basically using only the element’s class in a jQuery selector. Instead of combining the class selector with the elements tag name.

<div></div>
<div class="hide"></div>
<div class="show"></div>
<div class="hide"></div>
<div class="hide again"></div>

---

$(".hide").hide();

Instead of the quicker

$("div.hide").hide()

---

---

Also this is inefficient, many people don’t make use of the context parameter for selectors

$( selector, [ context ] )

---

   $("#mydiv").click(function () {
      $("#mydiv span").show();
   }

Which can be handled better like this:

   $("#mydiv").click(function () {
      $("span", this).show();
   }