list perf: re-render list at most once per second

This should at least keep the browser somewhat usable even if lots of
updates are received from server.
This commit is contained in:
Oliver Gerlich 2018-07-16 22:18:32 +02:00
parent 1c6c8b0e02
commit c7b051e73b
1 changed files with 24 additions and 0 deletions

View File

@ -10,6 +10,8 @@ export class ListView extends View {
constructor () { constructor () {
super(); super();
this.lastRenderTime = null;
this.deferredRenderTimer = null;
const table = domlib.newAt(this.el, 'table'), const table = domlib.newAt(this.el, 'table'),
thead = domlib.newAt(table, 'thead'); thead = domlib.newAt(table, 'thead');
@ -386,6 +388,28 @@ export class ListView extends View {
if (this.editing && this.tbody) { if (this.editing && this.tbody) {
return; return;
} }
// render at most once every 1000 msec
const nowTime = Date.now();
if (this.lastRenderTime != null) {
const timeSinceLastRender = nowTime - this.lastRenderTime,
maxRenderDelay = 1000;
if (timeSinceLastRender < maxRenderDelay) {
console.log("deferring render() impl");
if (this.deferredRenderTimer == null) {
this.deferredRenderTimer = setTimeout(() => {
console.log("doing deferred render() impl now");
this.render();
this.deferredRenderTimer = null;
}, maxRenderDelay - timeSinceLastRender);
}
return;
}
}
this.lastRenderTime = nowTime;
console.log("immediate render()");
while(this.tbody.hasChildNodes()) { while(this.tbody.hasChildNodes()) {
this.tbody.removeChild(this.tbody.firstElementChild); this.tbody.removeChild(this.tbody.firstElementChild);
} }