Question

I’ve done a test with performance of a jQuery selector.

The two selectors I have tested:

selection_width = total_width - ($('#commands .minimap').outerWidth() + $('#commands .actions').outerWidth());

And:

var commands = $('#commands');
selection_width = total_width - ($('.minimap', commands).outerWidth() + $('.actions', commands).outerWidth());

The second one is way faster than the first one. Is this correct or did I screw up the test somewhere?

Answer 1

In the first test, jQuery uses document.querySelectorAll() (relatively fast) twice. In the second case, jQuery uses document.getElementById() (very fast) once and document.getElementsByClassName() (fast since you declared a context) twice.