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沒有辦法通知瀏覽器哪些元素是新的，哪些不是（或者哪些舊元素已經改變）。 瀏覽器不會檢查新舊數據之間的相似性。