Estoy escribiendo una aplicación web de chat en vivo para el sitio web de Twitch usando el marco Svelte, quiero establecer una longitud máxima del historial de mensajes de 800, que no parece tener problemas de renderizado ni impacto en el rendimiento... hasta que comience a eliminar el primer elemento secundario del contenido. div para agregar los nuevos mensajes.

Aquí está el informe de rendimiento de Chrome y aquí hay una captura de pantalla ( https://i.imgur.com/kTpjkny.mp4 ) durante la prueba, puede ver el rendimiento a simple vista.

La siguiente es la única función del componente de chat

 messages.subscribe((childs) => { const content = document.querySelector('#content') as HTMLElement; if (childs.length > 800) { content.firstChild?.remove(); } });

Gracias por tu ayuda, me estoy tirando de los pelos ahora mismo.

Editar:

Función de escritura Svelte

 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, }; };