Benchmark: ul li each test - MeasureThat.net

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="food-list">
<li>北海道</li>
<li>青森県</li>
<li>岩手県</li>
<li>宮城県</li>
<li>秋田県</li>
<li>山形県</li>
<li>福島県</li>
<li>茨城県</li>
<li>栃木県</li>
<li>群馬県</li>
<li>埼玉県</li>
<li>千葉県</li>
<li>東京都</li>
<li>神奈川県</li>
<li>新潟県</li>
<li>富山県</li>
<li>石川県</li>
<li>福井県</li>
<li>山梨県</li>
<li>長野県</li>
<li>岐阜県</li>
<li>静岡県</li>
<li>愛知県</li>
<li>三重県</li>
<li>滋賀県</li>
<li>京都府</li>
<li>大阪府</li>
<li>兵庫県</li>
<li>奈良県</li>
<li>和歌山県</li>
<li>鳥取県</li>
<li>島根県</li>
<li>岡山県</li>
<li>広島県</li>
<li>山口県</li>
<li>徳島県</li>
<li>香川県</li>
<li>愛媛県</li>
<li>高知県</li>
<li>福岡県</li>
<li>佐賀県</li>
<li>長崎県</li>
<li>熊本県</li>
<li>大分県</li>
<li>宮崎県</li>
<li>鹿児島県</li>
<li>沖縄県</li>
</ul>

Tests:

jQuery
var targetText; var searchText = "熊本" $('.food-list li').each(function() { targetText = $(this).text(); // 検索対象となるリストに入力された文字列が存在するかどうかを判断 if (targetText.indexOf(searchText) != -1 && searchText !== "") { $(this).removeClass('hidden'); } else { $(this).addClass('hidden'); } });
Native
var el = document.querySelectorAll('.food-list li'); var targetText; var searchText = "熊本" for(var i=0; i<el.length; i++) { targetText = el[i].textContent; //ここもjquery使わない形にする。 // 検索対象となるリストに入力された文字列が存在するかどうかを判断 if (searchText !== "" && targetText.indexOf(searchText) != -1) { el[i].classList.remove("hidden"); } else { el[i].classList.add("hidden"); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery
Native

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark definition consists of two test cases: "ul li each test" and the individual test cases with jQuery and Native implementations.

The main objective of this benchmark is to measure the performance difference between using jQuery and native JavaScript (without relying on libraries) for a specific task: filtering an HTML list based on a search term.

**Options Compared**

Two options are compared:

1. **jQuery**: This implementation uses the jQuery library to filter the list. It leverages the library's `each` function, `removeClass`, and `addClass` methods to achieve the desired result.
2. **Native**: This implementation uses native JavaScript to filter the list without relying on any libraries. It utilizes the `document.querySelectorAll` method, a `for` loop, and DOM manipulation (e.g., `classList.remove`) to accomplish the task.

**Pros and Cons**

**jQuery:**

Pros:

* Easier to write and read, especially for developers familiar with jQuery.
* Provides a simple and concise syntax for common operations like filtering and manipulating elements.

Cons:

* Introduces an additional library dependency, which may impact performance due to loading times or caching issues.
* May not be as efficient as native JavaScript implementations, especially for large datasets.

**Native:**

Pros:

* Eliminates the need for an additional library dependency, potentially reducing overhead.
* Can be more efficient than jQuery implementations, especially for larger datasets or complex filtering scenarios.

Cons:

* Requires more code and may be less readable for developers unfamiliar with the syntax.
* May be more prone to errors due to its manual implementation.

**Other Considerations**

* **Library Dependency**: The use of jQuery introduces a dependency on an external library. In contrast, the native JavaScript implementation does not rely on any libraries, which can impact performance and maintainability.
* **Browser Compatibility**: Both implementations are likely to work across various browsers, but the native JavaScript implementation may be more susceptible to browser-specific quirks or inconsistencies.

**Individual Test Cases**

The individual test cases provide insight into the specific benchmark definition:

* "ul li each test" serves as a basic template for the benchmark.
* The jQuery implementation uses `$(this).text()` and `$(this).removeClass('hidden')` methods, which are commonly used in jQuery for working with elements.
* The Native implementation uses `el[i].textContent` and `el[i].classList.remove("hidden")`, demonstrating manual DOM manipulation techniques.

**Other Alternatives**

If the benchmark is to be modified or extended, alternative implementations could consider:

* Using other libraries like Lodash or Moment.js, which offer similar functionality to jQuery.
* Implementing a custom filtering library from scratch.
* Utilizing WebAssembly or other low-level optimization techniques to improve performance.
* Exploring browser-specific optimizations, such as using `requestAnimationFrame` or `Web Workers`.

Related benchmarks:

ul li each test (version: 0)

Comparing performance of: jQuery vs Native

Created: 6 years ago by: Guest

Jump to the latest result

jQuery

Native

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):