- Untuk memvisualisasikan proses kompilasi JavaScript·WebAssembly di engine SpiderMonkey, alat internal dirombak total dan ditambahkan kemampuan menghasilkan grafik interaktif
- iongraph berbasis Graphviz yang lama memiliki tata letak yang tidak stabil dan struktur yang kurang intuitif, sehingga efisiensi debugging rendah; untuk menggantikannya, tim merancang sendiri algoritme tata letak baru
- Algoritme baru ini menyederhanakan metode Sugiyama untuk menampilkan struktur loop dengan jelas, serta mewujudkan tata letak yang stabil dan cepat dalam kurang dari 1000 baris kode JavaScript
- Grafik menggunakan edge lurus bergaya diagram rel kereta untuk meningkatkan keterbacaan, dan mencapai kecepatan rendering ribuan kali lebih cepat dibanding Graphviz
- Alat ini telah terintegrasi ke Firefox Profiler, dan ada rencana pengembangan fitur lanjutan seperti pencarian dan visualisasi register
Perombakan alat visualisasi SpiderMonkey
- Alat baru dibangun untuk memvisualisasikan graf internal yang dihasilkan oleh kompiler optimasi Ion di SpiderMonkey
- Pengguna dapat memasukkan kode JavaScript di halaman web dan menjelajahi proses optimasi fungsi dalam bentuk grafik secara real-time
- Grafik dapat diperiksa perubahan per tahap melalui drag, zoom, dan slider
- iongraph berbasis Graphviz sebelumnya menghasilkan output PDF, tetapi tidak selaras dengan struktur kode sumber dan ketidakstabilan outputnya sangat serius
- Perubahan kecil pada kode pun bisa mengubah posisi node secara drastis, sehingga sulit membandingkan antar-pass
- Struktur loop dan conditional terdistorsi secara visual, sehingga alur kontrol sulit dipahami
Batasan Graphviz dan pendekatan baru
- Algoritme Sugiyama di Graphviz cocok untuk optimasi graf umum, tetapi tidak mencerminkan karakteristik control-flow graph (CFG)
- Loop di JavaScript·WebAssembly hanya memiliki satu titik masuk dan memiliki alur kontrol reducible
- Tim SpiderMonkey memanfaatkan batasan ini untuk merancang algoritme khusus yang disederhanakan
- Penghapusan siklus: mengabaikan back edge loop
- Pelapisan (Leveling): menempatkan blok setelah loop lebih ke bawah agar mencerminkan alur kode
- Melewati minimisasi crossing: memprioritaskan stabilitas dengan mempertahankan urutan cabang true/false
- Mempertahankan struktur pohon loop: menampilkan loop bertingkat dengan jelas secara visual
- Hasilnya, tercapai tata letak yang ringkas, cepat, dan stabil, dengan implementasi awal sekitar 1000 baris JavaScript
Tahapan algoritme tata letak iongraph
- Tahap 1: Layering
- Mengurutkan blok per lapisan sambil mencerminkan hubungan internal dan eksternal loop
- Setelah loop berakhir, blok ditempatkan ke bawah sebesar tinggi keseluruhan loop
- Tahap 2: Pembuatan dummy node
- Menambahkan dummy node pada edge yang melintasi beberapa lapisan untuk mencegah benturan visual
- Edge yang menuju tujuan yang sama digabungkan untuk mengurangi noise visual
- Tahap 3: Perapian edge (Straighten)
- Menyelaraskan node parent dan child agar bentuk garis vertikal tetap terjaga, sambil menerapkan indentasi loop
- Dummy node juga ikut dalam proses perapian untuk mencegah tumpang tindih dan menjaga struktur
- Tahap 4: Pelacakan edge horizontal
- Edge horizontal diatur dalam unit track agar tidak saling tumpang tindih
- Dipisahkan ke atas dan bawah sesuai arah edge, dan edge yang bisa digabungkan disatukan
- Tahap 5: Penempatan vertikal (Verticalize)
- Memberikan koordinat Y pada tiap lapisan untuk tinggi yang seragam dan keterbacaan yang lebih baik
- Tahap 6: Rendering (Render)
- Menggunakan edge lurus bergaya diagram rel kereta
- Edge hanya berpotongan secara vertikal dan horizontal, sehingga arah dan strukturnya jelas
Efek dari algoritme yang sederhana
- Alih-alih optimasi yang rumit, penempatan berbasis aturan yang dapat diprediksi menghasilkan keterbacaan dan stabilitas
- Urutan node dipertahankan tetap, edge disederhanakan, sehingga konsistensi antar-pass terjaga
- Dengan menyingkirkan constraint solver, struktur yang lebih mudah dipahami manusia dapat diwujudkan
- Tata letak di dalam loop atau penempatan blok lanjutan ke bawah memungkinkan desain yang berpusat pada makna
- Peningkatan performa: graf fungsi zlib yang di Graphviz memerlukan 10 menit, kini dapat dirender dalam 20 milidetik
- Memberikan kecepatan ribuan kali lebih tinggi dan kemampuan eksplorasi yang lebih baik
Rencana ke depan
- iongraph telah selesai diintegrasikan ke Firefox Profiler, sehingga grafik dapat diperiksa saat analisis performa
- Saat ini hanya dapat digunakan di build shell SpiderMonkey, belum termasuk dalam build browser
- Usulan fitur ke depan
- Fitur navigasi lanjutan, pencarian, visualisasi alokasi register, dan lain-lain
- Belum ada roadmap yang jelas, dan kontribusi open source sangat disambut
- Untuk eksperimen lokal, setelah membuat
/tmp/ion.json dengan pengaturan IONFLAGS=logs,
file tersebut dapat dimuat di rilis mandiri
- Kode sumber tersedia di GitHub,
dan pengembang dapat dihubungi langsung melalui ruang obrolan Matrix
Belum ada komentar.