<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><div class="target"><ul class="tabList"><li class="is-active"><button type="button">보디빌딩</button></li><li><button type="button">복싱</button></li><li><button type="button">역도</button></li><li><button type="button">볼링</button></li><li><button type="button">당구</button></li><li><button type="button">아이스하키</button></li><li><button type="button">탁구</button></li><li><button type="button">빙상</button></li><li><button type="button">유도</button></li><li><button type="button">불명</button></li><li><button type="button">레슬링</button></li><li><button type="button">야구</button></li><li><button type="button">축구</button></li><li><button type="button">승마</button></li><li><button type="button">스키</button></li><li><button type="button">태권도</button></li><li><button type="button">핀수영</button></li><li><button type="button">럭비</button></li><li><button type="button">하키</button></li><li><button type="button">게이트볼</button></li><li><button type="button">검도</button></li><li><button type="button">수영</button></li><li><button type="button">수상스키·웨이크보드</button></li><li><button type="button">에어로빅</button></li><li><button type="button">핸드볼</button></li><li><button type="button">트라이애슬론(철인3종경기)</button></li><li><button type="button">테니스</button></li><li><button type="button">배드민턴</button></li><li><button type="button">컬링</button></li><li><button type="button">카누</button></li><li><button type="button">파크골프</button></li><li><button type="button">루지</button></li><li><button type="button">요트</button></li><li><button type="button">농구</button></li><li><button type="button">우슈</button></li><li><button type="button">사격</button></li><li><button type="button">족구</button></li><li><button type="button">스포츠댄스</button></li><li><button type="button">세팍타크로</button></li><li><button type="button">씨름</button></li><li><button type="button">궁도</button></li><li><button type="button">바둑</button></li><li><button type="button">스쿼시</button></li><li><button type="button">배구</button></li><li><button type="button">소프트테니스</button></li><li><button type="button">카라테</button></li><li><button type="button">자전거</button></li><li><button type="button">체조</button></li><li><button type="button">육상</button></li><li><button type="button">골프</button></li><li><button type="button">펜싱</button></li><li><button type="button">패러글라이딩</button></li><li><button type="button">조정</button></li><li><button type="button">양궁</button></li><li><button type="button">산악</button></li><li><button type="button">주짓수</button></li></ul></div>var target = $('.target');var lis = target.find('.tabList li');for(var listLen = 0; listLen < lis.length; listLen++ ){ console.log(1); }var target = $('.target');for(var listLen = 0; listLen < target.find('.tabList li').length; listLen++ ){ console.log(1); }--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| out | |
| in |
| Test name | Executions per second |
|---|---|
| out | 3234.6 Ops/sec |
| in | 603.6 Ops/sec |
Let's dive into the world of MeasureThat.net and analyze the provided benchmark.
Benchmark Definition JSON
The provided Benchmark Definition JSON represents a JavaScript microbenchmark that tests the execution performance of two different approaches: using find() method followed by iteration, and using a direct array length check followed by iteration. The benchmark is designed to measure the performance difference between these two approaches.
Options Compared
There are two options compared in this benchmark:
find() method followed by iterationfind() method to select elements with a specific class, and then iterates over the resulting array using a for loop..tabList li array and then iterates over it using a for loop.Pros and Cons
Here are some pros and cons of each option:
find() can stop iterating as soon as a match is found.find() and potential caching issues.Library Used
In this benchmark, jQuery is used as a library. The $('.target') and $('.tabList li') selectors are part of the jQuery API, which provides a convenient way to select elements in the DOM.
Special JS Feature/Syntax
There doesn't appear to be any special JavaScript features or syntax used in this benchmark that would impact its execution performance.
Other Alternatives
If you were to create a similar benchmark, you could also consider other approaches, such as:
querySelectorAll() instead of find(): This method can be more efficient for selecting elements with multiple selectors.Keep in mind that the choice of approach depends on the specific use case, and it's always a good idea to profile and test different options to determine which one performs best for your particular scenario.
