Todd Smith stlsmiths

Initial Benchmarking of YUI 2 vs YUI 3 DataTables

This was a basic "brute force" testing for basic timings, using the YUI Console tool -- definitely not a comprehensive study (i.e. no profiling, etc..).

The basic test consists of creating and rendering a simple DT (no parsing, formatting, sorting, scrolling, editing, etc...) using a local Javascript Array for the data with 500 records. Yes, I know 500 records is quite a lot of data without using other features (pagination, scrolling), but I wanted something to allow enough time and enough page elements to make it somewhat interesting!

CASE 1 : The YUI 2.9 DT example dt_290_array500.html and source at gist 1567371

CASE 2 : The YUI 3.4.1 DT example dt_341_array500.html and source at gist 1567375

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<title>YUI 2 - DT Benchmarking 2.9.0</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	</head>

	<body class="yui-skin-sam">

	<script src="http://yui.yahooapis.com/2.9.0/build/yuiloader/yuiloader-min.js"></script>

	// Define a custom formatter to format Numbers as US currency format, and if negative, to
	// set color to RED and surround with parenthesis;
	// Example: ( $ 12,345.67 ) in red
	// Note: Function needs to be defined BEFORE the Column definitions that use it !!
	var fmtNegCurrency = function(elCell, oRec, oCol, oData) {
	var num_prefix='',
	num_suffix='';

	if ( oData < 0.0 ) {
	YAHOO.util.Dom.setStyle(elCell,'color','red');

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Resize Example</title>

	<style type="text/css">
	#demo {
	height: 100px;
	width: 100px;

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>YUI DataTable Example</title>

	<script src="http://yui.yahooapis.com/2.9.0/build/yuiloader/yuiloader-min.js"></script>

	<script type="text/javascript">

	<html>
	<head>
	<title>YUI DataTable Exercises</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<script src="http://yui.yahooapis.com/2.9.0/build/yuiloader/yuiloader-min.js"></script>

	<style type="text/css">
	div.info {
	background:#ffc;

	/*
	Based on ndef.parser, by Raphael Graf([email protected])
	http://www.undefined.ch/mparser/index.html

	Website http://silentmatt.com/javascript-expression-evaluator/
	*/

	// Added by TES 6/13/2011
	// re-define indexOf, because IE doesn't know it ...
	// from http://stellapower.net/content/javascript-support-and-arrayindexof-ie

	//--------------------------------------------------------------------------------------
	// TODD'S Table Nav Stuff ...... BEGIN
	//
	// Functions allow cell navigation within a DataTable, first developed in pmgr/trans_grid.html
	//
	//
	//

	YAHOO.widget.DataTable.prototype.getFirstVisTdEl = function(cell) {
	if ( !cell ) return null;