Hallo! Saya ulangi, Kayce, penulis teknologi untuk DevTools. Untuk DevTools Digest ini, saya pikir saya akan mengubahnya sedikit dan melakukan rangkuman dari beberapa peningkatan peralatan kinerja di DevTools selama beberapa rilis Chrome terakhir.
Semua fitur sudah ada di Chrome Stabil kecuali jika dinyatakan lain.
Throttling CPU untuk dunia yang mengutamakan perangkat seluler
Tersedia di Chrome 54, yang saat ini disebut Canary.
Perangkat lunak memakan dunia, dan seluler menghabiskan perangkat lunak. DevTools terus berkembang untuk memenuhi kebutuhan dunia pengembangan yang mengutamakan seluler dengan lebih baik. Pengembangan terbaru pada fitur berbasis seluler DevTools adalah Throttling CPU. Gunakan fitur ini untuk mendapatkan awareness yang lebih baik tentang performa situs Anda pada perangkat dengan resource yang terbatas.
Pilih salah satu opsi dari menu dropdown CPU Throttling di panel Timeline untuk membatasi daya komputasi mesin pengembangan Anda.
Beberapa catatan tentang throttling CPU:
- Throttling akan langsung berlaku dan berlanjut hingga Anda menonaktifkannya, seperti throttling jaringan.
- Fitur ini ditujukan untuk memberikan pemahaman umum tentang kemungkinan performa situs Anda jika perangkat yang memiliki resource terbatas. DevTools tidak mungkin benar-benar mengemulasi karakteristik performa sistem seluler pada chip.
- Throttling relatif terhadap mesin pengembangan Anda. Dengan kata lain, throttling 5x pada desktop top-of-the-line akan memberikan hasil yang berbeda dari throttling 5x pada laptop anggaran berusia lima tahun.
Dengan demikian, gabungkan Throttling CPU dengan Throttling Jaringan dan Mode Perangkat, lalu Anda akan mulai mendapatkan gambaran yang jauh lebih baik tentang tampilan dan performa situs Anda di perangkat seluler, langsung dari kemudahan browser mesin pengembangan Anda.
Tampilan jaringan dalam rekaman linimasa
Aktifkan kotak centang Jaringan saat Anda melakukan perekaman Linimasa lagi untuk menganalisis cara halaman Anda mendownload resource-nya. Klik resource untuk melihat informasi selengkapnya tentang resource tersebut di panel Summary.
Kolom Inisiator dalam ringkasan sangat berguna. Kolom ini memberi tahu Anda tempat resource diminta.
Pemroses peristiwa pasif
Pemroses peristiwa pasif adalah standar yang sedang berkembang untuk meningkatkan performa scroll. Baca artikel ini oleh Anda untuk mempelajari lebih lanjut:
Meningkatkan performa scroll dengan pemroses peristiwa pasif
DevTools telah mengirimkan beberapa fitur untuk membantu Anda menemukan pemroses yang bisa mendapatkan manfaat dari sedikit cinta {passive: true}.
Pertama, Konsol akan memberikan peringatan saat pemroses sinkron memblokir scroll halaman selama waktu yang tidak wajar.
Anda dapat mengujinya sendiri dalam demo di bawah:
Jank scroll karena demo pengendali sentuh/roda
Selanjutnya, Anda dapat menggunakan menu dropdown kecil di panel Pemroses Peristiwa untuk memfilter pemroses pasif atau pemblokiran.
Terakhir, Anda dapat mengalihkan status pasif atau pemblokiran pemroses dengan mengarahkan kursor ke atasnya dan menekan Aktifkan/Nonaktifkan Pasif. Saat ini fitur ini terbatas untuk pemroses peristiwa touchstart, touchmove, mousewheel, dan wheel.
Saya akan mengakhiri bagian ini dengan sedikit tips. Aktifkan kotak centang Scrolling Performance Issues di panel samping Rendering untuk mendapatkan representasi visual dari potensi masalah scroll. Jika bagian halaman ditandai, artinya ada pemroses yang terikat ke bagian halaman tersebut yang mungkin berdampak negatif terhadap performa scroll.
Kelompokkan menurut aktivitas
Pada pertengahan Juni lalu, panel Call Tree di panel Linimasa mendapatkan kategori pengurutan baru: Kelompokkan menurut Aktivitas. Pengelompokan ini memungkinkan Anda melihat berapa banyak waktu yang dihabiskan halaman Anda untuk mengurai HTML, mengevaluasi skrip, menggambar, dan sebagainya.
Statistik linimasa di panel sumber
Buat rekaman Linimasa dengan opsi JS Profile yang diaktifkan, dan Anda dapat melihat perincian fungsi demi fungsi dari waktu eksekusi di panel Sumber.
Bagikan perspektif Anda
Seperti biasa, kami ingin mendengar masukan atau ide Anda tentang apa pun yang terkait dengan DevTools.
- Ping kami di ChromeDevTools di Twitter untuk pertanyaan singkat atau masukan, atau untuk membagikan ide baru.
- Untuk diskusi yang lebih lama, sebaiknya gunakan milis atau Stack Overflow.
- Untuk dokumen apa pun yang terkait, buka masalah di repo dokumen kami.
Sampai bulan depan!