Ringkasan DevTools, September 2016 - Rangkuman Perf

Hallo! Ini Kayce lagi, penulis teknologi untuk DevTools. Untuk DevTools Digest ini, saya ingin sedikit mengubahnya dan membuat ringkasan beberapa peningkatan alat performa 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 adalah Canary.

Software menguasai dunia, dan perangkat seluler menguasai software. DevTools terus berkembang untuk memenuhi kebutuhan dunia pengembangan yang mengutamakan perangkat seluler dengan lebih baik. Pengembangan terbaru dalam alat mobile-first DevTools adalah CPU Throttling. Gunakan fitur ini untuk mendapatkan pemahaman yang lebih baik tentang performa situs Anda di perangkat dengan resource terbatas.

Pilih salah satu opsi dari menu dropdown CPU Throttling di panel Linimasa untuk membatasi daya komputasi mesin pengembangan Anda.

ALT_TEXT_HERE

Beberapa catatan tentang throttling CPU:

  • Throttling akan langsung diterapkan dan berlanjut hingga Anda menonaktifkannya, sama seperti throttling jaringan.
  • Fitur ini ditujukan untuk memberikan gambaran umum tentang performa situs Anda di perangkat dengan keterbatasan resource. DevTools tidak dapat benar-benar mengemulasi karakteristik performa sistem seluler di chip.
  • Pembatasan relatif terhadap mesin pengembangan Anda. Dengan kata lain, throttling 5x pada desktop kelas atas akan menghasilkan hasil yang berbeda dengan throttling 5x pada laptop murah berusia lima tahun.

Dengan demikian, gabungkan Throttling CPU dengan Throttling Jaringan dan Mode Perangkat, dan Anda akan mulai mendapatkan gambaran yang jauh lebih baik tentang tampilan dan performa situs Anda di perangkat seluler, langsung dari browser mesin pengembangan yang praktis.

Tampilan jaringan dalam rekaman linimasa

Aktifkan kotak centang Jaringan saat Anda merekam Linimasa lagi untuk menganalisis cara halaman Anda mendownload resource-nya. Klik resource untuk melihat informasi selengkapnya di panel Ringkasan.

Tampilan jaringan di Linimasa

Kolom Pemrakarsa dalam ringkasan sangat berguna. Kolom ini memberi tahu Anda tempat resource diminta.

Pemroses peristiwa pasif

Pemroses peristiwa pasif adalah standar yang baru muncul untuk meningkatkan performa scroll. Baca artikel ini dari kami untuk mempelajari lebih lanjut:

Meningkatkan performa scroll dengan pemroses peristiwa pasif

DevTools telah mengirimkan beberapa fitur untuk membantu Anda menemukan pemroses yang dapat memanfaatkan sedikit {passive: true}.

Pertama, Konsol akan menampilkan peringatan saat pemroses sinkron memblokir scroll halaman selama waktu yang tidak wajar.

Peringatan pemroses sinkron

Anda dapat mengujinya sendiri dalam demo di bawah:

Demo jank scroll karena pengendali sentuh/roda

Selanjutnya, Anda dapat menggunakan menu dropdown kecil di panel Pemroses Peristiwa untuk memfilter pemroses pasif atau pemroses yang memblokir.

Filter pemroses pasif

Terakhir, Anda dapat mengalihkan status pemroses pasif atau pemblokir dengan mengarahkan kursor ke pemroses dan menekan Alihkan Pasif. Fitur ini saat ini terbatas pada pemroses peristiwa touchstart, touchmove, mousewheel, dan wheel.

Tombol pasif

Saya akan mengakhiri bagian ini dengan sedikit tips. Centang kotak Scrolling Performance Issues di panel samping Rendering untuk mendapatkan representasi visual tentang potensi masalah scroll. Jika bagian halaman ditandai, berarti ada pemroses yang terikat ke bagian halaman tersebut yang dapat memengaruhi performa scroll secara negatif.

Demo masalah performa scroll

Kelompokkan menurut aktivitas

Pada pertengahan Juni, panel Hierarki Panggilan di panel Linimasa mendapatkan kategori pengurutan baru: Grup menurut Aktivitas. Pengelompokan ini memungkinkan Anda melihat berapa banyak waktu yang dihabiskan halaman untuk mengurai HTML, mengevaluasi skrip, menggambar, dan sebagainya.

Kelompokkan menurut aktivitas

Statistik linimasa di panel sumber

Buat rekaman Linimasa dengan opsi Profil JS diaktifkan, dan Anda dapat melihat perincian waktu eksekusi fungsi per fungsi di panel Sumber.

Statistik linimasa di panel Sumber

Bagikan perspektif Anda

Seperti biasa, kami ingin mendengar masukan atau ide Anda terkait apa pun yang terkait dengan DevTools.

  • Hubungi kami di ChromeDevTools di Twitter untuk pertanyaan atau masukan singkat, atau untuk membagikan ide baru.
  • Untuk diskusi yang lebih panjang, milis atau Stack Overflow adalah pilihan terbaik Anda.
  • Untuk masalah apa pun yang terkait dengan dokumen, buka masalah di repo dokumen kami.

Sampai bulan depan!