Latihan 1: DOM Manipulation Efisien — Performance

Latihan 1 dari materi DOM Manipulation Efisien di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Lengkapi function batchUpdate(elements). Dia menerima array berisi object { value: angka }, menulis nilai baru ke tiap element.value (dikali 2 lalu ditambah 10), lalu mengembalikan elements. Ini meniru pola DOM "baca semua dulu, baru tulis semua", yang menghindari layout dihitung ulang di tiap elemen:

Fase baca: baca semua value dulu ke satu array, misalnya const values = elements.map((element) => element.value);.
Fase tulis: baru tulis semuanya: element.value = values[i] * 2 + 10 untuk tiap elemen. Jangan baca element.value lagi di fase ini.
Return elements. Jangan cuma console.log.

Yang dinilai:

batchUpdate([{ value: 5 }, { value: 10 }, { value: 3 }]) harus [{ value: 20 }, { value: 30 }, { value: 16 }]
urutan baca dan tulisnya: tester memberi dua elemen yang mencatat tiap baca (r0, r1) dan tiap tulis (w0, w1), dan catatannya harus r0,r1,w0,w1. Membaca lalu menulis bergantian per elemen (r0,w0,r1,w1) itulah yang bikin layout thrashing.
ada juga cek tersembunyi: batchUpdate([{ value: 0 }]) harus [{ value: 10 }]

Baris console.log(batchUpdate(...)) di kode awal biarkan saja.

Hint

Dua fase terpisah: semua baca dulu, baru semua tulis. Di DOM, setiap baca setelah tulis memaksa browser menghitung layout lagi.
Fase baca: const values = elements.map((element) => element.value). Fase tulis: ulangi elements dan isi tiap element.value dengan values[i] * 2 + 10, lalu return elements.
const values = elements.map((element) => element.value); lalu elements.forEach((element, i) => { element.value = values[i] * 2 + 10; }); return elements;

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: DOM Manipulation Efisien — Performance

Hint

Memperbarui Aplikasi