jquery parser vs custom

JavaScript performance comparison

Test case created by NAIF

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Benchmark.prototype.setup = function() {
    var html_string = '<!DOCTYPE html> <html i18n-values="dir:textdirection;" id="uber" class="loading"> <head> <meta charset="utf-8"> <title i18n-content="pageTitle"></title> <link id="favicon" rel="icon" type="image/png" sizes="16x16"> <link id="favicon2x" rel="icon" type="image/png" sizes="32x32"> <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css"> <style>/* Copyright (c) 2012 The Chromium Authors. All rights reserved. * Use of this source code is governed by a BSD-style license that can be * found in the LICENSE file. */ html { height: 100%; /* For printing. */ } body { /* http://crbug.com/129406 --- horizontal scrollbars flicker when changing * sections. */ overflow-x: hidden; } #navigation { height: 100%; left: 0; /* This is a hack to prevent the navigation bar from occluding pointer events * from the bottom scroll bar (which shows when one needs to horizontally * scroll). Corresponding padding-top to offset this is in uber_frame.css */ margin-top: -20px; position: absolute; /* This value is different from the left value to compensate for the scroll * bar (which is always on and to the right) in RTL. */ right: 15px; width: 155px; z-index: 3; } #navigation.background { z-index: 1; } #navigation.changing-content { -webkit-transition: -webkit-transform 100ms, width 100ms; } .iframe-container { -webkit-margin-start: -20px; -webkit-transition: margin 100ms, opacity 100ms; bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; z-index: 1; } .iframe-container.selected { -webkit-margin-start: 0; -webkit-transition: margin 200ms, opacity 200ms; -webkit-transition-delay: 100ms; opacity: 1; z-index: 2; } .iframe-container.expanded { left: 0; } iframe { border: none; display: block; height: 100%; width: 100%; } </style> <script src="chrome://resources/js/cr.js"></script> <script src="chrome://resources/js/load_time_data.js"></script> <script src="chrome://resources/js/util.js"></script> <script src="chrome://chrome/uber.js"></script> <script src="chrome://chrome/uber_utils.js"></script> </head> <body> <div id="navigation"><iframe src="chrome://uber-frame/"></iframe></div> <div class="iframe-container" i18n-values="id:historyHost; data-url:historyFrameURL;" data-favicon="IDR_HISTORY_FAVICON"></div> <div class="iframe-container" i18n-values="id:extensionsHost; data-url:extensionsFrameURL;" data-favicon="IDR_EXTENSIONS_FAVICON"></div> <div class="iframe-container" i18n-values="id:settingsHost; data-url:settingsFrameURL;" data-favicon="IDR_SETTINGS_FAVICON"></div> <div class="iframe-container" i18n-values="id:helpHost; data-url:helpFrameURL;" data-favicon="IDR_PRODUCT_LOGO_16"></div> <script src="chrome://chrome/strings.js"></script> <script src="chrome://resources/js/i18n_template2.js"></script> </body> </html>';

Benchmark.prototype.teardown = function() {
    function parse(b){
    var div = document.createElement('div');
    div.innerHTML = b;
    return div;

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jquery parse
$(html_string).find('#navigation iframe');
custom parse
parse(html_string).querySelector('#navigation iframe');

Compare results of other browsers


You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:


Add a comment