Kami sangat senang melihat bahwa beberapa operasi DOM umum baru saja meningkat pesat. Perubahan ada di tingkat WebKit, yang meningkatkan performa untuk Safari (JavaScriptCore) dan Chrome (V8).
Engineer Chrome Kentaro Hara membuat tujuh pengoptimalan kode dalam WebKit; di bawah ini adalah hasilnya, yang menunjukkan seberapa cepat akses DOM JavaScript menjadi:
Ringkasan peningkatan performa DOM
- Performa
div.innerHTML
dandiv.outerHTML
meningkat 2,4x (V8, JavaScriptCore) - Performa
div.innerText
dandiv.outerText
di Chromium/Mac sebesar 4x (V8/Mac) - Akses properti CSS ditingkatkan sebesar 35% (JavaScriptCore)
- Performa
div.classList
,div.dataset
, dandiv.attributes
ditingkatkan hingga 10,9x (V8) - Performa
div.firstElementChild
,lastElementChild
,previousElementSibling
, dannextElementSibling
meningkat sebesar 7,1x (V8) - Akses atribut DOM V8 ditingkatkan sebesar 4 ~ 5% (V8)
Di bawahnya, Kentaro Hara memberikan detail tentang beberapa patch yang dia buat. Tautan tersebut mengarah ke bug WebKit dengan kasus pengujian, sehingga Anda dapat mencoba sendiri pengujiannya. Perubahan dibuat antara WebKit r109829 dan r111133: Chrome 17 tidak menyertakannya; Chrome 19 menyertakan.
Meningkatkan performa div.innerHTML
dan div.outerHTML
sebesar 2,4x (V8, JavaScriptCore)
Perilaku sebelumnya di WebKit:
- Buat string untuk setiap tag.
- Menambahkan string yang dibuat ke
Vector<string>
, dengan mengurai hierarki DOM. - Setelah penguraian, alokasikan string yang ukurannya adalah jumlah semua string dalam
Vector<string>
. - Gabungkan semua string di
Vector<string>
, dan tampilkan sebagaiinnerHTML
.
Perilaku baru di WebKit:
1. Alokasikan satu string, misalnya S.
1. Gabungkan string untuk setiap tag ke S, yang secara bertahap mengurai hierarki DOM.
1. Tampilkan S sebagai innerHTML
.
Singkatnya, bukan membuat banyak string lalu menggabungkannya, patch akan membuat satu string, lalu menambahkan string secara bertahap.
Meningkatkan performa div.innerText
dan div.outerText
di Chromium/Mac sebesar 4x (V8/Mac)
Patch baru saja mengubah ukuran buffer awal untuk membuat innerText
. Mengubah ukuran buffer awal dari 2^16 menjadi 2^15 meningkatkan performa Chromium/Mac sebesar 4x. Perbedaan ini bergantung pada sistem malloc yang mendasarinya.
Meningkatkan performa akses properti CSS di JavaScriptCore sebesar 35%
String properti CSS (misalnya, .fontWeight
, .backgroundColor
) dikonversi menjadi ID bilangan bulat di WebKit. Konversi ini berat. Patch menyimpan hasil konversi dalam cache di peta (yaitu string properti => ID bilangan bulat), sehingga konversi tidak akan dilakukan beberapa kali.
Bagaimana cara kerja pengujian?
Fungsi tersebut mengukur waktu akses properti. Dalam kasus innerHTML
(pengujian performa di bugs.webkit.org/show_bug.cgi?id=81214), pengujian hanya mengukur waktu untuk menjalankan kode berikut:
for (var i = 0; i < 1000000; i++)
document.body.innerHTML;
Pengujian performa menggunakan bagian utama yang disalin dari spesifikasi HTML.
Demikian pula, pengujian akses properti CSS mengukur waktu kode berikut:
var spanStyle = span.style;
for (var i = 0; i < 1000000; i++) {
spanStyle.invalidFontWeight;
spanStyle.invalidColor;
spanStyle.invalidBackgroundColor;
spanStyle.invalidDisplay;
}
Kabar baiknya adalah Kentaro Hara percaya bahwa peningkatan performa yang lebih besar akan dimungkinkan untuk atribut dan metode DOM penting lainnya.
Lakukan saja!
Pujian untuk Haraken dan seluruh tim.