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