<!doctype html>
<meta charset="utf-8">
<body>
<script>
(function(){
testElementCount(1, function() {
testElementCount(10, function() {
testElementCount(100, function() {
testElementCount(1000, function() {
testElementCount(10000);
});
});
});
});
function testElementCount(count, callback) {
createIframe(function(iframe) {
iframe.style.width = '1024px';
iframe.style.height = '768px';
iframe.contentWindow.cqConfig = {skipObserving: true};
var style = iframe.contentWindow.document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'div { padding-top: 1px; background: red }'
+ 'div:container(width > 500px) { background: green }';
iframe.contentWindow.document.head.appendChild(style);
iframe.contentWindow.document.body.innerHTML = new Array(count + 1).join('<div></div>');
loadScripts(iframe, ['../cq-prolyfill.min.js'], function() {
setTimeout(function() {
var start = iframe.contentWindow.performance.now();
iframe.contentWindow.cqApi.reprocess(function() {
var duration = iframe.contentWindow.performance.now() - start;
console.log(count + ' Init: ' + duration + 'ms');
setTimeout(function() {
start = iframe.contentWindow.performance.now();
iframe.style.width = '320px';
iframe.contentWindow.cqApi.reevaluate(false, function() {
duration = iframe.contentWindow.performance.now() - start;
console.log(count + ' Resize: ' + duration + 'ms');
iframe.parentNode.removeChild(iframe);
callback && callback();
});
}, 2000);
});
}, 2000);
});
});
}
function createIframe(callback) {
var iframe = document.createElement('iframe');
iframe.src = 'about:blank';
iframe.onload = function() {
callback(iframe);
};
document.body.appendChild(iframe);
}
function loadScripts(iframe, scripts, callback) {
scripts = scripts || [];
var loadCount = 0;
function onLoad() {
loadCount++;
if (loadCount === scripts.length) {
callback();
}
}
scripts.forEach(function(scriptUrl) {
script = iframe.contentWindow.document.createElement('script');
script.onload = onLoad;
script.src = scriptUrl;
iframe.contentWindow.document.head.appendChild(script);
});
}
})();
</script>