Poor JavaScript rendering performance

Question

In my project I do lots of HTML manipulation via JavaScript, multiple times a second I'm attempting to add new HTML, edit existing one and delete other HTML. This is what a sample function that creates HTML looks like:

function getItemInventoryHTML(item){
    var color = Idle.getRarityColor(item.rarity);
    return `<div class="card" id="item-${item.uniqueID}">
               <div class="ui segment basic full-height">
                 <div class="ui ${color} top attached label">[<span class="item-amount">${item.amount}</span>] ${item.name}</div>
                    <div class="ui grid full-height">
                       <div class="six wide column">
                          <img class="ui fluid image ${item.enchantments.length > 0 ? "enchanted" : ""}" src="${item.image}">
                        </div>
                        <div class="ten wide column">
                          ${item.GetEnchantDesc()}
                        </div>
                      </div>
                    </div>
               <button class="ui button green fluid tiny bottom attached" onclick="game.inventorySell('${item.uniqueID}');">Sell for ${Idle.FormatNumber(item.price)} ${Idle.Image(icon.gold,16,16,"ui avatar image")}</button>
               </div>
            </div>`;
  }

This function would be in a for loop collecting all of the HTML into a variable and then I create it using .innerHTML = html; But the performance is very poor, according to google chrome the browser spends about 500ms on 'Recalculate Style' and 'Rendering'.

What can I do to push the performance, or force the browser to only render newly created HTML ?

This is exactly what things like React are designed to make more efficient. — jonrsharpe
– jonrsharpe, Commented Feb 1, 2020 at 19:11
@jonrsharpe what is react ? Is it a library I can just add to my code, or like a new javascript version (like CoffeeScript) ? — killereks
– killereks, Commented Feb 1, 2020 at 19:20
I would strongly recommend research, there is lots of material explaining exactly what it is and how to use it. — jonrsharpe
– jonrsharpe, Commented Feb 1, 2020 at 19:21
React, Angular, and Vue are frameworks made for this. Angular is pretty complex (as is Polymer that I'm working with), but React seems like the code you written. Took me a day to read up on it. Haven't read Vue but people keeps telling me it's great. — Rickard Elimää
– Rickard Elimää, Commented Feb 1, 2020 at 19:24

Mat Sz · Accepted Answer · 2020-02-01 19:11:45Z

2

Updating innerHTML is generally computationally expensive since the browser has to parse the code on each update.

What you should do is to create the elements with JavaScript (document.createElement), store the references to them for later modification/deletion, and append them to your container element. But at this point, you're basically reinventing UI libraries like React.

With innerHTML = x there's no way to notify the browser of which elements are new and which aren't (or maybe which old elements have changed). The browser doesn't check for similarities between old and new data.

answered Feb 1, 2020 at 19:11

Mat Sz

2,5521 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

killereks Over a year ago

Hmm, but with the complexity of some of the HTML, it would be a real pain to do document.createElement for everything and then append children where applicable. When using document.createElement does the browser only re-paint the newly created element ?

Mat Sz Over a year ago

When using document.createElement the browser ideally would only repaint the newly created element if it's in view. Depends on the browser.

Mat Sz Over a year ago

The solution for the complexity is to use a library, though. That's why they exist, someone took a complex problem and made it extremely simple.

akinuri Over a year ago

@killereks I've written a tiny tool (element.js) for creating dynamic HTML. You might want to examine it, and maybe use/write your own.

killereks Over a year ago

@akinuri could you tell me how much faster your library is than my method ? Since I need to refactor about 2000 lines of code I need to make sure it's worth the performance gain.

|

Collectives™ on Stack Overflow

Poor JavaScript rendering performance

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related