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: one year 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

Shuffle only

246K/s

Shuffle + sort with compareDocumentPosition

65K/s

View exact numbers

Test name	Executions per second
✓ Shuffle only	245,558 Ops/sec
Shuffle + sort with compareDocumentPosition	64,712 Ops/sec

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

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

Created: one year ago by: Guest

Go to the latest result

Shuffle only

Shuffle + sort with compareDocumentPosition

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Created: one year ago by: Guest

Go to the latest result

Shuffle only

Shuffle + sort with compareDocumentPosition

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

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