<form> <input type="text"/> <input type="radio"/> <input type="checkbox"/> <textarea></textarea> <input class="required" type="text"/> <input class="required" type="radio"/> <input class="required" type="checkbox"/> <textarea class="required"></textarea></form>$(':input:not(.required)').prop('placeholder', '');$(':input.required').prop('placeholder', 'required');$(':input').filter(':not(.required)').prop('placeholder', '').end().filter('.required').prop('placeholder', 'required');$(':input').filter(function() { return !$(this).hasClass('required'); }).prop('placeholder', '').end().filter(function() { return $(this).hasClass('required'); }).prop('placeholder', 'required');var $inputs = $(':input');$inputs.filter(':not(.required)').prop('placeholder', '');$inputs.filter('.required').prop('placeholder', 'required');var $inputs = $(':input');$inputs.prop('placeholder', '');$inputs.filter('.required').prop('placeholder', 'required');--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Intelligent selectors - not stored | |
| Intelligent selectors, in filter, with .end | |
| Filter by function with .end | |
| Intelligent selectors in filter - stored | |
| Clear all, set only required |
| Test name | Executions per second |
|---|---|
| Intelligent selectors - not stored | 1417.5 Ops/sec |
| Intelligent selectors, in filter, with .end | 3007.7 Ops/sec |
| Filter by function with .end | 2577.8 Ops/sec |
| Intelligent selectors in filter - stored | 3106.8 Ops/sec |
| Clear all, set only required | 3267.8 Ops/sec |
Let's dive into the explanation.
Benchmark Description
The benchmark is designed to measure how fast different JavaScript approaches can set and clear placeholders on input elements, which are assumed to be present in a form. The goal is to compare the performance of various methods for selecting elements, clearing their placeholder values, and then setting new placeholder values for specific inputs (those with the class "required").
Options Compared
The benchmark compares four different approaches:
$(':input:not(.required)') to select all input elements that don't have the "required" class, clear their placeholder values using .prop('placeholder', ''), and then set new placeholder values for inputs with the "required" class using .prop('placeholder', 'required').$.filter() method, followed by another filter function with .end(). This approach is slightly more complex.$inputs is assigned once before executing multiple filter operations on it. The first filter operation clears placeholder values for all non-required inputs, and the second filter operation sets new placeholder values only for required inputs..prop('placeholder', '') and then sets new placeholder values only for inputs with the "required" class.Pros and Cons of Each Approach
Here's a brief summary:
$inputs variable, but may require more memory for each iteration.Library and Purpose
In this benchmark, jQuery is used extensively for its convenience and performance. The library provides various methods (e.g., ':input:not(.required)')) that allow efficient element selection, manipulation, and filtering.
Special JavaScript Features or Syntax
The benchmark uses several advanced features, such as:
.prop(): A method used to dynamically access or modify property values on an element.Alternatives
If you're interested in exploring alternative approaches, consider:
document.querySelectorAll) without using jQueryFor most cases, the benchmark's Intelligent selectors - not stored and Clear all, set only required approaches would be suitable options.
