DOM performansında büyük artış: WebKit's internalHTML% 240 daha hızlı

Sam Dutton

Twitter GitHub Glitch Mastodon Ana Sayfa

Yaygın olarak kullanılan bazı DOM işlemlerinin çok hızlı bir şekilde hızlandığını görmekten çok mutluyuz. Değişiklikler WebKit düzeyindeydi ve hem Safari (JavaScriptCore) hem de Chrome (V8) için performansı artırdı.

Chrome Mühendisi Kentaro Hara, WebKit'te yedi kod optimizasyonu yaptı. JavaScript DOM erişiminin ne kadar hızlı hale geldiğini gösteren sonuçlar aşağıda verilmiştir:

DOM performansı artışları özeti

• div.innerHTML ve div.outerHTML performansı 2,4 kat arttı (V8, JavaScriptCore)
• Chromium/Mac'te 4x bazında div.innerText ve div.outerText performansı (V8/Mac)
• CSS mülkü erişimleri %35 arttı (JavaScriptCore)
• div.classList, div.dataset ve div.attributes performansı 10,9 kata kadar (V8) iyileştirildi
• div.firstElementChild, lastElementChild, previousElementSibling ve nextElementSibling performansı 7,1 kat arttı (V8)
• V8 DOM özelliklerine erişimi 4 ~%5 oranında iyileştirildi (V8)

Aşağıda, Kentaro Hara yaptığı bazı yamalarla ilgili ayrıntılı bilgi veriyor. Bağlantılar, test senaryoları olan WebKit hatalarına aittir. Böylece, testleri kendiniz deneyebilirsiniz. WebKit r109829 ile r111133 arasında değişiklikler yapılmıştır: Chrome 17 bu değişiklikleri içermez, Chrome 19 içerir.

div.innerHTML ve div.outerHTML performansını 2,4 kat artırın (V8, JavaScriptCore)

WebKit'te önceki davranış:

• Her etiket için bir dize oluşturun.
• Oluşturulan bir dizeyi Vector<string> öğesine DOM ağacını ayrıştırarak ekleyin.
• Ayrıştırma işleminden sonra, boyutu Vector<string> içindeki tüm dizelerin toplamı olan bir dize ayırın.
• Vector<string> içindeki tüm dizeleri birleştirin ve innerHTML olarak döndürün.

WebKit'teki yeni davranış: 1. Bir dize ayırın, örneğin S. 1. DOM ağacını kademeli olarak ayrıştırarak her etiket için bir dizeyi S ile birleştirin. 1. S, innerHTML olarak iade edilsin.

Özetle, çok sayıda dize oluşturup bunları birleştirmek yerine, yama bir dize oluşturur ve daha sonra dizeleri artımlı olarak ekler.

Chromium/Mac'te div.innerText ve div.outerText performansını 4x iyileştirme (V8/Mac)

Yama, innerText oluşturmak için başlangıç arabellek boyutunu değiştirdi. 2^16 olan ilk arabellek boyutunu 2^15 olarak değiştirmek Chromium/Mac performansını 4 kat iyileştirdi. Bu fark, temeldeki alışveriş merkezi sistemine bağlıdır.

JavaScriptCore'daki CSS mülkü erişimlerinin performansını%35 oranında iyileştir

Not: Bu değişiklik Safari için yapılmıştır, Chrome için değildir.

CSS mülk dizesi (ör. .fontWeight, .backgroundColor), WebKit'te tam sayı kimliğine dönüştürülür. Bu dönüşüm ağır bir dönüşümdür. Yama, dönüşüm sonuçlarını bir haritayla önbelleğe alır (yani, mülk dizesi => bir tam sayı kimliği). Böylece, dönüşüm birden çok kez yürütülmez.

Testler nasıl yapılır?

Mülklere erişim süresini ölçer. innerHTML durumunda (bugs.webkit.org/show_bug.cgi?id=81214 konumundaki performans testi) test yalnızca aşağıdaki kodun çalıştırılacağı süreyi ölçer:

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

Performans testi, HTML spesifikasyonundan kopyalanmış büyük bir gövde kullanır.

Benzer şekilde, CSS mülk erişimi testi aşağıdaki kodun zamanını ölçer:

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

Neyse ki Kentaro Hara, diğer önemli DOM özellikleri ve yöntemlerinde performansın daha fazla iyileştirilebileceğine inanıyor.

Tarzınızı gösterin!

Haraken'i ve ekibin diğerlerini tebrik ederiz.

Not: Demo kaldırıldı