Run results for: Sorting elements by their position in the DOM

Run details:

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: Chrome 134

Operating system: Windows

Device Platform: Desktop

Date tested: 20 days ago

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

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; });

Run results for: Sorting elements by their position in the DOM

Shuffle only

Shuffle + sort with compareDocumentPosition