search

cryptag / leapchat

Ephemeral, encrypted, in-browser chat rooms
https://www.leapchat.org/
Other
186 stars 34 forks source link

Recycle Old Chat Messages #92

Open jimmcgaw opened 7 years ago

jimmcgaw commented 7 years ago

Chat rooms with a lot of people posting a lot of messages will append several new elements to the DOM, which will drag down performance of the page, since all of these nodes have to be managed by the JavaScript framework and the browser rendering engine. This will happen even quicker if we're sticking image thumbnails and full image data download links into the messages.

Past a certain point, we need to remove really old message elements from the DOM. The UX I'm thinking is: the messages would reappear if the user scrolls back up to the top of the chat window. We could just reload these items from the server, or we could possibly offload old messages into a local storage option, like IndexedDB, from which the room could grab the data and re-render if the user scrolls back up.

Another short-term option would be to storage full image or file data from messages into IndexedDB, and if a user clicks "Download", the file is retrieved from the IndexedDB via a link to that content, instead of having the entire file in a DOM element.

Of course, all of this needs to be secure, and there should be a mechanism that evicts old files after a timeout interval if we use some kind of client-side storage option.

elimisteve commented 1 year ago

@jimmcgaw Someone showed me a super impressive demo of react-virtualized a few years ago: https://github.com/bvaughn/react-virtualized . He scrolled through chat messages extremely fast and there was no lag at all!