JavaScript 渲染性能不佳

Question

在我的项目中，我通过 JavaScript 进行了大量 HTML 操作，一秒钟内我多次尝试添加新 HTML、编辑现有 HTML 并删除其他 HTML。 这是创建 HTML 的示例函数的样子：

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>`;
  }

此函数将在 for 循环中将所有 HTML 收集到一个变量中，然后我使用.innerHTML = html;创建它.innerHTML = html; 但是性能很差，根据谷歌浏览器，浏览器在“重新计算样式”和“渲染”上花费了大约 500 毫秒。

我该怎么做才能提高性能，或者强制浏览器只呈现新创建的 HTML ？

Answer 1

更新innerHTML通常在计算上很昂贵，因为浏览器必须在每次更新时解析代码。

您应该做的是使用 JavaScript ( document.createElement ) 创建元素，存储对它们的引用以供以后修改/删除，并将它们附加到您的容器元素。 但在这一点上，你基本上是在重新发明像 React 这样的 UI 库。

使用innerHTML = x没有办法通知浏览器哪些元素是新的，哪些不是（或者哪些旧元素已经改变）。 浏览器不会检查新旧数据之间的相似性。