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
vediv.outerHTML
performansı 2,4 kat iyileştirildi (V8, JavaScriptCore)- Chromium/Mac'te
div.innerText
vediv.outerText
performansı 4 kat arttı (V8/Mac) - CSS mülk erişimleri %35 iyileştirildi (JavaScriptCore)
div.classList
,div.dataset
vediv.attributes
performansı 10,9 kata kadar iyileştirildi (V8)div.firstElementChild
,lastElementChild
,previousElementSibling
venextElementSibling
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ştiripinnerHTML
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
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.