jQueryUI slows down jQuery.replace (i.e. Ajax)

by felvhage

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>')

//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);
    }
}
//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;');


//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:red">replacing content: ' + result + 'ms;</span>');

//'shut off cleanData'
$.cleanData = function( elems ) {};

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

$currentContent= $('#root').find('#content');
start = new Date();
//replace without cleanData
$currentContent.replaceWith($newContent2);
stop = new Date();
result = stop- start;
$('#result').append('<br>3. <span style="color:green">replacing content without cleanData: ' + result + 'ms;</span>');