Latihan 1: Performance Profiling — Debugging

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

Kode awal sudah punya array samples (enam sampel flame chart) dan sembilan baris console.log, biarkan. Lengkapi tiga function. Tiap sampel berbentuk { name, startMs, endMs, parent }; parent berisi name induknya, atau null untuk sampel paling atas.

buildCallTree(samples) mengembalikan array sampel paling atas (yang parent-nya null), masing-masing berbentuk { name, self, total, children }:
- total = endMs - startMs
- children = anak langsungnya (sampel yang parent-nya sama dengan name ini), dibentuk dengan cara yang sama
- self = total dikurangi jumlah total semua anak langsungnya
- self dan total dibulatkan dengan Math.round
longTasks(samples, threshold) mengembalikan array name dari sampel paling atas yang total-nya lebih dari threshold, diurutkan dari total terbesar.
fpsFromFrames(frameStarts) menerima array cap waktu frame dalam ms dan mengembalikan Math.round(1000 / rata-rata jarak antar frame). Kalau isinya kurang dari 2, kembalikan 0.

Yang dicek, satu per baris di console, urut: 2, task, 60, 5, 2, task, 63, 0, 10.

Ada juga cek dengan data lain: untuk sampel a (0 sampai 80 ms) dan b (80 sampai 100 ms), keduanya paling atas, longTasks dengan threshold 50 harus ["a"] dan dengan threshold 10 harus ["a", "b"]. fpsFromFrames([]) dan fpsFromFrames([5]) harus 0, dan fpsFromFrames([0, 20, 40, 60]) harus 50.

Hint

Total sebuah sampel adalah selisih endMs dan startMs; self adalah sisanya setelah total semua anak langsung dikurangkan. Long task cuma melihat sampel paling atas, dan FPS dihitung dari jarak antar cap waktu.
Bikin function build(sample) yang mencari anaknya dengan samples.filter(s => s.parent === sample.name).map(build), lalu jumlahkan total anak-anaknya. buildCallTree mengembalikan samples.filter(s => s.parent === null).map(build). Rata-rata jarak frame = (cap terakhir - cap pertama) / (banyak frame - 1).
function build(sample) { const children = samples.filter((s) => s.parent === sample.name).map(build); const total = sample.endMs - sample.startMs; const anak = children.reduce((sum, c) => sum + c.total, 0); return { name: sample.name, self: Math.round(total - anak), total: Math.round(total), children }; } return samples.filter((s) => s.parent === null).map(build); lalu longTasks: return samples.filter((s) => s.parent === null && s.endMs - s.startMs > threshold).sort((a, b) => (b.endMs - b.startMs) - (a.endMs - a.startMs)).map((s) => s.name); dan fpsFromFrames: if (frameStarts.length < 2) return 0; return Math.round(1000 / ((frameStarts[frameStarts.length - 1] - frameStarts[0]) / (frameStarts.length - 1)));

HyperSheets

Memperbarui Aplikasi

Versi baru tersedia. Halaman akan dimuat ulang otomatis...

Masih kosong setelah muat ulang?

Tutup paksa aplikasi lalu buka lagi
Hapus cache: Pengaturan > Aplikasi > Hyper Sheets > Hapus Cache
Jika pakai browser: tekan Ctrl+Shift+R

Butuh bantuan?

Gabung Discord Laporkan Bug