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

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

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 sebagai innerHTML.

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.