Panel Linimasa DevTools selalu menjadi tempat pertama yang terbaik di jalur pengoptimalan performa. Ringkasan terpusat tentang aktivitas aplikasi ini membantu Anda menganalisis waktu yang dihabiskan untuk pemuatan, pembuatan skrip, rendering, dan proses menggambar. Baru-baru ini, kami telah mengupgrade Linimasa dengan lebih banyak instrumentasi sehingga Anda dapat melihat tampilan performa aplikasi yang lebih mendalam.
Kami telah menambahkan fitur berikut:
- Profiler JavaScript terintegrasi. (Termasuk flame chart!)
- frame viewer untuk membantu Anda memvisualisasikan lapisan gabungan.
- profiler gambar untuk melihat perincian aktivitas gambar browser.
Perhatikan bahwa penggunaan opsi pengambilan Paint yang dijelaskan dalam artikel ini akan menimbulkan beberapa overhead performa, jadi aktifkan hanya jika Anda menginginkannya.
Profiler JavaScript Terintegrasi
Jika pernah melihat-lihat panel Profil, Anda mungkin sudah terbiasa dengan profiler CPU JavaScript. Alat ini mengukur tempat waktu eksekusi dihabiskan di fungsi JavaScript Anda. Dengan melihat profil JavaScript dengan Flame Chart, Anda dapat memvisualisasikan pemrosesan JavaScript dari waktu ke waktu.
Sekarang, Anda bisa mendapatkan perincian terperinci tentang eksekusi JavaScript di panel Linimasa. Dengan memilih opsi perekaman JS Profiler, Anda dapat melihat stack panggilan JavaScript di Linimasa bersama dengan peristiwa browser lainnya. Menambahkan fitur ini ke Linimasa akan membantu menyederhanakan alur kerja proses debug Anda. Namun, lebih dari itu, alat ini memungkinkan Anda melihat JavaScript dalam konteks dan mengidentifikasi bagian kode yang memengaruhi waktu pemuatan dan rendering halaman.
Selain profiler JavaScript, kami juga mengintegrasikan tampilan Flame Chart ke panel Linimasa. Anda kini dapat melihat aktivitas aplikasi sebagai waterfall peristiwa klasik atau sebagai Diagram Api. Ikon Diagram Api memungkinkan Anda beralih antara kedua tampilan ini.
Frame Viewer
Seni komposisi lapisan adalah aspek lain dari browser yang sebagian besar disembunyikan dari developer. Jika digunakan seperlunya dan dengan hati-hati, lapisan dapat membantu menghindari proses repaint yang mahal dan menghasilkan peningkatan performa yang besar. Namun, sering kali sulit untuk memprediksi cara browser menyusun konten Anda. Dengan menggunakan opsi perekaman Paint baru di Linimasa, Anda dapat memvisualisasikan lapisan gabungan di setiap frame rekaman.
Saat Anda memilih panel frame abu-abu di atas Main Thread, panel Layers-nya akan memberikan model visual lapisan yang menyusun aplikasi Anda.
Anda dapat memperbesar, memutar, dan menarik model lapisan untuk menjelajahi kontennya. Mengarahkan kursor ke lapisan akan menampilkan posisinya saat ini di halaman. Dengan mengklik kanan lapisan, Anda dapat langsung membuka node yang sesuai di panel Elements. Fitur ini menunjukkan apa yang dipromosikan ke lapisan. Jika memilih lapisan, Anda juga dapat melihat alasan lapisan dipromosikan di baris berlabel Alasan Komposisi.
Paint Profiler
Terakhir, kami telah menambahkan profiler cat untuk membantu Anda mengidentifikasi jank yang disebabkan oleh cat yang mahal. Fitur ini memperkaya Linimasa dengan detail selengkapnya tentang pekerjaan yang dilakukan Chrome selama peristiwa gambar.
Sebagai permulaan, kini lebih mudah untuk mengidentifikasi konten visual yang sesuai dengan setiap peristiwa gambar. Saat Anda memilih peristiwa cat hijau di Linimasa, panel Detail akan menampilkan pratinjau piksel sebenarnya yang dicat.
Jika Anda benar-benar ingin mempelajarinya, beralihlah ke panel Paint Profiler. Profiler ini menampilkan perintah gambar yang tepat yang dieksekusi browser untuk cat yang dipilih. Untuk membantu Anda menghubungkan perintah native ini dengan konten sebenarnya di aplikasi, Anda dapat mengklik kanan panggilan draw* dan langsung membuka node yang sesuai di panel Elements.
Linimasa mini di bagian atas panel memungkinkan Anda memutar proses gambar dan mendapatkan gambaran tentang operasi mana yang mahal untuk dilakukan browser. Operasi gambar diberi kode warna sebagai berikut: merah muda (bentuk), biru (bitmap), hijau (teks), dan ungu (lain-lain). Tinggi batang menunjukkan durasi panggilan, sehingga menyelidiki batang yang tinggi dapat membantu Anda memahami apa yang menyebabkan biaya tinggi untuk cat tertentu.
Profil dan keuntungan!
Dalam hal pengoptimalan performa, pengetahuan tentang browser dapat sangat bermanfaat. Dengan memberi Anda gambaran tentang bagian dalamnya, pembaruan Linimasa ini membantu memperjelas hubungan antara kode Anda dan proses rendering Chrome. Coba opsi baru ini di Linimasa dan lihat apa yang dapat dilakukan Chrome DevTools untuk meningkatkan alur kerja perburuan jank Anda.