How to work with very long lists in JavaScript (angular, react, vuejs)?

Question

JavaScript

How to work with very long lists in JavaScript (angular, react, vuejs)?
I have a chat. It has a message history. If I work with jQuery, then I need to add a message to the list of previous commands . If I do it through something reactive (angular, react, vuejs). As an example, this is done in the todo list examples For example, here is the code from the vuejs lesson
$("#chat-history").append("HTML код сообщения")

<ul class="todo-list">
      <li v-for="todo in filteredTodos"
        class="todo"
        :key="todo.id"
        :class="{ completed: todo.completed, editing: todo == editedTodo }">
        <div class="view">
          <input class="toggle" type="checkbox" v-model="todo.completed">
          <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
          <button class="destroy" @click="removeTodo(todo)"></button>
        </div> 
      </li>
</ul>

I will add a new message to the model, and then, as far as I understand, it will redraw its entire virtual dom in its depths and compare and insert the changes into the real dom. In my experience, layout of a single message can be very difficult if there are emojis or an audio message player or something like that.
At what length of the list of messages will this start to work noticeably slower than a simple .append? Approximately how many FPS can you have with a complex layout of messages and about 100 messages in the history + a contact list for about 50 contacts

Answer 1

(angular doesn't use vdom, it's a different story)
Let's be clear: the virtual DOM is basically a js object containing other objects.
When a new message is added, a new object will be added there and the entire DOM will be compared with the old version using a framework-specific diff algorithm.
Working with an object is much faster than working with the DOM itself, so for it to start working noticeably slower, you must have a wild level of nesting or a very large DOM.
100 messages and 50 contacts are small numbers, any of the mentioned frameworks will cope with this without any drawdowns.
Here is an example of benchmarks with a large number of objects (1000+) for many frameworks using a simple table as an example:
www.stefankrause.net/js-frameworks-benchmark6/webd...
(there is also a link to the repo to see how it looks
) are coping with it.
In reality, you are unlikely to have to add such numbers, because initially they usually load a smaller amount: one that the user can see on one screen, everything else is loaded gradually as needed. The same goes for your chat history, it should be loaded only for the period for which it is needed by the user.

Answer 2

Too abstract questions. Do it with your layout and evaluate the performance. Nothing will be completely redrawn. Each such library has its own mechanisms for improving performance. In the view version, you will most likely just add one element to the list and compare other elements for change. And then redrawing what has changed.

Answer 3

All these messages are usually not rendered at once - what is on the screen and a little above and below is drawn. When scrolling, containers are reused and there are not so many elements in the DOM. It is called a virtual list, there are implementations for each specified framework.

Answer 4

Alexis is correct.
From the Vue.js docs https://ru.vuejs.org/v2/guide/syntax.html

To work, Vue compiles templates into virtual DOM render functions. In combination with the reactivity system, Vue knows how to determine the minimum number of components to re-render and apply the minimum number of manipulations to the DOM when the application state changes.

Answer 5

There will be no problems. For the browser, these numbers mean nothing. It will be noticeable when there are thousands of them. But why render a thousand messages, if only the last ten relevant ones are possible, and if the user wants, then load him more. Look at how it is done in instant messengers, initially you have a limited number of messages available in the chat, when you scroll up, the earlier ones are loaded. Thus, you do not need to store the entire message history in memory.

Answer 6

In Angular, in order not to redraw the entire list, ngForTrackBy is used https://angular.io/api/common/NgForOf in React, property key is used for this, and it will not render the template to you if you do not specify it