Benchmark: Traverse function vs TreeWalker

HTML Preparation code:
<html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script async="" src="https://www.google-analytics.com/analytics.js"></script><script type="text/javascript" async="" src="https://www.gstatic.com/recaptcha/releases/Trd6gj1dhC_fx0ma_AWHc1me/recaptcha__en.js" crossorigin="anonymous" integrity="sha384-SCo+dmSdzKKEAk2X3zkg2nCVoMGd3DiNtx9+4vnXRIaT3suHz/jvZbRYdkqGFKgk"></script><script src="/cdn-cgi/apps/head/Y80KxAZg4r3ZdC852BSge0wYd7Q.js"></script><script src="/cdn-cgi/apps/body/L6YvfXo-NVq1Z2a30AacJM9hHIs.js"></script><link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">

    <meta name="Description" content="JavaScript microbenchmarks, JavaScript performance playground. Measure performance accross different browsers.">
    <meta name="Keywords" content="JavaScript, jQuery, Performance, Benchmark, Speed, Web, React, Angular, Node.js, dotnet core, asp.net mvc, c#, JS, perf, browser, chrome, firefox, edge, internet explorer, vanilla js vs jquery, jquery vs react, react vs vue, react vs angular, compare performance, which one is faster, more efficient">

    <title>Create benchmark - MeasureThat.net</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    


    

    <!--<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />-->
    <link rel="stylesheet" href="/css/bootstrap_spacelab.min.css">
    <link rel="stylesheet" href="/css/site.css?v=AXMpA-KCHQqte9l2dyYFEjV-Had9U7DyhEWfc-JonOk">


    


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/theme/ambiance.min.css">


</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/"><i class="fa fa-bar-chart" aria-hidden="true"></i>&nbsp;MeasureThat.net</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/Benchmarks/Add">Create a benchmark</a></li>
                    <li><a href="/Tools">Online Tools<sup>new</sup></a></li>
                    <li><a data-toggle="modal" data-target="#aboutModal" href="#">About</a></li>
                    <li><a href="/Home/Discussions">Feedback</a></li>
                    <li><a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;no_note=0&amp;lc=US&amp;currency_code=USD&amp;bn=PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest&amp;business=MeasureThat@outlook.com&amp;item_name=MeasureThat&amp;item_number=Support%20service&amp;amount=0"><img src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif" border="0" alt="PayPal — The safer, easier way to pay online."></a></li>
                </ul>
                

    <ul class="nav navbar-nav navbar-right">
        <li><a href="/Account/Register">Register</a></li>
        <li><a href="#" data-toggle="modal" data-target="#authenticateModal">Log in</a></li>
    </ul>    

            </div>
        </div>
    </div>
    <div class="container body-content">
        <div class="row">
            


<div class="page-header">
    <h1>Create benchmark</h1>
</div>

    <div class="alert alert-warning" role="alert">
        <b>Consider signing in before you create benchmark.</b> Then you will be able to edit it later.
        Benchmarks created by guest users <b>can't be edited</b>, only forked.
        <br><br>
        <button class="btn btn-primary" data-toggle="modal" data-target="#authenticateModal">Log in</button>
    </div>
    <hr>

