Benchmark: Sorting elements by their position in the DOM

HTML Preparation code:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32</li>
</ul>

Script Preparation code:

function shuffleArray(array) {
    const copy = array.slice(0);
    for (let i = copy.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [copy[i], copy[j]] = [copy[j], copy[i]];
    }
    return copy;
}

Tests:

Shuffle only
const list = Array.from(document.querySelectorAll("ul > li")); const shuffled = shuffleArray(list);
Shuffle + sort with compareDocumentPosition
const list = Array.from(document.querySelectorAll("ul > li")); const shuffled = shuffleArray(list); const sorted = shuffled.toSorted((a, b) => { return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Shuffle only
Shuffle + sort with compareDocumentPosition

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 20 days ago)

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
Shuffle only	245558.4 Ops/sec
Shuffle + sort with compareDocumentPosition	64712.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON tests the performance of two different strategies for manipulating a list of items from the Document Object Model (DOM). Specifically, it compares the efficiency of simply shuffling the elements of a list against shuffling and then sorting those elements based on their original position in the DOM.

### Options Compared

1. **Shuffle Only**
   - **Benchmark Definition**: 
     ```javascript
     const list = Array.from(document.querySelectorAll("ul > li"));
     const shuffled = shuffleArray(list);
     ```
   - In this test, the `shuffleArray` function is called on a list created from the `<li>` elements of a `<ul>`. The main operation here is shuffling—a rearrangement of the list items without any additional sorting.

2. **Shuffle + Sort with compareDocumentPosition**
   - **Benchmark Definition**: 
     ```javascript
     const list = Array.from(document.querySelectorAll("ul > li"));
     const shuffled = shuffleArray(list);
     const sorted = shuffled.toSorted((a, b) => {
         return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1;
     });
     ```
   - This test extends the first by not only shuffling the list but also sorting it again based on the original DOM position of the elements. The sorting utilizes the `compareDocumentPosition` method, which gives a numerical comparison result to determine the order of the elements.

### Pros/Cons of the Different Approaches

1. **Shuffle Only**:
   - **Pros**: 
     - Fast and straightforward: It only requires a shuffle operation, which means fewer computations and less overhead.
     - Suitable when the primary goal is to randomize the order without needing a specific arrangement afterwards.
   - **Cons**: 
     - May not be useful if the end goal requires sorted data based on some criteria from the DOM.

2. **Shuffle + Sort with compareDocumentPosition**:
   - **Pros**:
     - Combines both operations: This is beneficial for cases where the end result should reflect a specific order while still starting from a randomized arrangement.
     - `compareDocumentPosition`: This built-in method allows precise comparisons based on the document structure and can be very useful in complex ordering tasks.
   - **Cons**: 
     - More resource-intensive: Sorting is generally a more time-consuming operation than shuffling. As seen in the benchmark results, it significantly reduces the number of executions per second (from around 245,558 to 64,712).
     - Increased complexity: Maintaining proper order from the shuffle could lead to potential misunderstandings in logic and outcomes, making debugging harder.

### Library Used

The benchmark does not utilize any external libraries. The built-in JavaScript methods and the custom `shuffleArray()` function created in the preparation code are sufficient for this task.

### JavaScript Features Used

- **Array.from()**: This method is used to create a new array instance from an array-like or iterable object (in this case, from the NodeList returned by `querySelectorAll`). It makes it easy to work with collections of DOM elements.
- **compareDocumentPosition()**: This method allows determining the relative position of two nodes in the DOM and returns a bitmask that describes the comparison, making it a powerful tool for DOM manipulations.
- **toSorted()**: This method creates a new sorted array from the elements, based on a comparison function. This method is non-mutative, meaning it does not change the original array.

### Other Alternatives

1. **Sort first, then Shuffle**: One could sort the items first and then shuffle them if the usage scenario allows for such re-arrangement. This can be effective if you need an initially ordered array randomized afterward.

2. **Using Different Sorting Algorithms**: Depending on the size and characteristics of the data, there are various algorithms (e.g., quicksort, mergesort) that could replace the inherent sorting mechanism used in `toSorted`, potentially providing better performance under certain conditions.

3. **Native Array Sorting**: Instead of using `toSorted` with a comparison function, you could directly apply the `sort()` method if no new array instance is needed.

In conclusion, this benchmark exemplifies the need to balance between the complexity of operations and the required output. It provides insight into performance trade-offs that can impact real-time user experiences in JavaScript and web applications.

Related benchmarks:

Sorting elements by their position in the DOM (version: 1)

Comparing performance of: Shuffle only vs Shuffle + sort with compareDocumentPosition

Created: 20 days ago by: Guest

Jump to the latest result

Shuffle only

Shuffle + sort with compareDocumentPosition

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):