OP 28 May, 2022 - 03:14 PM
I noticed that after leaving my computer on the home page for a while, the performance of the page deteriorated significantly.
I debugged it a bit and found that shoutbox messages are never removed from the browser. This is problematic because every addition of a message causes the rest of the messages to be reindexed. The more messages there are, the more processing power is needed to add a new one.
My suggestion is to add a limit of messages available on the shoutbox (In my example I did 20, but it could be any arbitrary number of your choice), after which, old messages get automatically removed from the client's browser.
Here's the code in question:
This content would be introduced in the following position of the client side source code:
Making it look like this:
I debugged it a bit and found that shoutbox messages are never removed from the browser. This is problematic because every addition of a message causes the rest of the messages to be reindexed. The more messages there are, the more processing power is needed to add a new one.
My suggestion is to add a limit of messages available on the shoutbox (In my example I did 20, but it could be any arbitrary number of your choice), after which, old messages get automatically removed from the client's browser.
Here's the code in question:
Code:
const container = e('#container-' + t.room);
if(container.childElementCount > 20)
container.removeChild(container.children[container.childElementCount-1]);
This content would be introduced in the following position of the client side source code:
Code:
...
handleEvents: function () {
this.socket.on(2, t=>{
void 0 !== t.message.mode && (this.mode = t.message.mode),
e('#container-' + t.room).prepend(this.buildTemplate(t.message))
}),
...
Making it look like this:
Code:
...
handleEvents: function () {
this.socket.on(2, t=>{
const container = e('#container-' + t.room);
void 0 !== t.message.mode && (this.mode = t.message.mode),
container.prepend(this.buildTemplate(t.message));
if(container.childElementCount > 20)
container.removeChild(container.children[container.childElementCount-1]);
}),
...