mention editor html templating

JavaScript performance comparison

Revision 2 of this test case created by Bulat

Info

Making sure it's fast.

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    var namespace = 'qp_' + (+new Date()) + '__', updateUrl = 'abc', issuesUrl = 'def', version = '1.0';
        function tooltipHtmlSplitjoin(namespace) {
            return (
                '&lt;div class="hover_menu">' +
                    '&lt;div id="arrowNub" class="hover_menu_nub">&lt;/div>' +
                    '&lt;div id="prompt" class="menu_contents growl_notification">' +
                        '&lt;input id="inputField" type="text" />' +
                        '&lt;div id="controls">' +
                            '&lt;a id="okButton" href="#" class="submit_button">Save&lt;/a>' +
                            '&lt;a id="cancelButton" href="#" title="Undo changes and close">Cancel&lt;/a>' +
                            '&lt;a id="helpToggle" class="%ns%hidden" href="#">+&lt;/a>' +
                        '&lt;/div>' +
                        '&lt;div id="help">' +
                            '&lt;a href="' + updateUrl + '" title="You have version ' + version + '" target="_%ns%_update">Check for updates&lt;/a>' +
                            '&lt;br/>&lt;a href="' + issuesUrl + '" target="_%ns%_issues">Report bug&lt;/a>' +
                        '&lt;/div>' +
                    '&lt;/div>' +
                '&lt;/div>'
            ).split('id="').join('id="' + namespace).split('%ns%').join(namespace);
        }
       
        function tooltipHtmlRegex(namespace) {
            return (
                '&lt;div class="hover_menu">' +
                    '&lt;div id="arrowNub" class="hover_menu_nub">&lt;/div>' +
                    '&lt;div id="prompt" class="menu_contents growl_notification">' +
                        '&lt;input id="inputField" type="text" />' +
                        '&lt;div id="controls">' +
                            '&lt;a id="okButton" href="#" class="submit_button">Save&lt;/a>' +
                            '&lt;a id="cancelButton" href="#" title="Undo changes and close">Cancel&lt;/a>' +
                            '&lt;a id="helpToggle" class="%ns%hidden" href="#">+&lt;/a>' +
                        '&lt;/div>' +
                        '&lt;div id="help">' +
                            '&lt;a href="' + updateUrl + '" title="You have version ' + version + '" target="_%ns%_update">Check for updates&lt;/a>' +
                            '&lt;br/>&lt;a href="' + issuesUrl + '" target="_%ns%_issues">Report bug&lt;/a>' +
                        '&lt;/div>' +
                    '&lt;/div>' +
                '&lt;/div>'
            ).replace(/id="/g, 'id="' + namespace).replace(/%ns%/g, namespace);
        }
   
    function tooltipHtmlReplace(namespace) {
                return (
                    '&lt;div class="hover_menu">' +
                        '&lt;div id="arrowNub" class="hover_menu_nub">&lt;/div>' +
                        '&lt;div id="prompt" class="menu_contents growl_notification">' +
                            '&lt;input id="inputField" type="text" />' +
                            '&lt;div id="controls">' +
                                '&lt;a id="okButton" href="#" class="submit_button">Save&lt;/a>' +
                                '&lt;a id="cancelButton" href="#" title="Undo changes and close">Cancel&lt;/a>' +
                                '&lt;a id="helpToggle" class="%ns%hidden" href="#">+&lt;/a>' +
                            '&lt;/div>' +
                            '&lt;div id="help">' +
                                '&lt;a href="' + updateUrl + '" title="You have version ' + version + '" target="_%ns%_update">Check for updates&lt;/a>' +
                                '&lt;br/>&lt;a href="' + issuesUrl + '" target="_%ns%_issues">Report bug&lt;/a>' +
                            '&lt;/div>' +
                        '&lt;/div>' +
                    '&lt;/div>'
                ).replace('id="', 'id="' + namespace).replace('%ns', namespace);
            }
};
</script>

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Placeholders replaced with .split().join()
var html = tooltipHtmlSplitjoin(namespace);
pending…
Placeholders replaced with .replace(/regex/g)
var html = tooltipHtmlRegex(namespace);
pending…
Placeholders replaced with .replace(string, string)
var html = tooltipHtmlReplace(namespace);
pending…

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:

0 comments

Add a comment