Info

Benchmarking various bookmarklet-friendly ways to build namespaced HTML trees in JavaScript.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  Benchmark.prototype.setup = function() {
    var updateUrl = 'UPDATE_URL',
        issuesUrl = 'ISSUES_URL',
        version = '1.2';
    
    function makeTags(tagNames, helper) {
        for (tag in tagNames) {
            window[tagNames[tag]] = helper(tag);
        }
    }
    
    function tagHelper(name) {
      return function(properties) {
        var children = Array.prototype.slice.call(arguments, 1),
            self = $('<' + name + '/>', properties);
    
        for (var i = 0; i < children.length; i++) {
          if (children[i].jquery) {
            self.append(children[i]);
          } else {
            self.html(children[i]);
          }
        }
    
        return self;
      }
    }
    
    function nativeDomTagHelper(name) {
        return function(properties) {
            var children = Array.prototype.slice.call(arguments, 1),
                self = document.createElement(name);
    
            for (p in properties) {
                if (properties.hasOwnProperty(p)) {
                    self[p] = properties[p];
                }
            }
    
            for (var i = 0; i < children.length; i++) {
                if (typeof children[i] !== 'string') {
                    self.appendChild(children[i]);
                }
                else {
                    self.innerHTML = children[i];
                }
            };
    
            return self;
        }
    }
    
    function rawStringTagHelper(name) {
        return function(properties) {
            var children = Array.prototype.slice.call(arguments, 1),
                self = '<' + name;
    
            for (p in properties) {
                if (properties.hasOwnProperty(p)) {
                    self += p + '="' + properties[p] + '"';
                }
            }
    
            self += '>';
            for (var i = 0; i < children.length; i++) {
                self += children[i];
            };
    
            // Enjoy your <br></br>
            return self + '</' + name + '>';
        }
    }
    
    function ns(string) {
      return string.replace('%ns%', 'NAMESPACE');
    }
    
    function htmlFromString(namespace) {
        return (
            '<div class="hover_menu">' +
                '<div id="arrowNub" class="hover_menu_nub"></div>' +
                '<div id="prompt" class="hover_menu_contents">' +
                    '<input id="inputField" type="text" />' +
                    '<div id="controls">' +
                        '<a id="okButton" href="#" class="submit_button">Save</a>' +
                        '<a id="cancelButton" href="#" title="Undo changes and close">Cancel</a>' +
                        '<a id="helpToggle" class="%ns%hidden" href="#">+</a>' +
                    '</div>' +
                    '<div id="help">' +
                        '<a href="' + updateUrl + '" title="You have version ' + version + '" target="_%ns%_update">Check for updates</a>' +
                        '<br/><a href="' + issuesUrl + '" target="_%ns%_issues">Report bug</a>' +
                    '</div>' +
                '</div>' +
            '</div>'
        ).replace(/id="/g, 'id="' + namespace).replace(/%ns%/g, namespace);
    }
    
    makeTags({a: 'a', br: 'br', div: 'div', input: 'input'}, tagHelper);
    makeTags({a: 'a2', br: 'br2', div: 'div2', input: 'input2'}, nativeDomTagHelper);
    makeTags({a: 'a3', br: 'br3', div: 'div3', input: 'input3'}, rawStringTagHelper);
  };
</script>

Test runner

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

Java applet disabled.

$(htmlFromString('NAMESPACE'));

div({'class': 'hover_menu'},
    div({id: 'arrowNub', 'class': 'hover_menu_nub'}),
    div({id: 'prompt', 'class': 'hover_menu_contents'},
        input({id: 'inputField', type: 'text'}),
        div({id: 'controls'},
            a({id: 'okButton', href: '#', 'class': 'submit_button'}, 'Save'),
            a({id: 'cancelButton', href: '#', title: 'Undo changes and close'},
                'Cancel'
            ),
            a({id: 'helpToggle', href: '#', 'class': ns('%ns%hidden')}, '+')
        ),
        div({id: 'help'},
            a({href: updateUrl, title: 'You have version ' + version, target: ns('_%ns%_update')},
                'Check for updates'
            ),
            br(),
            a({href: issuesUrl, target: ns('_%ns_issues')}, 'Report bug')
        )
    )
)

$(
div2({'class': 'hover_menu'},
    div2({id: 'arrowNub', 'class': 'hover_menu_nub'}),
    div2({id: 'prompt', 'class': 'hover_menu_contents'},
        input2({id: 'inputField', type: 'text'}),
        div2({id: 'controls'},
            a2({id: 'okButton', href: '#', 'class': 'submit_button'}, 'Save'),
            a2({id: 'cancelButton', href: '#', title: 'Undo changes and close'},
                'Cancel'
            ),
            a2({id: 'helpToggle', href: '#', 'class': ns('%ns%hidden')}, '+')
        ),
        div2({id: 'help'},
            a2({href: updateUrl, title: 'You have version ' + version, target: ns('_%ns%_update')},
                'Check for updates'
            ),
            br2(),
            a2({href: issuesUrl, target: ns('_%ns_issues')}, 'Report bug')
        )
    )
)
)

$(
div3({'class': 'hover_menu'},
    div3({id: 'arrowNub', 'class': 'hover_menu_nub'}),
    div3({id: 'prompt', 'class': 'hover_menu_contents'},
        input3({id: 'inputField', type: 'text'}),
        div3({id: 'controls'},
            a3({id: 'okButton', href: '#', 'class': 'submit_button'}, 'Save'),
            a3({id: 'cancelButton', href: '#', title: 'Undo changes and close'},
                'Cancel'
            ),
            a3({id: 'helpToggle', href: '#', 'class': ns('%ns%hidden')}, '+')
        ),
        div3({id: 'help'},
            a3({href: updateUrl, title: 'You have version ' + version, target: ns('_%ns%_update')},
                'Check for updates'
            ),
            br3(),
            a3({href: issuesUrl, target: ns('_%ns_issues')}, 'Report bug')
        )
    )
)
)

Compare results of other browsers

Revisions

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:

• Revision 1: published by Bulat on 3rd March 2013
• Revision 2: published by Bulat on 3rd March 2013

0 comments