I am writing a live chat web app for Twitch website using Svelte framework, I want to set a max message history length of 800, which does not seem to have rendering problems or performance hit... until I start removing the firstChild of the content div to add in the new messages.

Here's the Chrome performance report and here's a screen captur (https://i.imgur.com/kTpjkny.mp4) during the test, you can see the performance hit by eye.

Following is the chat component's only function

messages.subscribe((childs) => {
  const content = document.querySelector('#content') as HTMLElement;

  if (childs.length > 800) {
    content.firstChild?.remove();
  }
});

Thank you for your help, I am pulling my hair right now

Edit:

Svelte writable function

const messagesWritable = () => {
  const { update, subscribe }: Writable<Message[]> = writable([]);

  return {
    addMessage: (msg: Message) =>
      update((v) => {
        if (v.length >= 800) {
          v.splice(0, 1);
        }
        return [...v, msg];
      }),
    subscribe,
  };
};