Benchmark: display_quantity_test

HTML Preparation code:

<div class="anime-wrapper active"></div>
<div class="anime-wrapper active"></div>
<div class="anime-wrapper active"></div>
<p id="anime-number"><span id="number"></span> anime</p>

Tests:

case 1
const animeList = [ { level: 'S+', imgP: 'center', link: 'https://myanimelist.net/anime/21/One_Piece', name: 'One Piece', tags: ['Action', 'Fantasy', 'Adventure', 'Comedy', 'Drama'], quote: { content: 'If I die here, then I\'m a man that could only make it this far.', author: 'Zoro Roronoa' } }, { level: 'S+', imgP: 'center', link: 'https://myanimelist.net/anime/1735/Naruto__Shippuuden', name: 'Naruto', tags: ['Action', 'Comedy', 'Supernatural'], }, { level: 'S', imgP: 'center', link: 'https://myanimelist.net/anime/223/Dragon_Ball', name: 'Dragon Ball', tags: ['Action', 'Fantasy', 'Comedy', 'Martial Art', 'Supernatural', 'Adventure', 'Science Fiction'], }, ] const TagsList = [ { tagName: 'Slice of Life', tagValue: true }, { tagName: 'Romance', tagValue: true }, { tagName: 'Comedy', tagValue: true }, { tagName: 'Action', tagValue: true }, { tagName: 'School', tagValue: true }, { tagName: 'Harem', tagValue: true }, { tagName: 'Psychological', tagValue: true }, { tagName: 'Fantasy', tagValue: true }, { tagName: 'Drama', tagValue: true }, { tagName: 'Supernatural', tagValue: true }, { tagName: 'Martial Art', tagValue: true }, { tagName: 'Science Fiction', tagValue: true }, { tagName: 'Adventure', tagValue: true }, { tagName: 'Mecha', tagValue: true }, { tagName: 'Music', tagValue: true }, { tagName: 'Detective', tagValue: true }, { tagName: 'Military', tagValue: true }, { tagName: 'Game', tagValue: true }, { tagName: 'Otome', tagValue: true }, { tagName: 'Food', tagValue: true }, { tagName: 'Isekai', tagValue: true }, { tagName: 'Ecchi', tagValue: true }, { tagName: 'Horror', tagValue: true }, { tagName: 'Historical', tagValue: true }, { tagName: 'Sport', tagValue: true } ] const $ = document.querySelector.bind(document) function activeValue(index) { return TagsList.some(tag => animeList[index].tags.includes(tag.tagName) && tag.tagValue) } $('#number').innerText = animeList.filter((a, index) => activeValue(index)).length
case 2
const $ = document.querySelector.bind(document) const $$ = document.querySelectorAll.bind(document) $('#number').innerText = $$('.anime-wrapper.active').length

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
case 1
case 2

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
case 1	663632.3 Ops/sec
case 2	520413.7 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its test cases to explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is defined by a JSON object that contains:

* `Name`: The name of the benchmark, which is "display_quantity_test".
* `Description`: An empty string, indicating no description for this benchmark.
* `Script Preparation Code`: An empty string, meaning no script preparation code is required.
* `Html Preparation Code`: A snippet of HTML code that prepares a web page with three anime elements and a paragraph element.

**Individual Test Cases**

There are two test cases:

1. **Test Case 1: "case 1"**
	* `Benchmark Definition`: A JavaScript code snippet that creates an array `animeList` containing several anime objects, as well as an array `TagsList`. The code also defines a function `activeValue(index)` and updates the text content of an element with the ID "number".
	* What's being tested: The performance of updating the text content of an HTML element using a JavaScript array filter method.
2. **Test Case 2: "case 2"**
	* `Benchmark Definition`: A JavaScript code snippet that uses the `document.querySelector` and `document.querySelectorAll` methods to select elements on the prepared HTML page.
	* What's being tested: The performance of using `document.querySelector` and `document.querySelectorAll` methods, which is an optimization of `document.querySelectorAll`.

**Library Usage**

In both test cases, no specific JavaScript library is used beyond the standard DOM API.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax being tested in these benchmark cases. The focus is on basic DOM manipulation and array filtering.

**Alternative Approaches**

If you were to rewrite these test cases to explore alternative approaches:

1. **Case 1:**
	* Using `Array.prototype.forEach` instead of `Array.prototype.filter`.
	* Updating the text content using a different method, such as `innerHTML` or a library like jQuery.
2. **Case 2:**
	* Using `querySelectorAll` with a more specific selector (e.g., `.anime-wrapper.active`) to reduce the number of elements to process.
	* Using a different HTML structure or layout to affect performance.

Overall, these benchmark cases aim to compare the performance of simple DOM manipulation and array filtering operations in JavaScript. By understanding the code being tested, you can identify potential optimization opportunities for similar use cases in your own applications.

Related benchmarks:

display_quantity_test (version: 3)

Comparing performance of: case 1 vs case 2

Created: one year ago by: Registered User

Jump to the latest result

case 1

case 2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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