DOM 大幅提高 - WebKit's innerHTML 的速度快上 240%

山姆杜頓

很高興看到部分常見的 DOM 作業速度加快。這些變更是在 WebKit 層級進行，可提高 Safari (JavaScriptCore) 與 Chrome (V8) 的效能。

Chrome 工程師 Kentaro Hara 對 WebKit 進行了七項程式碼最佳化調整，以下是一些結果，其中顯示了 JavaScript DOM 存取速度更快的進展：

DOM 效能提升摘要

下方則是 Kentaro Hara 的說明，詳細說明他製作的某些修補程式。這些連結是含有測試案例的 WebKit 錯誤，因此您可以親自測試這些測試。已在 WebKit r109829 和 r111133 之間進行變更：Chrome 17 不包含這些變更，Chrome 19 則不會包含這些變更。

將 div.innerHTML 和 div.outerHTML 的效能提升 2.4 倍 (V8、JavaScriptCore)

WebKit 中的先前行為：

  • 為每個代碼建立字串。
  • 將建立的字串附加至 Vector<string>，剖析 DOM 樹狀結構。
  • 剖析後，請分配大小為 Vector<string> 中所有字串總和的字串。
  • 串連 Vector<string> 中的所有字串，並以 innerHTML 的形式傳回。

WebKit 中的新行為： 1. 分配一個字串，例如 S。 1. 為每個標記的一個字串串連至 S，逐步剖析 DOM 樹狀結構。1. 以 innerHTML 的形式傳回 S。

簡單來說，修補程式並不會建立大量字串並將其串連，而修補程式只會建立一個字串，再以漸進方式附加字串。

改善 Chromium/Mac 4x 版的 div.innerText 和 div.outerText 效能 (V8/Mac)

修補程式剛剛變更建立 innerText 的初始緩衝區空間。將初始緩衝區大小從 2^16 變更為 2^15，讓 Chromium/Mac 效能提升 4 倍。這取決於基礎的 Malloc 系統。

讓 JavaScriptCore 中的 CSS 資源存取效能提高 35%

在 WebKit 中，CSS 屬性字串 (例如 .fontWeight、.backgroundColor) 會轉換為整數 ID。這項轉換相當多。這個修補程式會將轉換的結果快取在對應中 (即屬性字串 => 整數 ID)，這樣轉換就不會重複執行。

測試如何運作？

用來評估資源的存取時間。若是 innerHTML (bugs.webkit.org/show_bug.cgi?id=81214 中的效能測試)，測試只會測量執行下列程式碼的時間：

for (var i = 0; i < 1000000; i++)
    document.body.innerHTML;

效能測試使用從 HTML 規格複製的大型內文。

同樣地，CSS 屬性存取測試會評估下列程式碼的時間：

var spanStyle = span.style;
for (var i = 0; i < 1000000; i++) {
    spanStyle.invalidFontWeight;
    spanStyle.invalidColor;
    spanStyle.invalidBackgroundColor;
    spanStyle.invalidDisplay;
}

好消息是 Kentaro Hara 認為其他重要的 DOM 屬性和方法效能有待提升。

放馬過來！

給 Haraken 團隊和其他團隊的成員。