53 lines
1.8 KiB
HTML
53 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script>
|
|
window.__DT_PERF_MODE__ = true;
|
|
</script>
|
|
<script type="module">
|
|
import { Component, RefreshState } from '@web/state';
|
|
import '../src/index.js';
|
|
|
|
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);
|
|
|
|
RefreshState(document.body);
|
|
|
|
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>
|