for cache vs no cache

Benchmark created by Florian Margaine on December 30, 2012

Preparation HTML

<form action="/" method="post">
        <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>for-cache-vs-no-cache</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"></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&gt;</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"></textarea>                           <div id="add-buttons"><button id="add-jquery">jQuery</button><button id="add-prototype">Prototype</button><button id="add-mootools">MooTools</button><button id="add-yui">YUI</button><button id="add-dojo">Dojo</button><button id="add-ext">Ext Core</button><button id="add-ext">My Library</button></div><p id="add-libraries">Include JavaScript libraries as follows: <code>&lt;script src="//cdn.ext/library.js"&gt;&lt;/script&gt;</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"></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"></textarea></div>
                </fieldset>
                <fieldset id="tests">
                        <h3>Code snippets to compare</h3>
                        <fieldset>
                                <h4>Test 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" required=""></textarea></div>
                        </fieldset>
                        <fieldset>
                                <h4>Test 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" required=""></textarea></div>
                        </fieldset>
                </fieldset>
                <div class="buttons"><button id="beautify" title="Beautify all code fields (HTML and JavaScript)">Beautify code</button><button id="add-test" title="Add another code snippet to the test case">Add code snippet</button><input type="submit" class="submit" value="Save test case" title="Save and view test case"></div>
        </fieldset>
</form>

Setup

function toArray(list, index) {
        var array = []
    
        index = index || 0
    
        for (var i = index || 0; i < list.length; i++) {
            array[i - index] = list[i]
        }
    
        return array
    }
    
    function toArrayCache(list, index) {
        var array = []
    
        index = index || 0
    
        for (var i = index, l = list.length; i < l; i++) {
            array[i - index] = list[i]
        }
    
        return array
    }
    
    function toArraySlice(list, index) {
        var array = []
    
        index = index || 0
    
        return Array.prototype.slice.call(list, index);
    }
    
    var elements = document.getElementsByTagName('*')

Test runner

toArray(elements)

toArrayCache(elements)

toArray(elements, 5)

toArrayCache(elements, 5)

toArraySlice(elements)

toArraySlice(elements, 5)

Revisions

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

• Revision 1: published by Florian Margaine on December 30, 2012