<form action="/Benchmarks/Add" id="new-benchmark-form" method="post" novalidate="novalidate"><div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div><input data-val="true" data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="5581">    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Benchmark name and description
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="BenchmarkName">Benchmark Name</label>
                        <input class="form-control valid" data-val="true" data-val-length="The Benchmark Name must be at least 6 and at max 200 characters long." data-val-length-max="200" data-val-length-min="6" data-val-required="The Benchmark Name field is required." id="BenchmarkName" name="BenchmarkName" placeholder="Name of the benchmark" type="text" value="Traverse function vs NodeIterator vs TreeWalker" aria-required="true" aria-invalid="false" aria-describedby="BenchmarkName-error">
                        <span id="dup-title" class="text-danger field-validation-error" style="display: none;">Benchmark with such name already exists.</span>
                        <span class="text-danger field-validation-valid" data-valmsg-for="BenchmarkName" data-valmsg-replace="true"></span>
                    </div>
                    <div class="form-group">
                        <label for="Description">Description</label>
                        <textarea class="form-control valid" data-val="true" data-val-length="The Description must be at max 4000 characters long." data-val-length-max="4000" id="Description" name="Description" placeholder="Benchmark description" aria-invalid="false" aria-describedby="Description-error">Let's compare the speed of 3 different ways to traverse the DOM.</textarea>
                        <span class="text-danger field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                        Preparation code
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="HtmlPreparationCode">Html Preparation code</label>
                        <textarea class="form-control" id="HtmlPreparationCode" name="HtmlPreparationCode" style="display: none;"></textarea><div class="CodeMirror cm-s-default"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 191px; left: 97.4219px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0" aria-invalid="false" class="valid"></textarea></div><div class="CodeMirror-vscrollbar" cm-not-content="true" style="width: 18px; pointer-events: none; bottom: 0px;"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-hscrollbar" cm-not-content="true" style="height: 18px; pointer-events: none; right: 0px; left: 35px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: 0px; border-right-width: 30px; min-height: 668px; min-width: 141.453px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre>x</pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>1</div></div><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>11</div></div></div><div class="CodeMirror-measure"><pre class="CodeMirror-line"><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">html</span><span class="cm-tag cm-bracket">&gt;&lt;</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-cursors" style="visibility: hidden;"><div class="CodeMirror-cursor" style="left: 54.4219px; top: 180px; height: 20px;">&nbsp;</div></div><div class="CodeMirror-code" style=""><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">2</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">3</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">4</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">5</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">6</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">7</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">8</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">9</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">10</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">11</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">12</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">13</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">14</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">15</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">16</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">17</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">18</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">19</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">20</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">21</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">22</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">23</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">24</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">25</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">26</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">27</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">28</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">29</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">30</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">31</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;&lt;</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">32</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">33</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><div style="position: relative; display: none;"><div class="CodeMirror-gutter-wrapper" style="left: -35px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 26px;">57</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">            <span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; border-bottom: 0px solid transparent; top: 668px;"></div><div class="CodeMirror-gutters" style="height: 698px; left: 0px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div></div></div></div>
                        <span class="field-validation-valid text-danger" data-valmsg-for="HtmlPreparationCode" data-valmsg-replace="true"></span>
                        <br>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Quick HTML Snippets: <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<div id=''></div>">&lt;div/&gt;</a></li>
                                <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<a id='' href='#' />">&lt;a/&gt;</a></li>
                                <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<canvas id='' width='' height=''></canvas>">&lt;canvas/&gt;</a></li>
                                <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src=''></script>">&lt;script&gt;</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Reference popular libraries: <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>">jQuery</a></li>
                                <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/cjs/react.production.min.js'></script>">React.JS</a></li>
                                <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>">lodash</a></li>
                                <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js'></script>">moment.js</a></li>
                                <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>">Chart.js</a></li>
                                <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>">jqueryui</a></li>
                                <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>">underscore.js</a></li>
                                <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js'></script>">d3</a></li>
                                <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js'></script>">angular.js</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-default" data-format-type="html" data-role="format-input" data-target="HtmlPreparationCode" id="format_html">
                            Format HTML
                        </button>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label for="ScriptPreparationCode">JavaScript preparation code</label>
                        <textarea class="form-control" id="ScriptPreparationCode" name="ScriptPreparationCode" style="display: none;">// language=HTML
const html = `
    &lt;!-- article out start --&gt;
    &lt;article&gt;
        &lt;!-- article in start --&gt;
        &lt;h1&gt;Lorem ipsum&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.&lt;/p&gt;
        &lt;!-- article in end --&gt;
    &lt;/article&gt;
    &lt;!-- article out end --&gt;

    &lt;!-- article out start --&gt;
    &lt;article&gt;
        &lt;!-- article in start --&gt;
        &lt;h1&gt;Lorem ipsum&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.&lt;/p&gt;
        &lt;!-- article in end --&gt;
    &lt;/article&gt;
    &lt;!-- article out end --&gt;

    &lt;!-- article out start --&gt;
    &lt;article&gt;
        &lt;!-- article in start --&gt;
        &lt;h1&gt;Lorem ipsum&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.&lt;/p&gt;
        &lt;!-- article in end --&gt;
    &lt;/article&gt;
    &lt;!-- article out end --&gt;
`;
const template = document.createElement('template');
template.innerHTML = html;

