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

Sam Dutton

Bazı yaygın DOM işlemlerinin hızının arttığını görmekten çok memnunuz. WebKit düzeyinde yapılan değişiklikler hem Safari (JavaScriptCore) hem de Chrome (V8) için performansı artırdı.

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

DOM performansı artışları özeti

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

Kentaro Hara, aşağıda yaptığı bazı yamalar hakkında ayrıntılı bilgi veriyor. Bağlantılar, test durumları içeren WebKit hatalarına yönlendirir. Böylece testleri kendiniz deneyebilirsiniz. Değişiklikler WebKit r109829 ile r111133 arasında yapıldı: Chrome 17 bunları içermez, Chrome 19 içerir.

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

WebKit'teki önceki davranış:

• Her etiket için bir dize oluşturun.
• DOM ağacını ayrıştırarak oluşturulan bir dizeyi Vector<string> öğesine 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ştirip innerHTML olarak döndürür.

WebKit'teki yeni davranış: 1. S adında bir dize ayırın. 1. DOM ağacını kademeli olarak ayrıştırarak her etiket için bir dize S ile birleştirin. 1. S değerini innerHTML olarak döndürün.

Özetlemek gerekirse, yamalar çok sayıda dize oluşturup bunları birleştirmek yerine tek bir dize oluşturur ve ardından dizeleri artımlı olarak ekler.

Chromium/Mac'te div.innerText ve div.outerText performansını 4 kat artırın (V8/Mac)

Yama, innerText oluşturmak için kullanılan ilk arabellek boyutunu değiştirdi. İlk arabellek boyutunu 2^16'dan 2^15'e değiştirmek, Chromium/Mac performansını 4 kat artırdı. Bu fark, temel malloc sistemine bağlıdır.

JavaScriptCore'teki CSS mülk erişiminin performansını%35 artırma

Not: Bu, Chrome için değil Safari için yapılan bir değişikliktir.

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. Yama, dönüşümün birden çok kez gerçekleştirilmemesi için dönüşüm sonuçlarını bir haritayla (ör. mülk dizesi => tam sayı kimliği) önbelleğe alır.

Testler nasıl çalışır?

Mülk erişimlerinin zamanını ölçerler. innerHTML (bugs.webkit.org/show_bug.cgi?id=81214 adresindeki performans testi) durumunda, test yalnızca aşağıdaki kodun çalışma süresini ölçer:

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

Performans testinde, HTML spesifikasyonundan kopyalanan büyük bir gövde kullanılır.

Benzer şekilde, CSS mülk erişimleri testi aşağıdaki kodun süresini ölçer:

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

Kentaro Hara, diğer önemli DOM özellikleri ve yöntemleri için daha fazla performans iyileştirmesi yapılabileceğini belirtiyor.

Hadi bakalım.

Haraken ve ekibine teşekkürler.

Not: Demo kaldırıldı