Benchmark: researchbar test

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
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
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
second

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.

I'll provide an explanation of the benchmark and its options, along with their pros and cons.

**Benchmark Overview**

The benchmark measures the performance of JavaScript code that filters recipes based on search queries using three different approaches:

1. **Blocking**: This approach uses synchronous functions to filter recipes.
2. **Async-Blocking**: This approach uses asynchronous functions, but still blocks the execution of other code until the filtering is complete.

**Options Compared**

The two options compared in this benchmark are:

1. **First Option (Blocking)**:
```javascript
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)];
}
```
This option uses synchronous functions and does not use async/await or promises.

2. **Second Option (Async-Blocking)**:
```javascript
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 = await SearchAsync.globalValue(word);
  return [...new Set(globalArray)];
}
```
This option uses asynchronous functions and an async/await wrapper to call `SearchAsync.globalValue()`, which itself is blocking.

**Pros and Cons**

**Blocking Option (First)**

Pros:

* Simpler code
* Less overhead due to async/await

Cons:

* Blocking execution can lead to slower performance, especially for I/O-bound operations
* Not suitable for modern JavaScript applications that rely on async/await

**Async-Blocking Option (Second)**

Pros:

* Asynchronous execution allows other code to run concurrently
* Better suited for modern JavaScript applications that rely on async/await

Cons:

* More complex code due to the need for async/await and promises
* Increased overhead due to the need for asynchronous operations

**Latest Benchmark Results**

The benchmark results show that both options have similar execution rates, with the first option (Blocking) having a slightly higher rate. However, it's essential to note that these results may not be representative of real-world performance, as they are likely affected by the specific hardware and software configurations used.

In general, for modern JavaScript applications that rely on async/await, the second option (Async-Blocking) is recommended due to its ability to take advantage of concurrent execution. However, if simplicity and lower overhead are prioritized, the first option (Blocking) may be sufficient.

Related benchmarks:

researchbar test (version: 0)

Comparing performance of: first vs second

Created: 4 years ago by: Registered User

Jump to the latest result

first

second

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