window.testTemplate = template;

window.testTraverse = function traverse(node, use) {
    if (!node) return;

    use(node);
    traverse(node.firstChild, use);
    traverse(node.nextSibling, use);
}</textarea><div class="CodeMirror cm-s-default"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 11px; left: 47px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div><div class="CodeMirror-vscrollbar" cm-not-content="true" style="bottom: 0px; width: 18px; pointer-events: none;"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-hscrollbar" cm-not-content="true" style="right: 0px; left: 30px; height: 18px; pointer-events: none;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: 0px; border-right-width: 30px; min-height: 28px; min-width: 7px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre>x</pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>9</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-cursors" style="visibility: hidden;"><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 20px;">&nbsp;</div></div><div class="CodeMirror-code" style=""><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div><div style="position: relative; display: none;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-comment">// language=HTML</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; border-bottom: 0px solid transparent; top: 28px;"></div><div class="CodeMirror-gutters" style="height: 58px; left: 0px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div></div></div></div>
                        <span class="field-validation-valid text-danger" data-valmsg-for="ScriptPreparationCode" data-valmsg-replace="true"></span>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                New Script snippets: <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a data-role="insert-snippet" data-target="ScriptPreparationCode" data-text="for(i=0; i<10; i++){}">For loop</a></li>
                                <li><a data-role="insert-snippet" data-target="ScriptPreparationCode" data-text="var arr = ['', '', ''];">Array</a></li>
                                <li><a data-role="insert-snippet" data-target="ScriptPreparationCode" data-text="var el = document.getElementById('');">document.getElementById</a></li>
                                <li><a data-role="insert-snippet" data-target="ScriptPreparationCode" data-text="console.log('');">console.log</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-default" data-target="ScriptPreparationCode" data-format-type="js" data-role="format-input">
                            Format JavaScript
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                        Test cases
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
                <ul class="list-group" id="test-case-list"><li class="list-group-item" data-role="testCaseComponent">
            <div class="form-group">
                <label for="TestCases.TestCaseDtoName">Name your test:</label>
                <input type="text" class="form-control" placeholder="Name of the test case" data-val="true" data-val-regex="The field Test Case must match the regular expression '[a-zA-Z0-9.`~!@#$%^&amp;*()]'." data-val-regex-pattern="[a-zA-Z0-9.`~!@#$%^&amp;*()]" data-val-required="The Test Case field is required." name="TestCases[0].TestCaseDtoName" value="Traverse function" data-role="testCaseName">

                <label for="TestCases.BenchmarkCode">Benchmark code</label>
                <textarea class="form-control" data-val="true" placeholder="Benchmark code" data-val-required="The Benchmark code is required." name="TestCases[0].BenchmarkCode" data-role="testCaseCode" style="display: none;">const comments = [];
