Benchmark: searchbarr test - MeasureThat.net

HTML Preparation code:

<!-- Bannière -->
  <header>
    <img src="https://user.oc-static.com/upload/2020/08/14/15973932905401_logo%20%281%29.png" id="logo"
      alt="Logo de l'entreprise Les Petits Plats" />
  </header>
<!-- Barre de Recherche -->  
  <nav>
    <form class="search-barr-button">
      <input type="text" name="searchbarr" placeholder="Rechercher un ingrédient, appareil, ustensiles ou une recette"
        id="searchbarr" class="form-control form-control-lg" />
      <i class="fas fa-search search-button"></i>
    </form>
  </nav>
  <h1></h1>
<!-- Tuiles de recherche -->
  <section id="tileries-searched">
  </section>
<!-- Combobox -->
  <nav id="combobox">
<!-- Combobox ingredients -->
    <div class="combobox-ingredients combobox" data-item="ingredient">
        <input type=text name="ingredients-list" role="combobox" placeholder="Rechercher un ingrédient" id="inputingredients" class="inputcombobox">
        <div id="ingredients-list" class="combo-list">
        </div>
    </div>
<!-- Combobox appareils -->
<div class="combobox-appliances combobox" data-item="appliance">
  <input type=text name="appliances-list" role="combobox" placeholder="Rechercher un appareil" id="inputappliances" class="inputcombobox">
  <div id="appliances-list" class="combo-list">
  </div>
</div>
<!-- Combobox ustensiles -->
<div class="combobox-ustensils combobox" data-item="ustensil">
  <input type=text name="ustensils-list" role="combobox" placeholder="Rechercher un ustensile" id="inputustensils" class="inputcombobox">
  <div id="ustensils-list" class="combo-list">
  </div>
</div>
  </nav>
<!-- Liste des recettes -->
  <section id="recipes-list" >
  </section>

Tests:

first, synchrone
const researchBarr = document.getElementById('searchbarr'); function recipesNames(recipes, word){ return recipes.filter(recipe => recipe.name.toUpperCase().includes(word.toUpperCase())); } function recipesIngredients (recipes, word){ return recipes.filter(recipe => recipe.ingredients.some(ingredient => ingredient.ingredient.toUpperCase().includes(word.toUpperCase()))); } function recipesDescriptions (recipes, word){ return recipes.filter(recipe => recipe.description.toUpperCase().includes(word.toUpperCase())) } function globalValue(word){ var globalArray = recipesNames(recipes, word).concat(recipesIngredients(recipes, word), recipesDescriptions(recipes, word)); return [...new Set(globalArray)]; } researchBarr.addEventListener('input', function (){ var searchValue = this.value; if(searchValue.length>= 3){ loadRecipes(globalValue(searchValue)); }else if(searchValue.length == 0){ loadRecipes(recipes); } })
second, async
const researchBarr = document.getElementById('searchbarr'); async function recipesNames(recipes, word){ return recipes.filter(recipe => recipe.name.toUpperCase().includes(word.toUpperCase())); } async function recipesIngredients (recipes, word){ return recipes.filter(recipe => recipe.ingredients.some(ingredient => ingredient.ingredient.toUpperCase().includes(word.toUpperCase()))); } async function recipesDescriptions (recipes, word){ return recipes.filter(recipe => recipe.description.toUpperCase().includes(word.toUpperCase())) } function globalValue(word){ var globalArray = recipesNames(recipes, word).concat(recipesIngredients(recipes, word), recipesDescriptions(recipes, word)); return [...new Set(globalArray)]; } researchBarr.addEventListener('input', async function (){ var searchValue = this.value; if(searchValue.length>= 3){ await SearchAsync.globalValue(searchValue) loadRecipes(SearchAsync.result); }else if(searchValue.length == 0){ loadRecipes(recipes); } }) class SearchAsync { static async globalValue (word){ this.result = []; recipesNames(recipes, word).then(filterRecipe => SearchAsync.checkSearch(filterRecipe)); recipesIngredients (recipes, word).then(filterRecipe => SearchAsync.checkSearch(filterRecipe)); recipesDescriptions (recipes, word).then(filterRecipe => SearchAsync.checkSearch(filterRecipe)); } static checkSearch(filterRecipe){ this.result = [...new Set(this.result.concat(filterRecipe))]; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
first, synchrone
second, async

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.

Let's dive into the benchmark and explore what's being tested.

The provided JSON represents two individual test cases, each with its own Benchmark Definition. The first test case is synchronized (synchrone), while the second one is asynchronous.

**Benchmarked Code**

The Benchmark Definition is a JavaScript code snippet that tests the performance of searching for recipes based on various criteria: recipe name, ingredients, and descriptions. Here's a summary:

1. Two functions are defined:
	* `recipesNames`: filters recipes by name.
	* `recipesIngredients`: filters recipes by ingredient.
	* `recipesDescriptions`: filters recipes by description.
2. A global function is defined:
	* `globalValue(word)`: concatenates the results of `recipesNames`, `recipesIngredients`, and `recipesDescriptions` for a given word and returns an array of unique values.

**Synchronized (Synchrone) Test Case**

In this test case, the code uses synchronous functions and executes them sequentially:

```javascript
researchBarr.addEventListener('input', function () {
  var searchValue = this.value;
  if(searchValue.length>= 3){
    loadRecipes(globalValue(searchValue));
  }else if(searchValue.length == 0){
    loadRecipes(recipes);
  }
})
```

Here, the code listens for an input event on the search bar (`researchBarr`). When the user types a value greater than or equal to 3 characters, it calls the `globalValue` function with the search value and passes the result to the `loadRecipes` function. If the search value is less than 3 characters, it simply loads the original `recipes` array.

**Asynchronous (Async) Test Case**

In this test case, the code uses asynchronous functions and executes them concurrently:

```javascript
researchBarr.addEventListener('input', async function () {
  var searchValue = this.value;
  if(searchValue.length>= 3){
    await SearchAsync.globalValue(searchValue)
    loadRecipes(SearchAsync.result);
  }else if(searchValue.length == 0){
    loadRecipes(recipes);
  }
})
```

Here, the code is similar to the synchronized test case, but it uses an `async` function and awaits the result of the `SearchAsync.globalValue` function. This allows the code to execute concurrently with other asynchronous tasks.

**What's Being Tested**

The benchmark tests the performance difference between two approaches:

1. Synchronized (synchrone): sequential execution of synchronous functions.
2. Asynchronous (async): concurrent execution of asynchronous functions.

By comparing the execution times and number of executions per second, we can determine which approach is faster and more efficient for this specific use case.

**Benchmark Results**

The latest benchmark results show that the synchronized test case executes at 546.36 executions per second, while the asynchronous test case executes at 516.95 executions per second. This suggests that the synchronous test case performs slightly better in terms of execution speed. However, it's essential to consider the context and requirements of the application when choosing between these two approaches.

Let me know if you'd like me to elaborate on any specific aspect or provide further insights!

Related benchmarks:

searchbarr test (version: 0)

Comparing performance of: first, synchrone vs second, async

Created: 4 years ago by: Registered User

Jump to the latest result

first, synchrone

second, async

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):