Specific on left or right hand of jquery selector

Benchmark created on

Description

http://jqfundamentals.com/#chapter-9 says "Be specific on the right-hand side of your selector, and less specific on the left.", is this true? The optimized according to this book is the second test here.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div class="div1"><span class="s1"></span><span class="s2"></span><span class="s3"></span><span class="s4"></span><span class="s5"></span><span class="s6"></span><span class="s7"></span><span class="s8"></span><span class="s9"></span></div>

<div class="div2"><span class="s11"></span><span class="s12"></span><span class="s13"></span><span class="s14"></span><span class="s15"></span><span class="s16"></span><span class="s17"></span><span class="s18"></span><span class="s19"></span></div>

<div class="div3"><span class="s21"></span><span class="s22"></span><span class="s23"></span><span class="s4"></span><span class="s25"></span><span class="s26"></span><span class="s7"></span><span class="s28"></span><span class="s29"></span></div>

Test runner

Ready to run.

Testing in
TestOps/sec
Specific on left hand
var e = $("div.div2 .s15");
ready
Specific on right hand
var e = $(".div2 span.s15");
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.