Html DOM node limits

Question

I am working on a terminal emulator for entertainment and support the basics of the backend. However, I continue to run into performance issues on the interface.

As you probably know, each character in the terminal window can have a different style. (color, background, bold, underline, etc.). So my idea was to use a <span> for each character in the viewport and apply the inline style if necessary, so I have the degree of control I need.

The problem is that performance is terrifying when upgrading. Chrome can process it on my computer with about 120 operating systems per second, and firefox with 80. But the Internet explorer barely gets 6. So after my stay in html I tried to use the canvas, but the text on the canvas is very slow. The Internet that I read caches, so I implement a cache for each character and can apply colors to the then bitmap font with some kind of composite operation. However, this path is slower than the DOM.

Then I went back to dom and tried to use document.createDocumentFragment , but it is a little worse than the standard just used.

I don’t know where to start optimization now. I could follow that the character is changing, but then I still encounter this slowness when the terminal receives a lot of input.

I am new to the DOM, so I can do something completely wrong ...

any help is appreciated!

Here is jsperf with several test windows:

http://jsperf.com/canvas-bitma32p-cache-test/6

Answer 1

Direct HTML insertion as text is surprisingly effective if you use insertAdjacentHTML to add HTML to an element.

 var div = document.getElementById("output"); var charCount = 50; var line, i, j; for (i = 0; i < charCount; i++) { line = ""; for (j = 0; j < charCount; j++) { line += "<span style=\"background-color:rgb(0,0,255);color:rgb(255,127,0)\">o</span>"; } div.insertAdjacentHTML("beforeend","<div>"+line+"</div>"); } 

 #output{font-family:courier; font-size:6pt;} 

 <div id="output"></div> 

The drawback of this approach is obvious: you will never have the opportunity to consider each added element as an object in JavaScript (they are just simple lines), so you cannot, for example, directly attach an event listener to each of them. (You can do this after the fact by requesting the resulting HTML for matching elements using document.querySelectorAll(".css selector) .)

If you really only print the screen format, insertAdjacentHTML perfect.