testTraverse(testTemplate.content.firstChild, node =&gt; {
    if (node.nodeType === Node.COMMENT_NODE) {
        comments.push(node);
    }
});</textarea><div class="CodeMirror cm-s-default"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 11px; left: 47px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0" aria-invalid="false" class="valid"></textarea></div><div class="CodeMirror-vscrollbar" cm-not-content="true" style="width: 18px; pointer-events: none;"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-hscrollbar" cm-not-content="true" style="height: 18px; pointer-events: none;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1" draggable="false"><div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: 0px; border-right-width: 30px; min-height: 248px; min-width: 469.133px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre>x</pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>13</div></div><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>8</div></div><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>13</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"><div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 0px; width: 184.859px; height: 20px;"></div></div><div class="CodeMirror-cursors" style="visibility: hidden;"></div><div class="CodeMirror-code" style=""><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">elements</span> <span class="cm-operator">=</span> [<span class="cm-meta">...</span>(<span class="cm-keyword">function</span> <span class="cm-keyword">*</span><span class="cm-def">deepDescendents</span>(<span class="cm-def">root</span>) {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">2</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  <span class="cm-keyword">for</span> (<span class="cm-keyword">const</span> <span class="cm-def">child</span> <span class="cm-keyword">of</span> <span class="cm-variable-2">root</span>.<span class="cm-property">childNodes</span>) {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">3</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">    <span class="cm-keyword">if</span> (<span class="cm-variable-2">child</span> <span class="cm-keyword">instanceof</span> <span class="cm-variable">Element</span>) {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">4</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">      <span class="cm-keyword">yield</span> <span class="cm-variable-2">child</span>.<span class="cm-property">shadowRoot</span> <span class="cm-operator">??</span> <span class="cm-variable-2">child</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">5</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">    }</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">6</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  }</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">7</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  <span class="cm-keyword">for</span> (<span class="cm-keyword">const</span> <span class="cm-def">child</span> <span class="cm-keyword">of</span> <span class="cm-variable-2">root</span>.<span class="cm-property">childNodes</span>) {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">8</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">    <span class="cm-keyword">if</span> (<span class="cm-variable-2">child</span> <span class="cm-keyword">instanceof</span> <span class="cm-variable">Element</span>) {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">9</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">      <span class="cm-variable">deepDescendents</span>(<span class="cm-variable-2">child</span>.<span class="cm-property">shadowRoot</span> <span class="cm-operator">??</span> <span class="cm-variable-2">child</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">10</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">    }</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">11</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  }</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">12</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">})(<span class="cm-variable">document</span>)];</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; border-bottom: 0px solid transparent; top: 248px;"></div><div class="CodeMirror-gutters" style="height: 278px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div></div></div></div>
                <span class="field-validation-valid text-danger" data-valmsg-for="TestCases.BenchmarkCode" data-valmsg-replace="true"></span>
            </div>
            <div class="form-group text-right">
                <button data-action="delete-test" class="btn btn-default">Delete test case</button>
            </div>
        </li><li class="list-group-item" data-role="testCaseComponent">
            <div class="form-group">
                <label for="TestCases.TestCaseDtoName">Name your test:</label>
                <input type="text" class="form-control" placeholder="Name of the test case" data-val="true" data-val-regex="The field Test Case must match the regular expression '[a-zA-Z0-9.`~!@#$%^&amp;*()]'." data-val-regex-pattern="[a-zA-Z0-9.`~!@#$%^&amp;*()]" data-val-required="The Test Case field is required." name="TestCases[4].TestCaseDtoName" value="TreeWalker with filter param" data-role="testCaseName">

                <label for="TestCases.BenchmarkCode">Benchmark code</label>
                <textarea class="form-control" data-val="true" placeholder="Benchmark code" data-val-required="The Benchmark code is required." name="TestCases[4].BenchmarkCode" data-role="testCaseCode" style="display: none;">const treeWalker = document.createTreeWalker(
    testTemplate.content,
    NodeFilter.SHOW_COMMENT
);

const comments = [];
while (treeWalker.nextNode()) {
    comments.push(treeWalker.currentNode);
}</textarea><div class="CodeMirror cm-s-default"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 11px; left: 492.32px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0" aria-invalid="false" class="valid"></textarea></div><div class="CodeMirror-vscrollbar" cm-not-content="true" style="width: 18px; pointer-events: none;"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-hscrollbar" cm-not-content="true" style="height: 18px; pointer-events: none; right: 0px; left: 30px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1" draggable="false"><div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: 0px; border-right-width: 30px; min-height: 348px; min-width: 653.961px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre>x</pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>19</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-cursors" style=""><div class="CodeMirror-cursor" style="left: 449.32px; top: 0px; height: 20px;">&nbsp;</div></div><div class="CodeMirror-code" style=""><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">elements</span> <span class="cm-operator">=</span> [<span class="cm-meta">...</span>(<span class="cm-keyword">function*</span> <span class="cm-def">deepDescendents</span>(<span class="cm-def">root</span>) {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">2</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  <span class="cm-keyword">const</span> <span class="cm-def">walkers</span> <span class="cm-operator">=</span> [<span class="cm-variable">document</span>.<span class="cm-property">createTreeWalker</span>(<span class="cm-variable-2">root</span>, <span class="cm-variable">NodeFilter</span>.<span class="cm-property">SHOW_ELEMENT</span>)];</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">3</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  <span class="cm-keyword">for</span> (<span class="cm-keyword">const</span> <span class="cm-def">walker</span> <span class="cm-keyword">of</span> <span class="cm-variable-2">walkers</span>) {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">4</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">    <span class="cm-keyword">let</span> <span class="cm-def">node</span>: <span class="cm-variable">Element</span> <span class="cm-operator">|</span> <span class="cm-atom">null</span> <span class="cm-operator">=</span> <span class="cm-atom">null</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">5</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">    <span class="cm-keyword">while</span> ((<span class="cm-variable-2">node</span> <span class="cm-operator">=</span> <span class="cm-variable-2">walker</span>.<span class="cm-property">nextNode</span>() <span class="cm-variable">as</span> <span class="cm-variable">Element</span> <span class="cm-operator">|</span> <span class="cm-atom">null</span>)) {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">6</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">      <span class="cm-keyword">if</span> (<span class="cm-operator">!</span><span class="cm-variable-2">node</span>.<span class="cm-property">shadowRoot</span>) {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">7</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">        <span class="cm-keyword">yield</span> <span class="cm-variable-2">node</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">8</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">      } <span class="cm-keyword">else</span> {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">9</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">        <span class="cm-keyword">yield</span> <span class="cm-variable-2">node</span>.<span class="cm-property">shadowRoot</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">10</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">        <span class="cm-variable-2">walkers</span>.<span class="cm-property">push</span>(</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">11</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">          <span class="cm-variable">document</span>.<span class="cm-property">createTreeWalker</span>(<span class="cm-variable-2">node</span>.<span class="cm-property">shadowRoot</span>, <span class="cm-variable">NodeFilter</span>.<span class="cm-property">SHOW_ELEMENT</span>)</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">12</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">        );</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">13</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">      }</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">14</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">    }</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">15</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">  }</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">16</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">})(<span class="cm-variable">document</span>)];</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">17</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; border-bottom: 0px solid transparent; top: 348px;"></div><div class="CodeMirror-gutters" style="height: 378px; left: 0px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div></div></div></div>
                <span class="field-validation-valid text-danger" data-valmsg-for="TestCases.BenchmarkCode" data-valmsg-replace="true"></span>
            </div>
            <div class="form-group text-right">
                <button data-action="delete-test" class="btn btn-default">Delete test case</button>
            </div>
        </li></ul>
                <div class="panel-footer">
                    <span class="field-validation-valid text-danger" data-valmsg-for="TestCases" data-valmsg-replace="true"></span>
                    <div class="form-group">
                        <input type="button" class="btn btn-default" data-action="new-test" value="Add test case">
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="form-group">
            <div class="g-recaptcha" data-sitekey="6LezciITAAAAAM8yvrfrR23FDpltM8Luz9QB_8O0"><div style="width: 304px; height: 78px;"><div><iframe title="reCAPTCHA" src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6LezciITAAAAAM8yvrfrR23FDpltM8Luz9QB_8O0&amp;co=aHR0cHM6Ly93d3cubWVhc3VyZXRoYXQubmV0OjQ0Mw..&amp;hl=en&amp;v=Trd6gj1dhC_fx0ma_AWHc1me&amp;size=normal&amp;cb=vtnj4sj3ow50" width="304" height="78" role="presentation" name="a-c8b9185q31sy" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea></div><iframe style="display: none;"></iframe></div>
            <span class="field-validation-valid text-danger" data-valmsg-for="ReCaptcha" data-valmsg-replace="true"></span>
        </div>
    <div class="alert alert-warning" role="alert">
        To avoid adding broken tests, please use <strong>Validate benchmark</strong> button to check for errors in benchmark definition.
    </div>
    <div style="" id="validation_log_holder">
        <h5>Validation log:</h5>
        <ul id="validation_log"><li>Checking necessary properties...</li><li>Loading iframe for testing...</li><li>Checking necessary properties...Done.</li><li>Taking care of HTML Preparation code...</li><li>Loading iframe for testing...Done.</li><li>Attempting to run benchmark...</li><li>Error when running benchmark: Unexpected token ':'</li></ul>
    </div>
    <a class="btn btn-default" data-role="test-benchmark">
        Validate benchmark<span>&nbsp;</span>
        <i id="validate-spinner" class="fa fa-refresh fa-spin" style="font-size: 20px; display: none;"></i>
    </a>
    <input id="benchmark_submit" type="submit" class="btn btn-danger" value="Submit">
    <a href="/Benchmarks" class="btn btn-link">Cancel</a>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8Kp7vXHMFlFNjlpnDlXyv7Xpwx3qYrK5Jjcw0e7R_EUvnK5gHbFjsKl2fAS7StHbfRCMcY_CUVtNC3fPC7AxKrogp2SUWifZC0q9I8VJjNe4L7l1eug59_BR6pKRKcqbNDcJmrNhFDmEN7pLUPi2-Bs"></form>
<div class="hidden">
            <textarea data-content="existing-test" data-test-name="Traverse function">const comments = [];
testTraverse(testTemplate.content.firstChild, node =&gt; {
    if (node.nodeType === Node.COMMENT_NODE) {
        comments.push(node);
    }
});</textarea>
            <textarea data-content="existing-test" data-test-name="NodeIterator with filter function">const nodeIterator = document.createNodeIterator(
    testTemplate.content,
    NodeFilter.SHOW_ALL,
    {
        acceptNode(node) {
            if (node.nodeType === Node.COMMENT_NODE) {
                return NodeFilter.FILTER_ACCEPT;
            }

            return NodeFilter.FILTER_REJECT;
        }
    }
);

const comments = [];
while (nodeIterator.nextNode()) {
    comments.push(nodeIterator.currentNode);
}</textarea>
            <textarea data-content="existing-test" data-test-name="NodeIterator with filter param">const nodeIterator = document.createNodeIterator(
    testTemplate.content,
    NodeFilter.SHOW_COMMENT
);

const comments = [];
while (nodeIterator.nextNode()) {
    comments.push(nodeIterator.currentNode);
}</textarea>
            <textarea data-content="existing-test" data-test-name="TreeWalker with filter function">const treeWalker = document.createTreeWalker(
    testTemplate.content,
    NodeFilter.SHOW_ALL,
    {
        acceptNode(node) {
            if (node.nodeType === Node.COMMENT_NODE) {
                return NodeFilter.FILTER_ACCEPT;
            }

            return NodeFilter.FILTER_REJECT;
        }
    }
);

const comments = [];
while (treeWalker.nextNode()) {
    comments.push(treeWalker.currentNode);
}</textarea>
            <textarea data-content="existing-test" data-test-name="TreeWalker with filter param">const treeWalker = document.createTreeWalker(
    testTemplate.content,
    NodeFilter.SHOW_COMMENT
);

const comments = [];
while (treeWalker.nextNode()) {
    comments.push(treeWalker.currentNode);
}</textarea>
</div>

<div id="validation-frame-holder"><iframe id="validation-iframe" src="/Benchmarks/TestFrameForValidation?autorefresh=1" style="border:none; max-height: 2px; overflow:none"></iframe></div>



        </div>
        <hr>
        <footer>
            <p>© 2023 - MeasureThat.net (Version: 1.3.3.0)</p>
        </footer>

    </div>

    

    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js">
    </script>
<script>(window.jQuery||document.write("\u003Cscript src=\u0022\/lib\/jquery\/dist\/jquery.min.js\u0022\u003E\u003C\/script\u003E"));</script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js">
    </script>
<script>(window.jQuery && window.jQuery.fn && window.jQuery.fn.modal||document.write("\u003Cscript src=\u0022\/lib\/bootstrap\/dist\/js\/bootstrap.min.js\u0022\u003E\u003C\/script\u003E"));</script>


    


    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/mode/xml/xml.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/javascript/javascript.min.js"></script>


    <script src="https://www.google.com/recaptcha/api.js"></script>

    
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.min.js"></script>
    

    <script src="/js/benchmarklab.js?v=u7xTtWrvm6FZPW1nPTf3WFWWTmn7xc_Q8WbQvfFXm58"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-html.min.js"></script>



    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js">
    </script>
<script>(window.jQuery && window.jQuery.validator||document.write("\u003Cscript src=\u0022\/lib\/jquery-validation\/dist\/jquery.validate.min.js\u0022\u003E\u003C\/script\u003E"));</script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js">
    </script>
<script>(window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive||document.write("\u003Cscript src=\u0022\/lib\/jquery-validation-unobtrusive\/jquery.validate.unobtrusive.min.js\u0022\u003E\u003C\/script\u003E"));</script>



    <script id="testCase" type="x-tmpl-mustache">
        <li class="list-group-item" data-role="testCaseComponent">
            <div class="form-group">
                <label for="TestCases.TestCaseDtoName">Name your test:</label>
                <input type="text" class="form-control" placeholder="Name of the test case" data-val="true" data-val-regex="The field Test Case must match the regular expression '[a-zA-Z0-9.`~!@#$%^&amp;*()]'." data-val-regex-pattern="[a-zA-Z0-9.`~!@#$%^&amp;*()]" data-val-required="The Test Case field is required." name="TestCases[{{testCaseId}}].TestCaseDtoName" value="{{testCaseName}}" data-role="testCaseName">

                <label for="TestCases.BenchmarkCode">Benchmark code</label>
                <textarea class="form-control" data-val="true" placeholder="Benchmark code" data-val-required="The Benchmark code is required." name="TestCases[{{testCaseId}}].BenchmarkCode" data-role="testCaseCode">{{textCaseContent}}</textarea>
                <span class="field-validation-valid text-danger" data-valmsg-for="TestCases.BenchmarkCode" data-valmsg-replace="true"></span>
            </div>
            <div class="form-group text-right">
                <button data-action="delete-test" class="btn btn-default">Delete test case</button>
            </div>
        </li>
    </script>

    <script type="text/javascript">
        var addPageController = new AddNewTestPageController();
        new AppendSnippetHandler();
        new ClientValidationHandler();
        new InputFormatHandler();
    </script>


    <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModal-label">About</h4>
            </div>
            <div class="modal-body">
                <h2>JavaScript performance benchmarks</h2>
                <p><b>Source code:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net">GitHub/MeasureThat.net</a></p>
                <p><b>Report issues:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net/issues">MeasureThat.net/Issues</a>
                </p><p><b>Based on:</b> <a target="_blank" href="https://benchmarkjs.com/">Benchmark.js (v2.1.1)</a>
                </p><p>
                    <b>Facebook page:</b> <a target="_blank" href="https://www.facebook.com/MeasureThat.Net">https://www.facebook.com/MeasureThat.Net</a>
                </p>
                <p>
                    <b>Open the </b> <a target="_blank" href="/Home/Changelog">changelog</a>
                </p>
                <style>.bmc-button img{width: 27px !important;margin-bottom: 1px !important;box-shadow: none !important;border: none !important;vertical-align: middle !important;}.bmc-button{line-height: 36px !important;height:37px !important;text-decoration: none !important;display:inline-flex !important;color:#ffffff !important;background-color:#BB5794 !important;border-radius: 3px !important;border: 1px solid transparent !important;padding: 1px 9px !important;font-size: 22px !important;letter-spacing: 0.6px !important;box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;margin: 0 auto !important;font-family:'Cookie', cursive !important;-webkit-box-sizing: border-box !important;box-sizing: border-box !important;-o-transition: 0.3s all linear !important;-webkit-transition: 0.3s all linear !important;-moz-transition: 0.3s all linear !important;-ms-transition: 0.3s all linear !important;transition: 0.3s all linear !important;}.bmc-button:hover, .bmc-button:active, .bmc-button:focus {-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;text-decoration: none !important;box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;opacity: 0.85 !important;color:#ffffff !important;}</style><link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet"><a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/2DBtw96"><img src="https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/BMC-btn-logo.svg" alt="Buy me a coffee"><span style="margin-left:5px">Buy me a coffee</span></a>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="authenticateModal" tabindex="-1" role="dialog" aria-labelledby="authenticateModal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="authenticateModal-label">Log in:</h4>
            </div>
            <div class="modal-body" style="text-align: center">
                
<section>
</section>
<section>
    <a class="btn btn-primary" href="/Account/Login">Sign in with local account</a>
</section>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>




<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-83528903-1', 'auto');
  ga('send', 'pageview');

</script>
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script>
<script>
window.TrackJS && TrackJS.install({ 
    token: "028f6a1c03774007a7b40f656ca7ef3a"
    // for more configuration options, see https://docs.trackjs.com
});
</script>
<script async="" src="https://cdn.requestmetrics.com/agent/current/rm.js" data-rm-token="k4pi6hu:f2xb6eb"></script>


<div style="background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 3px; position: absolute; transition: visibility 0s linear 0.3s, opacity 0.3s linear 0s; opacity: 0; visibility: hidden; z-index: 2000000000; left: 0px; top: -10000px;"><div style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 2000000000; background-color: rgb(255, 255, 255); opacity: 0.05;"></div><div class="g-recaptcha-bubble-arrow" style="border: 11px solid transparent; width: 0px; height: 0px; position: absolute; pointer-events: none; margin-top: -11px; z-index: 2000000000;"></div><div class="g-recaptcha-bubble-arrow" style="border: 10px solid transparent; width: 0px; height: 0px; position: absolute; pointer-events: none; margin-top: -10px; z-index: 2000000000;"></div><div style="z-index: 2000000000; position: relative; width: 0px; height: 0px;"><iframe title="recaptcha challenge expires in two minutes" src="https://www.google.com/recaptcha/api2/bframe?hl=en&amp;v=Trd6gj1dhC_fx0ma_AWHc1me&amp;k=6LezciITAAAAAM8yvrfrR23FDpltM8Luz9QB_8O0" name="c-c8b9185q31sy" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox" style="width: 0px; height: 0px;"></iframe></div></div></body></html>
Tests:
Traverse function
const elements = [...(function *deepDescendents(root) { for (const child of root.childNodes) { if (child instanceof Element) { yield child.shadowRoot ?? child; } } for (const child of root.childNodes) { if (child instanceof Element) { deepDescendents(child.shadowRoot ?? child); } } })(document)];
TreeWalker
const elements = [...(function* deepDescendents(root) { const walkers = [document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT)]; for (const walker of walkers) { let node = null; while ((node = walker.nextNode())) { if (!node.shadowRoot) { yield node; } else { yield node.shadowRoot; walkers.push( document.createTreeWalker(node.shadowRoot, NodeFilter.SHOW_ELEMENT) ); } } } })(document)];
Rendered benchmark preparation results:
Suite status: <idle, ready to run>

Previous results
Test case name	Result
Traverse function
TreeWalker
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.
A challenging question!
After analyzing the provided benchmark data, I'll attempt to identify some insights about the performance of different approaches for traversing and rendering HTML elements.
**1. Traverse function vs. Tree Walker**
The two test cases "Traverse function" and "TreeWalker" seem to be performing similar tasks: traversing the DOM tree. However, they employ different strategies:
*   The first approach uses a generator function (`deepDescendents`) that yields child nodes recursively.
*   The second approach utilizes the `document.createTreeWalker()` method, which is designed for efficient traversal of the DOM.
According to the benchmark results, both approaches show similar performance. However, I notice that "Traverse function" has an average execution frequency per second (EFPS) slightly higher than "Tree Walker." This might be due to the overhead introduced by generating node values and handling edge cases in the generator function.
**2. Browser/Device/OS Performance**
The benchmark results are dominated by Chrome 111 running on a Mac OS X 10.15.7 system. There is no significant variation in performance across different browsers, devices, or operating systems. This suggests that:
*   The rendering engine and DOM manipulation libraries used by these browsers provide good support for the specific testing scenario.
*   Any potential platform-dependent issues are mitigated by the test code's careful handling of edge cases.
**3. Performance Characteristics**
While both approaches perform similarly in terms of overall throughput, "Tree Walker" appears to have a slightly better average EFPS (5138.64501953125 vs. 594560.8125) than the traverse function approach. This might be due to:
*   The tree walker's optimized iteration and filtering logic.
*   Less overhead associated with yielding node values.
However, these performance differences are relatively small and may not have significant implications for most applications.
In conclusion, while both traversal approaches exhibit similar performance characteristics, "Tree Walker" appears to have a slight edge in terms of overall throughput.
Related benchmarks:
Traverse function vs TreeWalker (version: 0)

Comparing performance of: Traverse function vs TreeWalker

Created: 3 years ago by: Guest

Jump to the latest result

Traverse function

TreeWalker

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