<!DOCTYPE html> | |
<html> | |
<body> | |
<input id="input"> | |
<ul id="list"><li><span></span></li></ul> | |
<div id="console"></div> | |
<script> | |
if (window.testRunner) | |
testRunner.dumpAsText(); | |
var listElement = document.getElementById('list'); | |
var templateElement = list.firstChild; | |
var inputElement = document.getElementById('input'); | |
function test(numberOfElements, focusInput) | |
{ | |
if (focusInput) | |
inputElement.focus(); | |
var startTime = performance.now(); | |
for (var i = 0; i < numberOfElements; i++) { | |
var clone = templateElement.cloneNode(true); | |
clone.childNodes[0].textContent = i; | |
listElement.appendChild(clone); | |
} | |
var endTime = performance.now(); | |
if (focusInput) | |
inputElement.blur(); | |
const originalItem = listElement.firstChild; | |
listElement.textContent = ''; | |
listElement.appendChild(originalItem); | |
return endTime - startTime; | |
} | |
function log(str) | |
{ | |
var element = document.createElement('div'); | |
element.appendChild(document.createTextNode(str)); | |
document.getElementById('console').appendChild(element); | |
} | |
const start = performance.now(); | |
let factor = 0; | |
while (test(1000 * factor, false) < 5) | |
factor++; | |
var timeWithoutFocus = test(1000 * factor, false); | |
var timeWithFocus = test(1000 * factor, true); | |
if (Math.abs(timeWithFocus - timeWithoutFocus) <= timeWithoutFocus) { | |
log('PASS. Cloning elements takes roughly as long with as without focus.'); | |
} else { | |
log('FAIL. Cloning 1000 elements with focus took ' + timeWithFocus + 'ms, without took ' + timeWithoutFocus + 'ms.'); | |
} | |
</script> | |
</body> | |
</html> |