resources/dom-perf/events.js

/*
 * Copyright (C) 2009 Google Inc. All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 *     * Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above
 * copyright notice, this list of conditions and the following disclaimer
 * in the documentation and/or other materials provided with the
 * distribution.
 *     * Neither the name of Google Inc. nor the names of its
 * contributors may be used to endorse or promote products derived from
 * this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

// Events test - test the hooking and dispatch of events.
//
// This is a fairly simple test for measuring event peformance.
// We create a DOM structure (a set of nested divs) to test with.
//
// The Hooking test measures the time to register onclick handlers for
// each node in the structure.  This simulates conditions where applications
// register event handlers on many nodes programatically.
//
// The Dispatch test measures the time to dispatch events to each node
// in the structure.  In this case, we register the event handler as part
// of the HTML for the structure, and then simply simulate onclick events
// to each node.
//
// Works in IE, FF, Safari, and Chrome.

var Events_counter = 0;
function EventClickHandler() {
    Events_counter++;
}

function EventsTest(rows, cols) {
    var me = this;
    this.rows = rows;
    this.cols = cols;
    this.cell_count = 0; // Track the number of cells created in our dom tree.
    this.proxies = [];
    this.random_ids = [];

    // Create a DOM structure and optionally register event handlers on each node.
    // Create the structure by setting innerHTML so that the DOM nodes are not
    // pre-wrapped for JS access.
    this.CreateTable = function(add_event_listeners) {
        var html_string = '<div>';
        for (var i = 0; i < me.rows; i++)
            html_string += me.CreateRow(i, me.cols, add_event_listeners);
        return html_string + '</div>';
    };

    // Returns an html string for a div with a row/column based id, with an optional onclick handler.
    this.CreateCell = function(row_id, col_id, add_event_listeners) {
        var str =  '<div id="r' + row_id + 'c' + col_id + '"';
        if (add_event_listeners)
            str += ' onclick="EventClickHandler();"';
        str += '>'+ me.cell_count++ + '</div>';
        return str;
    };

    // Returns an html string with an outer div containing |cols| inner divs,
    // optionally having an onclick handler.
    this.CreateRow = function(row_id, cols, add_event_listeners) {
        var html_string = '<div id="r' + row_id + '">';
        for (var i = 0; i < cols; i++)
            html_string += me.CreateCell(row_id, i, add_event_listeners);
        return html_string + '</div>';
    };

    // Prepares for testing with elements that have no pre-defined onclick
    // handlers.
    this.Setup = function() {
        me.cell_count = 0;
        Events_counter = 0;
        var root_element = document.getElementById("benchmark_content");
        root_element.innerHTML = me.CreateTable(false);
        return root_element;
    };

    // Similar to Setup, but with onclick handlers already defined in the html.
    this.SetupWithListeners = function() {
        me.cell_count = 0;
        Events_counter = 0;
        var root_element = document.getElementById("benchmark_content");
        root_element.innerHTML = me.CreateTable(true);
        return root_element;
    };

    // Sets up for testing performance of removing event handlers.
    this.SetupForTeardown = function() {
        me.random_ids = [];
        me.SetupWithListeners();
        var tmp = [];
        for (var row = 0; row < me.rows; row++) {
            for (var col = 0; col < me.cols; col++)
                tmp.push("r" + row + "c" + col);
        }
        while (tmp.length > 0) {
            var index = Math.floor(Math.random() * tmp.length);
            me.random_ids.push(tmp.splice(index, 1));
        }
    };

    // Tests the time it takes to go through and hook all elements in our dom.
    this.HookTest = function() {
        var node_count = 0;

        var row_id = 0;
        while(true) {
            var row = document.getElementById('r' + row_id);
            if (row == undefined)
                break;

            var col_id = 0;
            while(true) {
                var col = document.getElementById('r' + row_id + 'c' + col_id);
                if (col == undefined)
                    break;

                if (col.addEventListener)
                    col.addEventListener("click", EventClickHandler, false);
                else if (col.attachEvent)
                    col.attachEvent("onclick", EventClickHandler); // To support IE
                else
                    throw "FAILED TO ATTACH EVENTS";
                col_id++;
                node_count++;
            }

            row_id++;
        }

        if (node_count != me.rows * me.cols)
            throw "ERROR - did not iterate all nodes";
    };

    // Tests the time it takes to go through and hook all elements in our dom.
    // Creates new proxy object for each registration
    this.HookTestProxy = function() {
        var node_count = 0;

        var row_id = 0;
        while(true) {
            var row = document.getElementById('r' + row_id);
            if (row == undefined)
                break;

            var col_id = 0;
            while(true) {
                var col = document.getElementById('r' + row_id + 'c' + col_id);
                if (col == undefined)
                    break;

                var proxy = function() {};
                proxy.col = col;
                me.proxies.push(proxy);
                if (col.addEventListener)
                    col.addEventListener("click", proxy, false);
                else if (col.attachEvent)
                    col.attachEvent("onclick", proxy); // To support IE
                else
                    throw "FAILED TO ATTACH EVENTS";
                col_id++;
                node_count++;
            }

            row_id++;
        }

        if (node_count != me.rows * me.cols)
            throw "ERROR - did not iterate all nodes";
    };

    // Tests firing the events for each element in our dom.
    this.DispatchTest = function() {
        var node_count = 0;

        var row_id = 0;
        while(true) {
            var row = document.getElementById('r' + row_id);
            if (row == undefined)
                break;

            var col_id = 0;
            while(true) {
                var col = document.getElementById('r' + row_id + 'c' + col_id);
                if (col == undefined)
                  break;

                if (document.createEvent) {
                    var event = document.createEvent("MouseEvents");
                    event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    col.dispatchEvent(event);
                } else if (col.fireEvent) {
                    var event = document.createEventObject();
                    col.fireEvent("onclick", event);
                } else
                    throw "FAILED TO FIRE EVENTS";

                col_id++;
                node_count++;
            }

            row_id++;
        }

        if (Events_counter != me.rows * me.cols)
            throw "ERROR - did not fire events on all nodes!" + Events_counter;
    };

    // Tests removing event handlers.
    this.TeardownTest = function() {
        var node_count = 0;
        for (var i = 0; i < me.random_ids.length; i++) {
            var col = document.getElementById(me.random_ids[i]);
            if (col.removeEventListener)
                col.removeEventListener("click", EventClickHandler, false);
            else if (col.detachEvent)
                col.detachEvent("onclick", EventClickHandler);
            else
                throw "FAILED TO FIRE EVENTS";
            node_count++;
        }

        if (node_count != me.rows * me.cols)
            throw "ERROR - did not remove listeners from all nodes! " + node_count;
    };

    // Removes event handlers and their associated proxy objects.
    this.ProxyCleanup = function() {
        for (var i = 0, n = me.proxies.length; i < n; i++) {
            var proxy = me.proxies[i];
            var col = proxy.col;
            if (col.removeEventListener)
                col.removeEventListener("click", proxy, false);
            else if (col.detachEvent)
                col.detachEvent("onclick", proxy); // To support IE
        }
        me.proxies = [];
    };
}

var small_test = new EventsTest(100, 10);
var large_test = new EventsTest(100, 50);
var extra_large_test = new EventsTest(200, 20);

var EventTest = new BenchmarkSuite('Events', [
    new Benchmark("Event Hooking (1000 nodes)", small_test.HookTest, small_test.Setup),
    new Benchmark("Event Dispatch (1000 nodes)", small_test.DispatchTest, small_test.SetupWithListeners),
    new Benchmark("Event Hooking (5000 nodes)", large_test.HookTest, large_test.Setup),
    new Benchmark("Event Hooking Proxy (4000 nodes)",
        extra_large_test.HookTestProxy, extra_large_test.Setup, extra_large_test.ProxyCleanup),
    new Benchmark("Event Dispatch (5000 nodes)", large_test.DispatchTest, large_test.SetupWithListeners),
    new Benchmark("Event Teardown (5000 nodes)", large_test.TeardownTest, large_test.SetupForTeardown),
    new Benchmark("Event Teardown (4000 nodes)", extra_large_test.TeardownTest, extra_large_test.SetupForTeardown)
]);