javascript - 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; 创建它 但根据 google chrome 浏览器的说法，性能非常差“重新计算样式”和“渲染”花费约 500 毫秒。

我可以做些什么来提高性能，或者强制浏览器只渲染新创建的 HTML？

Answer 1

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

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

使用 innerHTML = x 时，无法通知浏览器哪些元素是新的、哪些不是(或者哪些旧元素已更改)。浏览器不会检查新旧数据之间的相似性。