/* * 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. */ // DOMTable - a benchmark creating tables and accessing table elements // // This benchmark tests different mechanisms for creating an HTML table. By // either creating the DOM elements individually or by creating an inner HTML // as a string. The effect of forcing a layout is also measured. // A second part of the benchmark sums the contents of all elements. Again // in one set the benchmark is created using DOM functions from JavaScript, // causing all nodes to be prewrapped, while in a second set the table is // created using inner HTML which will wrap the elements at access. // Size of the created tables. var DOMTable_maxRows = 100; var DOMTable_maxCols = 40; // Helper variable to create consistent values for the table elements. var DOMTable_element_count = 0; // Functions needed to create a table by creating individual DOM elements. function DOMTable_CreateCell(row_id, col_id) { var cell = document.createElement("td"); cell.id = "$" + row_id + "$" + col_id; cell.textContent = DOMTable_element_count++; return cell; } function DOMTable_CreateRow(row_id, cols) { var row = document.createElement("tr"); for (var i = 0; i < cols; i++) row.appendChild(DOMTable_CreateCell(row_id, i)); return row; } function DOMTable_CreateTable(rows, cols) { var table = document.createElement("table"); for (var i = 0; i < rows; i++) table.appendChild(DOMTable_CreateRow(i, cols)); return table; } // Functions needed to create a table by creating a big piece of HTML in a // single string. function DOMTable_CreateCellIH(row_id, col_id) { return '' + DOMTable_element_count++ + ''; } function DOMTable_CreateRowIH(row_id, cols) { var html_string = ''; for (var i = 0; i < cols; i++) html_string += DOMTable_CreateCellIH(row_id, i); return html_string + ''; } function DOMTable_CreateTableIH(rows, cols) { var html_string = ''; for (var i = 0; i < rows; i++) html_string += DOMTable_CreateRowIH(i, cols); return html_string + '
'; } // Shared setup function for all table creation tests. function DOMTable_CreateSetup() { DOMTable_element_count = 0; return document.getElementById("benchmark_content"); } function DOMTable_Create(root_element) { // Create the table and add it to the root_element for the benchmark. root_element.appendChild(DOMTable_CreateTable(DOMTable_maxRows, DOMTable_maxCols)); return root_element; } function DOMTable_CreateLayout(root_element) { // Create the table and add it to the root_element for the benchmark. root_element.appendChild(DOMTable_CreateTable(DOMTable_maxRows, DOMTable_maxCols)); // Force a layout by requesting the height of the table. The result is // going to be ignored because there is not cleanup function registered. return root_element.scrollHeight; } function DOMTable_InnerHTML(root_element) { // Create the HTML string for the table and set it at the root_element for the benchmark. root_element.innerHTML = DOMTable_CreateTableIH(DOMTable_maxRows, DOMTable_maxCols); return root_element; } function DOMTable_InnerHTMLLayout(root_element) { // Create the HTML string for the table and set it at the root_element for the benchmark. root_element.innerHTML = DOMTable_CreateTableIH(DOMTable_maxRows, DOMTable_maxCols); // Force a layout by requesting the height of the table. The result is // going to be ignored because there is not cleanup function registered. return root_element.scrollHeight; } function DOMTableSum_Setup() { // Create the table to be summed using DOM operations from JavaScript. By // doing it this way the elements are all pre-wrapped. DOMTable_element_count = 0; var root_element = document.getElementById("benchmark_content"); var table = DOMTable_CreateTable(DOMTable_maxRows, DOMTable_maxCols*5); root_element.appendChild(table); return root_element; } function DOMTableSum_SetupIH() { // Create the table to be summed using InnerHTML. By doing it this way the // elements need to be wrapped on access. DOMTable_element_count = 0; var root_element = document.getElementById("benchmark_content"); var table = DOMTable_CreateTableIH(DOMTable_maxRows, DOMTable_maxCols*5); root_element.innerHTML = table; return root_element; } function DOMTableSum_ById(ignore) { // Sum all elements in the table by finding each element by its id. var sum = 0; var maxRows = DOMTable_maxRows; var maxCols = DOMTable_maxCols*5; for (var r = 0; r < maxRows; r++) { for (var c = 0; c < maxCols; c++) { var cell = document.getElementById("$"+r+"$"+c); sum += (+cell.textContent); } } return sum; } function DOMTableSum_ByTagName(root_element) { // Sum all elements in the table by getting a NodeList of all "td" elements. var sum = 0; var nodes = root_element.getElementsByTagName("td"); var length = nodes.length; for (var i = 0; i < length; i++) { var cell = nodes[i]; sum += (+cell.textContent); } return sum; } var DOMTableTest = new BenchmarkSuite('DOMTable', [ new Benchmark("create", DOMTable_Create, DOMTable_CreateSetup), new Benchmark("create and layout", DOMTable_CreateLayout, DOMTable_CreateSetup), new Benchmark("create with innerHTML", DOMTable_InnerHTML, DOMTable_CreateSetup), new Benchmark("create and layout with innerHTML", DOMTable_InnerHTMLLayout, DOMTable_CreateSetup), new Benchmark("sum elements by id", DOMTableSum_ById, DOMTableSum_Setup), new Benchmark("sum elements by id with innerHTML", DOMTableSum_ById, DOMTableSum_SetupIH), new Benchmark("sum elements by tagname", DOMTableSum_ByTagName, DOMTableSum_Setup), new Benchmark("sum elements by tagname with innerHTML", DOMTableSum_ByTagName, DOMTableSum_SetupIH) ]);