Slow scrollbar performance when a div has thousands of lines of text (8-10k+) in Chrome

Question

I am outputting 10k+ separate lines in a div. Something similar to what you see in console output in a continuous integration app (like Jenkins). I noticed when I reach a threshold the scrollbar is non-responsive.

I noticed this trick (Managing HTML5 DIV Size) would keep it showing only X number of lines in the div but it clears out the remaining lines so the user can't see all the lines of text.

What are my optioons to still show the user all the data within the div and still have good response on the scrollbar?

You could slow down scropling speed/ set a max scrolling speed ( see "parallax scrolling" for simillar code) — Jonas Wilms, Sep 12 '16 at 17:34
Giving the user 10,000 lines to read (assumption) is an extremely poor user experience. You should attempt to decrease the number of lines for the users sake. — Erik Philips, Sep 12 '16 at 17:45

score 0 · Answer 1 · edited May 23 '17 at 12:01

From a normal user perspective - I agree 10k+ in a div is poor user experience. But - the users who would be using this tool actually prefer a command line console-like experience where text is just getting spit out to the client asynchronously and they see it in "real time."

Anyway - I did find the problem. I was appending to InnerHtml as I was getting data per line from the server (using Server Sent Events). Using appendChild() made the scrollbar much, much more responsive since it doesn't cause a complete rebuild of the DOM each time.

Here's a discussion on this topic:"innerHTML += ..." vs "appendChild(txtNode)"

Slow scrollbar performance when a div has thousands of lines of text (8-10k+) in Chrome

1 Answers1