match vs loop

JavaScript performance comparison

Test case created by match vs loop

Preparation code

        <fieldset>
                <h3>Your details (optional)</h3>
                <div><label for="author">Name </label><input type="text" name="author" id="author"></div>
                <div><label for="author-email">Email </label><label class="inline"><input type="email" name="author-email" id="author-email"> (won’t be displayed; might be used for Gravatar)</label></div>
                <div><label for="author-url">URL </label><input type="url" name="author-url" id="author-url"></div>
        </fieldset>
        <fieldset>
                <h3>Test case details</h3>
                <div><label for="title">Title <em title="This field is required">*</em> </label><input type="text" name="title" id="title" required></div>
                <div>
                        <label for="slug">Slug <em title="This field is required">*</em> </label><input type="text" name="slug" id="slug" pattern="[a-z0-9](?:-?[a-z0-9])*" required>                   <p class="preview">Test case URL will be <samp>http://jsperf.com/<mark>slug</mark></samp></p>
                </div>
                <div><label for="visible">Published </label><label class="inline"><input type="checkbox" value="y" name="visible" id="visible" checked> (uncheck if you want to fiddle around before making the page public)</label></div>
                <div><label for="info">Description <span>(in case you feel further explanation is needed)</span><span>(Markdown syntax is allowed)</span> </label><textarea name="info" id="info" maxlength="16777215"></textarea></div>
                <div class="question"><label for="question">Are you a spammer? <span>(just answer the question)</span> </label><input type="text" name="question" id="question"></div>
                <fieldset>
                        <h3>Preparation code</h3>
                        <div>
                                <label for="prep-html">Preparation code HTML <span>(this will be inserted in the <code>&lt;body></code> of a valid HTML5 document in standards mode)</span> <span>(useful when testing DOM operations or including libraries)</span> </label><textarea name="prep-html" id="prep-html" maxlength="16777215"></textarea>                         <p id="add-libraries">Include JavaScript libraries as follows: <code>&lt;script src="//cdn.ext/library.js">&lt;/script></code></p>
                        </div>
                        <div><label for="setup">Define <code>setup</code> for all tests <span>(variables, functions, arrays or other objects that will be used in the tests)</span> <span>(runs before each clocked test loop, outside of the timed code region)</span> <span>(e.g. define local test variables, reset global variables, clear <code>canvas</code>, etc.)</span> <span>(<a href="/faq#setup-teardown">see FAQ</a>)</span> </label><textarea name="setup" id="setup" maxlength="16777215"></textarea></div>
                        <div><label for="teardown">Define <code>teardown</code> for all tests <span>(runs after each clocked test loop, outside of the timed code region)</span> <span>(<a href="/faq#setup-teardown">see FAQ</a>)</span> </label><textarea name="teardown" id="teardown" maxlength="16777215"></textarea></div>
                </fieldset>
                <fieldset id="tests">
                        <h3>Code snippets to compare</h3>
                        <fieldset>
                                <h4>Code snippet 1</h4>
                                <div><label for="test[1][title]">Title <em title="This field is required">*</em> </label><input type="text" name="test[1][title]" id="test[1][title]" required></div>
                                <div><label for="test[1][defer]">Async</label><label class="inline"><input type="checkbox" value="y" name="test[1][defer]" id="test[1][defer]"> (check if this is an <a href="/faq#async">asynchronous test</a>)</label></div>
                                <div><label for="test[1][code]">Code <em title="This field is required">*</em> <span>(No need for loops in the test code; we’ll take care of that for you)</span></label><textarea name="test[1][code]" id="test[1][code]" class="code-js" maxlength="16777215" required></textarea></div>
                        </fieldset>
                        <fieldset>
                                <h4>Code snippet 2</h4>
                                <div><label for="test[2][title]">Title <em title="This field is required">*</em> </label><input type="text" name="test[2][title]" id="test[2][title]" required></div>
                                <div><label for="test[2][defer]">Async </label><label class="inline"><input type="checkbox" value="y" name="test[2][defer]" id="test[2][defer]"> (check if this is an <a href="/faq#async">asynchronous test</a>)</label></div>
                                <div><label for="test[2][code]">Code <em title="This field is required">*</em> </label><textarea name="test[2][code]" id="test[2][code]" class="code-js" maxlength="16777215" required></textarea></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
Benchmark.prototype.setup = function() {
    function match(el, selector){
      return el.webkitMatchesSelector(selector);
    }
   
    var fieldset = document.querySelector('fieldset');
   
    function click(){
      $('[for="slug"]').click();
    }
};
</script>

Preparation code output

Your details (optional)

Test case details

Test case URL will be http://jsperf.com/slug

Preparation code

Include JavaScript libraries as follows: <script src="//cdn.ext/library.js"></script>

Code snippets to compare

Code snippet 1

Code snippet 2

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
match
fieldset.onclick = function(e){
  if (match(e.target, 'fieldset, fieldset *')) return;
};

click();
 
pending…
loop
fieldset.onclick = function(e){
  if (match(e.target, 'fieldset')) return;
  var el = e.target;
  while (el = el.parentNode){
    if (1 != el.nodeType) continue;
    if (match(el, 'fieldset')) return;
  }
};
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment