很高興看到部分常見的 DOM 作業速度加快。這些變更是在 WebKit 層級進行,可提高 Safari (JavaScriptCore) 與 Chrome (V8) 的效能。
Chrome 工程師 Kentaro Hara 對 WebKit 進行了七項程式碼最佳化調整,以下是一些結果,其中顯示了 JavaScript DOM 存取速度更快的進展:
DOM 效能提升摘要
div.innerHTML
和div.outerHTML
效能提升 2.4 倍 (V8、JavaScriptCore)- Chromium/Mac 中的
div.innerText
和div.outerText
效能比 4 倍 (V8/Mac) - CSS 資源的存取權提高35% (JavaScriptCore)
div.classList
、div.dataset
和div.attributes
的福利最高可達 10.9 倍 (V8)div.firstElementChild
、lastElementChild
、previousElementSibling
和nextElementSibling
的效能提升 7.1 倍 (V8)- V8 DOM 屬性存取權提高 4 至 5% (V8)
下方則是 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 團隊和其他團隊的成員。