How to make updates in DOM elements more efficient?

Question

I'm making a collaborative browser text editor and I have some optimizations concerns. The goal is to allow users to edit files arbitrarily long. When someone updates the file, everyone receives an update notification, which updates the editor content.

I'm interested to know what happens under the hood with the code bellow: does the program deallocates the old value content and allocates the new one every time this function is called? Ideally, what I would like to do is to have something like a 'file buffer', then I would just move the contents around as the users insert new data into it. But I don't want to lose the convenience of using the textarea element with its events and stuff.

function updateTextAreaValue(new_value) {
  var my_textarea = document.querySelector("#my_textarea");
  my_textarea.value = new_value;
}

Answer 1

The contents of a textarea are just a string. Setting a new value releases the string it used to contain (making it eligible for garbage collection), and stores the new one.

You've said you don't want to lose the convenience of a textarea element because of its "events and stuff," but a contenteditable div will have the same events, and also a DOM structure within it that you can adjust rather than replacing the entire string. And since it's HTML, it has styling, etc.

But of course, if a textarea serves your needs...