How to optimize performance in a list with thousands of items?

I’m building a Chat, the case is as follows.
As users send more messages, more items are added to a list that contains the chat messages, it can reach thousands of thousands (100k for example), my question is if I have to use some lazyload library or js code, to that the browser is not overloaded with so many items.

Maybe the browser supports hundreds of thousands of items (more than 100k) without adding anything, or if I really have to use lazyload or some js code, help me please.

My code is simple:

<div class="chat__content" id="chat-content">
   <div class="message">
       <span class="message__user">Bill Gates</span>
       <span class="message__content">Hello World!</span>
   </div>
</div>

And a socket that is responsible for listening to incoming messages (socket.io)

socket.on("chat:message", function (message) {
  var div = document.createElement("div");
  div.classList.add("message");
  div.innerHTML = '<span class="message__user">' + message.user + '</span><span class="message__content">' + message.content + "</span>";

  const chatContent = document.getElementById('chat-content')
  chatContent.appendChild(div)
  chatContent.scrollTop = chatContent.scrollHeight - chatContent.clientHeight
});