2026-05-22 19:16:45 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2026-06-11 19:48:40 +08:00
|
|
|
<script src="lib/state.js"></script>
|
|
|
|
|
<script src="lib/base.js"></script>
|
|
|
|
|
<script src="lib/datatable.js"></script>
|
2026-05-22 19:16:45 +08:00
|
|
|
<script>
|
|
|
|
|
window.__DT_PERF_MODE__ = true;
|
|
|
|
|
</script>
|
2026-06-11 19:48:40 +08:00
|
|
|
<script>
|
2026-05-22 19:16:45 +08:00
|
|
|
window.startTest = async () => {
|
|
|
|
|
const fields = Array.from({length: 10}, (_, i) => ({
|
|
|
|
|
id: 'col' + i,
|
|
|
|
|
name: 'Column ' + i,
|
|
|
|
|
width: 150
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
const data = Array.from({length: 10000}, (_, i) => {
|
|
|
|
|
const row = { id: i };
|
|
|
|
|
fields.forEach(f => row[f.id] = `Row ${i} ${f.name}`);
|
|
|
|
|
return row;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const div = document.createElement('div');
|
|
|
|
|
div.setAttribute('style', 'height: 400px; width: 800px; border: 1px solid red');
|
|
|
|
|
div.innerHTML = '<DataTable id="dt" style="display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden"></DataTable>';
|
|
|
|
|
document.body.appendChild(div);
|
|
|
|
|
|
2026-06-11 19:48:40 +08:00
|
|
|
// Wait for MutationObserver to pick up the new element
|
|
|
|
|
await new Promise(r => setTimeout(r, 0));
|
2026-05-22 19:16:45 +08:00
|
|
|
|
|
|
|
|
const dt = document.getElementById('dt');
|
|
|
|
|
dt.state.fields = fields;
|
|
|
|
|
dt.state.list = data;
|
|
|
|
|
|
|
|
|
|
await new Promise(r => setTimeout(r, 500));
|
|
|
|
|
|
|
|
|
|
const scrollTarget = dt.querySelector('.dt-main');
|
|
|
|
|
console.log('root clientHeight:', scrollTarget.clientHeight);
|
|
|
|
|
console.log('root scrollHeight:', scrollTarget.scrollHeight);
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < 100; i++) {
|
|
|
|
|
scrollTarget.scrollTop += 200;
|
|
|
|
|
scrollTarget.dispatchEvent(new Event('scroll'));
|
|
|
|
|
await new Promise(r => setTimeout(r, 10));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return JSON.parse(JSON.stringify(dt.state.perf));
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body></body>
|
|
|
|
|
</html>
|
