jQueryUI.cleanData Implementations

HTML

<div id="result" style="">RESULTS: </div>

<div style=""><br>The teest turns of cleanData completely in 3. To see performance of jQuery "default"-cleanData , you may turn off jQuery-UI 1.9.2 in the fiddle options and look at result 2 (red)</div>
<div id="root" style="width: 100%; height:5px;float: left">root</div>

JavaScript

var scale= 50; //higher number for big DOM

//Timer-Variables
var start, stop, result;

//A Div with content
var $content= $('<div id="content" style="width: 100%; height:5px;">content- before</div>')

var removeHandler = function(e){
    $('#result').append('<br>Remove was called!');
};

//helper-function to append arbitrary content
var createContent= function($obj, size){

    for (i=0;i<size;i++){
        $i= $('<div id="level' + i +'" style="display:inline-block;">level1_' + i + '</div>');
        for (j=0;j<size;j++){
            $j= $('<div id="level' + j +'">level2_' + j + '</div>');
            $i.append($j);
        }
        $obj.append($i);
        
    }
    $obj.bind('remove', removeHandler);
}
//create content
createContent($content, scale);

start = new Date();
//append content to root
$('#root').append($content);
stop = new Date();
result = stop- start;
//show result
$('#result').append('<br>1. appending content: ' + result + 'ms;');
$('#result').append('<br>-----------------------------------');

//create new content
var $newContent= $('<div id="content" style="width: 100%; height:5px;">content- new</div>')
createContent($newContent, scale);

var $currentContent = $('#root').find('#content');
start = new Date();
//replace content 
$currentContent.replaceWith($newContent);
stop = new Date();
result = stop- start;

//show second result
$('#result').append('<br>2. <span style="color:black">replacing content with jQuery: ' + result + 'ms;</span>');
$('#result').append('<br>-----------------------------------');

//'modify cleanData to behave like in jQueryUI'
var keep= $.cleanData;
$.cleanData = function( elems ) {
	for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
		try {
			$( elem ).triggerHandler( "remove" );
		// http://bugs.jquery.com/ticket/8235
		} catch( e ) {}
	}
	keep( elems );
};



//create new content2
var $newContent2= $('<div id="content" style="width: 100%; height:5px;">content-...