3 lines of code that could significantly improve performance

[monikr]

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:

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]);
}),
...

 

[Mastiff]

@J_S