Peningkatan besar pada performa DOM - innerHTML WebKit 240% lebih cepat

Sam Dutton

Kami sangat senang melihat bahwa beberapa operasi DOM umum baru saja mengalami peningkatan kecepatan yang sangat pesat. Perubahan ini dilakukan di tingkat WebKit, yang meningkatkan performa untuk Safari (JavaScriptCore) dan Chrome (V8).

Engineer Chrome Kentaro Hara membuat tujuh pengoptimalan kode dalam WebKit; berikut adalah hasilnya, yang menunjukkan seberapa cepat akses DOM JavaScript:

Ringkasan peningkatan performa DOM

Di bawah ini, Kentaro Hara memberikan detail tentang beberapa patch yang dibuatnya. Link tersebut mengarah ke bug WebKit dengan kasus pengujian, sehingga Anda dapat mencoba pengujiannya sendiri. Perubahan ini dibuat antara WebKit r109829 dan r111133: Chrome 17 tidak menyertakannya; Chrome 19 menyertakannya.

Meningkatkan performa div.innerHTML dan div.outerHTML sebesar 2,4x (V8, JavaScriptCore)

Perilaku sebelumnya di WebKit:

  • Buat string untuk setiap tag.
  • Tambahkan string yang dibuat ke Vector<string>, yang mengurai hierarki DOM.
  • Setelah penguraian, alokasikan string yang ukurannya adalah jumlah semua string dalam Vector<string>.
  • Gabungkan semua string di Vector<string>, lalu tampilkan sebagai innerHTML.

Perilaku baru di WebKit: 1. Alokasikan satu string, misalnya S. 1. Gabungkan string untuk setiap tag ke S, yang mengurai hierarki DOM secara bertahap. 1. Tampilkan S sebagai innerHTML.

Singkatnya, alih-alih membuat banyak string, lalu menggabungkannya, patch membuat satu string, lalu menambahkan string secara bertahap.

Meningkatkan performa div.innerText dan div.outerText di Chromium/Mac sebesar 4x (V8/Mac)

Patch ini baru saja mengubah ukuran buffering awal untuk membuat innerText. Mengubah ukuran buffer awal dari 2^16 menjadi 2^15 meningkatkan performa Chromium/Mac sebesar 4x lipat. 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 meng-cache hasil konversi dalam peta (yaitu string properti => ID bilangan bulat), sehingga konversi tidak akan dilakukan beberapa kali.

Bagaimana cara kerja pengujian?

Metrik ini mengukur waktu akses properti. Untuk 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 isi besar 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 yakin bahwa lebih banyak peningkatan performa akan dapat dilakukan untuk atribut dan metode DOM penting lainnya.

Ayo!

Terima kasih kepada Haraken dan seluruh tim.