Question

I’m writing some code that wraps various content into columns of text (and images, videos, etc). The code works fine, but due to the algorithm I’m using it’s rather slow, specifically this general logic:

• add something (text for this example) to a column
• check to see if column.scrollHeight > column.offsetHeight (this requires a DOM reflow)
  • if yes, start to binary split the text until it’s shorter

Basically my issue is that I’m adding an unknown amount of text to a column, so after each chunk of text I check the column’s scroll height which requires the browser to actively reflow the DOM in order to give me the correct scrollHeight. So I have 50-100 or more reflows in order to properly lay everything out.

Any general ideas on how to avoid most of these?

Answer 1

You could render the content multiple times. Since the first time would cache it, this should be fairly fast. The reason for the multiple rendering would be as follows.

1. Render the original content in a hidden area

2. Check to see what the column width is compared to content

3. Overlay the content over the column, but beneath the page. This
   will cut off part of the content that is overflowing. You can accomplish with
   z-indexing or with overflow: hidden;

4. Based on what the check from step 2 was, overlay a copy of the content with
   the calculated offset in the next column in the same fashion, hiding the
   extra content.

5. Keep track of the rendered content versus total content so you can tell how many
   columns you need to do this to if there are multiple columns.