PerformanceTests/ShadowDOM/ChangingClassName.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <script type="text/javascript" src="../resources/runner.js"></script>
 </head>
 <body>

 <div id="wrapper">
     <h2>Selected</h2>
     <div id="selected"></div>
     <h2>NonSelected</h2>
     <div id="nonselected"></div>
 </div>

 <script>
 var numDivsInHost = 100;
 var array = new Array(numDivsInHost);

 function setup()
 {
     var nDivs = numDivsInHost;
     var nonSelected = document.getElementById('nonselected');

     for (var i = 0; i < nDivs; ++i) {
         var div = document.createElement('div');
         div.appendChild(document.createTextNode('div' + i));
         array[i] = div;
         nonSelected.appendChild(div);
     }
 }

 function run()
 {
     var nDivs = numDivsInHost;
     var array = window.array;

     var selected = document.getElementById('selected');
     var nonSelected = document.getElementById('nonselected');

     for (var i = 2; i < 100; ++i) {
         for (var j = 0; j < nDivs; ++j) {
             if (j % i == 0) {
                 array[j].className = 'selected';
                 selected.appendChild(array[j]);
             } else {
                 array[j].className = '';
                 nonSelected.appendChild(array[j]);
             }
         }
         selected.offsetLeft;
         nonSelected.offsetLeft;
     }
 }

 function done()
 {
     wrapper.innerHTML = '';
 }

 setup();

 PerfTestRunner.measureTime({
     description: "Measure distribution and layout performance when className is changed (without ShadowDOM)",
     run: run,
     done: done
 });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="../resources/runner.js"></script>
	</head>
	<body>

	<div id="wrapper">
	<h2>Selected</h2>
	<div id="selected"></div>
	<h2>NonSelected</h2>
	<div id="nonselected"></div>
	</div>

	<script>
	var numDivsInHost = 100;
	var array = new Array(numDivsInHost);

	function setup()
	{
	var nDivs = numDivsInHost;
	var nonSelected = document.getElementById('nonselected');

	for (var i = 0; i < nDivs; ++i) {
	var div = document.createElement('div');
	div.appendChild(document.createTextNode('div' + i));
	array[i] = div;
	nonSelected.appendChild(div);
	}
	}

	function run()
	{
	var nDivs = numDivsInHost;
	var array = window.array;

	var selected = document.getElementById('selected');
	var nonSelected = document.getElementById('nonselected');

	for (var i = 2; i < 100; ++i) {
	for (var j = 0; j < nDivs; ++j) {
	if (j % i == 0) {
	array[j].className = 'selected';
	selected.appendChild(array[j]);
	} else {
	array[j].className = '';
	nonSelected.appendChild(array[j]);
	}
	}
	selected.offsetLeft;
	nonSelected.offsetLeft;
	}
	}

	function done()
	{
	wrapper.innerHTML = '';
	}

	setup();

	PerfTestRunner.measureTime({
	description: "Measure distribution and layout performance when className is changed (without ShadowDOM)",
	run: run,
	done: done
	});
	</script>
	</body>
	</html>