Pengauditan Prestasi: Alat Pemaju Firefox Deep Dive

Penjelasan terperinci mengenai Alat Pemaju Firefox (DevTools): Alat yang berkuasa untuk meningkatkan prestasi laman web

Artikel ini akan meneroka alat pemaju Firefox yang mendalam (DevTools), satu set alat yang direka untuk membantu pemaju menyemak, debug, menganalisis dan mengoptimumkan prestasi laman web dan aplikasi web. Kami akan memberi tumpuan kepada alat yang berkaitan dengan prestasi, dan memperkenalkan pengenalan cara menggunakan devtools dan beberapa tetapan praktikal.

Cara mengakses DevTools:

• Klik pada menu hamburger di sebelah kanan bar alat navigasi, pilih "Pemaju Web", dan pilih sub-alat yang anda mahu gunakan.
• Gunakan pintasan papan kekunci seperti shift f5 (windows dan macOS), ctrl shift e (windows) atau opsyen cmd e (macOS) Buka rangkaian alat.
• Klik kanan di mana sahaja di halaman dan pilih Periksa Elemen.

mata utama

• Alat Pemaju Web Firefox (DevTools) menyediakan pelbagai alat untuk membantu pemaju menyemak, menyahpepijat, menganalisis dan mengoptimumkan prestasi laman web dan aplikasi web mereka, memberi tumpuan kepada masa beban dan prestasi runtime.
• Alat Monitor Rangkaian di DevTools boleh digunakan untuk menentukan masa yang diperlukan untuk penyemak imbas untuk memuat turun sumber yang berbeza dari laman web dan untuk mengetahui permintaan yang menyebabkan laman web dimuatkan perlahan atau blok.
• Alat prestasi DevTools membantu pemaju mengenal pasti kesesakan dan isu -isu prestasi dengan memberikan gambaran mengenai respons UI web dan prestasi kod JavaScript.
• Kod warna digunakan dalam carta dan bahagian DevTools untuk membantu pemaju dengan cepat menemui jenis operasi yang menyebabkan masalah dan menjejaki jenis operasi apabila beralih antara perspektif yang berbeza.
• DevTools Firefox menyokong memilih atau menyempitkan tempoh masa fail konfigurasi, yang membolehkan pemaju memberi tumpuan kepada kitaran aktiviti tertentu untuk analisis yang lebih terperinci.

Tetapan DevTools

Firefox Devtools mempunyai banyak pilihan untuk membantu pemaju menyesuaikan pengalaman mereka, seperti membolehkan cap waktu di konsol web, atau melumpuhkan caching HTTP (digunakan untuk mensimulasikan prestasi beban pertama semua halaman yang membuka Devtools).

Cara Mengakses Panel Tetapan DevTools:

Pertama buka devtools, kemudian:

Klik butang "Tetapan" dalam bar alat.
Tekan F1 untuk memaparkan panel Tetapan di bahagian atas mana -mana alat semasa.
Tekan
• Ctrl Shift O (Windows dan Linux) atau CMD Shift O (macOS) untuk memaparkan panel tetapan.

di sini, anda boleh memilih alat lalai, butang untuk dipaparkan di kotak alat, tema (gelap-cahaya-firebug), dan tetapan lanjutan yang lain.

Alat Berfokus Prestasi

Apabila menganalisis prestasi aplikasi web, perlu membezakan antara prestasi masa beban dan prestasi runtime.

Memuatkan masa prestasi Jawapan Soalan seperti "Sumber apa yang dimuatkan terlalu lama?" Apabila berurusan dengan prestasi runtime, kita perlu memberi tumpuan kepada JavaScript dan CSS (terutamanya animasi CSS) untuk melihat di mana kod itu menghabiskan sebahagian besar waktunya dan apa yang menyebabkan kesesakan.

Mari kita lihat monitor rangkaian dan alat prestasi.

Monitor Rangkaian

Monitor rangkaian memaparkan semua permintaan rangkaian yang dibuat oleh Firefox dalam bentuk tabular (mis., Memuatkan halaman atau menghantar XMLHTTPREQUESTS, mengambil permintaan API, dll.).

Ia juga boleh memaparkan tajuk HTTP, respons HTTP, dan kuki yang berkaitan dengan permintaan dan membolehkan anda mencari mereka. Anda juga boleh menggunakannya untuk melaksanakan, memaparkan, dan menyimpan analisis prestasi untuk beban halaman semasa.

Singkatnya, alat ini boleh digunakan untuk menentukan masa yang diperlukan untuk penyemak imbas untuk memuat turun sumber yang berbeza dari laman web.

Anda juga boleh menggunakan alat ini untuk memantau dan mencari permintaan yang menyebabkan laman web yang perlahan atau disekat untuk dimuatkan. Panel rangkaian menunjukkan apabila acara utama (domcontentloaded dan beban) dicetuskan.

Minta garis masa

Setiap permintaan dalam senarai rangkaian mengandungi lajur garis masa yang memaparkan maklumat masa yang berkaitan dengan permintaan, seperti jumlah masa apabila sumber dimuatkan.

DevTools menandakan peristiwa kitaran hayat utama dalam laporan, seperti domcontentloaded dan memuatkan halaman. Biru menunjukkan masa apabila peristiwa domcontentloaded dicetuskan;

DomContentLoaded dan Load Events

kebakaran acara domcontentloaded apabila dokumen HTML dimuatkan sepenuhnya dan dihuraikan, tidak termasuk gaya CSS, imej, dan kerangka CSS.

Muatkan kebakaran peristiwa apabila dokumen HTML dan semua stylesheets, imej, dan bingkai yang berkaitan sepenuhnya dimuatkan.

Panel Butiran Permintaan

Selepas mengklik pada senarai permintaan, anda dapat melihat anak panah butiran yang tepat dengan banyak tab yang berbeza seperti tajuk, parameter, respons, masa, dan keselamatan.

Untuk prestasi, kami akan memberi perhatian khusus kepada maklumat masa.

Masa Rangkaian

Di panel ini, terdapat banyak metrik masa yang berkaitan dengan setiap permintaan:

disekat adalah masa yang dihabiskan menunggu sambungan rangkaian berada dalam barisan.

penghantaran adalah masa yang diperlukan untuk menghantar permintaan ke pelayan.

Menerima adalah masa yang diperlukan untuk menerima respons dari pelayan, atau (jika cache) yang diperlukan untuk membacanya dari cache.

Menunggu adalah jumlah masa yang ditunggu oleh pelanggan sebelum menerima bait pertama. Dalam alat analisis prestasi lain seperti WebpageTest.org atau DevTools Chrome, ini dipanggil TTFB atau masa byte pertama.

Terdapat juga resolusi DNS, yang merupakan masa yang diperlukan untuk menyelesaikan nama hos pelayan, dan menyambung, yang merupakan masa yang diperlukan untuk membuka sambungan TCP.

bagaimana untuk menganalisis prestasi masa beban

Rangkaian Monitor mengintegrasikan alat analisis prestasi yang boleh digunakan untuk menganalisis prestasi masa beban laman web.

Untuk mula menganalisis prestasi masa beban, anda boleh:

• Klik ikon "Analisis" di bar status di bahagian bawah.
• Muat semula halaman atau mengeluarkan permintaan rangkaian apabila monitor rangkaian dihidupkan (sebenarnya, ini hanya akan memaparkan maklumat jadual mengenai permintaan tanpa analisis prestasi masa beban).

Laporan akhir menunjukkan carta pai dan jadual yang sepadan untuk sumber yang diterima mengikut jenis: JavaScript, CSS, imej dan fon, dan lain -lain, serta ringkasan yang mengandungi butiran berikut:

bilangan respons cache
jumlah permintaan
saiz
saiz pemindahan
Memuatkan masa

laman web diuji dengan cache kosong dan cache yang diisi.

Prestasi Memuat Pertama

DevTools Firefox membolehkan anda menganalisis prestasi aplikasi web anda dalam dua situasi yang berbeza:

Tiada cache, mensimulasikan keadaan di mana aset belum di -cache apabila akses pertama adalah akses pertama.

• Terdapat cache, mensimulasikan akses kedua. Penyemak imbas telah cache aset aplikasi, menghapuskan banyak perjalanan ke dan dari pelayan.
Anda juga boleh menggunakan tetapan cache disable untuk mensimulasikan pemuatan pertama laman web apabila DevTools dibuka pada mana -mana tab.

Prestasi dan respons JavaScript

JavaScript adalah satu berulir, yang bermaksud bahawa penyemak imbas menjalankan kod serentak, tetapi terima kasih kepada pekerja web HTML5 (API standard untuk JavaScript berbilang thread), anda boleh menjalankan kod dalam benang lain juga.

Benang tunggal ini bertanggungjawab untuk menjalankan semua kerja yang dilakukan oleh pelayar, seperti penyerahan susun atur, gaya pengiraan, dan koleksi sampah.

Di samping itu, peristiwa seperti setTimeout, klik dan beban, serta pengambilalihan sumber, dilaksanakan oleh satu benang. .

Prestasi dan responsif yang baik dikaitkan dengan model JavaScript yang tidak segerak, tetapi fungsi jangka panjang boleh membawa kepada prestasi yang buruk dan respons UI yang lemah.

Alat Prestasi

Alat prestasi membolehkan anda menemui kesesakan dan isu -isu prestasi di laman web dengan memberikan gambaran mengenai respons UI laman web (responsif kepada interaksi pengguna) dan prestasi kod JavaScript.

Menggunakan alat Prestasi, anda boleh mengawal butang Rakaman Mula dan Berhenti untuk memulakan analisis prestasi laman web yang dibuka sekarang untuk tempoh masa yang boleh anda kendalikan. Alat ini kemudian memaparkan ringkasan dan jadual dan pandangan grafik tindakan pelayar yang dilakukan untuk menjadikan halaman tersebut.

Anda boleh menggunakan alat prestasi untuk mencari dan mengesan coretan kod jangka panjang yang menyekat benang tunggal.

Cara Menggunakan Alat Prestasi

Langkah -langkah untuk menggunakan alat prestasi sangat mudah:

• Buka laman web anda, buka panel Prestasi, dan mulakan prestasi rakaman.
• tunggu beberapa saat, dan pastikan untuk berinteraksi dengan halaman anda semasa analisis dan kemudian berhenti rakaman.
• Cari fungsi atau peristiwa yang lama dan tumpuan (Magnify) tempoh FPS yang rendah.
• Apabila anda mencari sebarang aktiviti yang boleh disasarkan untuk pengoptimuman selanjutnya, anda boleh menggunakan sub-alat lain untuk mendapatkan maklumat terperinci mengenai tempat untuk mengambil tindakan.

Pastikan untuk mengikuti beberapa senario interaksi pengguna dan berinteraksi dengan bahagian -bahagian yang berlainan dari UI aplikasi semasa analisis, terutama bahagian yang anda ingin mengoptimumkan. Juga elakkan operasi tambahan yang tidak perlu: Sebagai contoh, jangan berinteraksi dengan bahagian yang anda tidak cuba untuk menganalisis, kerana mereka hanya menambah lebih banyak bunyi kepada hasil yang dilaporkan.

Pilih Julat Masa

DevTools Firefox menyokong memilih atau menyempitkan tempoh masa fail konfigurasi. Anda boleh mengklik pada bahagian carta garis masa atau FPS dan seret tetikus untuk memilih tempoh masa. Selepas berhenti menyeret, DevTools akan mengemas kini pandangan dan carta lain untuk memaparkan hanya maklumat acara yang berlaku dalam tempoh masa itu.

carta fps

Carta kadar bingkai memaparkan bilangan bingkai sesaat semasa rakaman. Apabila rakaman berjalan, carta ini bertindak sebagai meter FPS dengan nilai masa nyata.

Carta FPS memaparkan nilai maksimum FPS, minimum dan purata FPS untuk masa analisis. Semua nilai -nilai ini dapat dengan cepat memberitahu anda jika terdapat sebarang kesesakan prestasi.

Jika anda menjalankan sebarang animasi, FPS harus 60 fps . Tonton video ini untuk melihat mengapa nilai ini sangat penting:

Anda boleh menggunakan carta ini untuk segera menemui jurang visual (kemalangan) dan ketidakkonsistenan yang menunjukkan penurunan kadar bingkai yang teruk (menunjukkan kesesakan prestasi dalam penyemak imbas).

anda dapat melihat carta FPS dengan kemalangan dari tangkapan skrin ini:

gambar air terjun

Wikipedia menafsirkan gambarajah air terjun sebagai:

Bentuk visualisasi data membantu memahami kesan kumulatif nilai positif atau negatif yang diperkenalkan dalam urutan. Kerana penggantungan carta bar (batu bata) yang jelas di udara, carta air terjun juga dipanggil carta bata terbang atau carta Mario.

Sumber gambar

Dalam hal alat prestasi, gambarajah air terjun menunjukkan pecahan aktiviti pelayar yang sedang dilakukan dan peristiwa khusus penyemak imbas, seperti:

• susun atur susun atur atau susun atur (juga dikenali sebagai penyusunan semula)
• gaya
• permintaan bingkai animasi
• mengecat atau melukis piksel
• Koleksi Sampah, dan lain -lain

Operasi susun atur atau penyusunan semula dan pengiraan gaya mahal, jadi ini mungkin bidang pengoptimuman yang berpotensi. Sila rujuk artikel Google ini untuk maklumat lanjut.

Berikut adalah tangkapan skrin gambarajah air terjun aplikasi sampel:

Panggil Pandangan Pohon

Memanggil pandangan pokok menunjukkan fungsi JavaScript di mana pelayar membelanjakan sebahagian besar waktunya, serta metrik penting seperti jumlah masa aktiviti, masa sendiri dan peratusannya relatif terhadap jumlah masa analisis.

Masa yang dimiliki merujuk kepada masa yang dibelanjakan oleh operasi sahaja, tanpa mengira fungsi yang dipanggilnya.

Jumlah masa merujuk kepada masa yang dihabiskan untuk operasi dan fungsi yang mereka panggil.

Pokok panggilan memberitahu anda secara statistik apa fungsi (agregasi) pelayar menghabiskan sebahagian besar waktunya semasa rakaman.

JS Flame Map

Graf Flame memaparkan graf api dari stack panggilan JavaScript semasa analisis. Rajah Flame adalah jenis visualisasi prestasi yang dicipta oleh Brendan Gregg.

Peta api membolehkan pengenalpastian cepat dan tepat kebanyakan laluan kod hotspot.

carta bar yang disusun bermakna operasi teratas yang wujud secara langsung dalam CPU memanggil operasi bawah.

Anda boleh membaca lebih lanjut mengenai rajah api di sini.

Anda boleh menggunakan kadar bingkai dan graf api JavaScript, graf air terjun, dan paparan pohon panggil untuk mengetahui isu -isu prestasi dan mengetahui fungsi khusus yang perlu dioptimumkan.

Graf Flame menunjukkan keadaan timbunan panggilan untuk fungsi tertentu pada titik tertentu dalam masa yang direkodkan.

Graf Flame mengandungi banyak data, jadi untuk mendapatkan bacaan yang bermakna, anda perlu mengezum sehingga anda memilih beberapa milisaat.

Kod Warna

carta dan bahagian yang berbeza menggunakan warna yang sama untuk kod warna jenis operasi dan aset yang sama - JavaScript, CSS, rendering, lukisan, dll.

Anda boleh menggunakan warna untuk membezakan operasi dalam pandangan yang berbeza, dengan cepat menemui jenis operasi yang menyebabkan masalah, dan menjejaki jenis operasi apabila beralih antara sudut pandangan yang berbeza.

Anda boleh menyaring aktiviti individu yang ingin anda lihat dalam carta dan pandangan melalui menu ini, di mana anda juga dapat melihat warna yang berbeza yang berkaitan dengan tindakan yang berbeza.

Sebagai contoh, jika anda menggunakan animasi CSS, anda perlu memberi tumpuan kepada aktiviti seperti gaya pengiraan semula, menggunakan perubahan gaya, susun atur, dan lukisan. Anda boleh menyaring aktiviti lain untuk mengurangkan bunyi bising.

Untuk JavaScript, anda perlu memberi tumpuan kepada panggilan fungsi, parsing HTML, dan parsing XML.

Kesimpulan

Dalam artikel ini, kami telah belajar bagaimana untuk memulakan dengan Devtools Firefox dan cara menggunakan sub-alat yang berkaitan dengan prestasi yang berbeza. Devtools Firefox sangat komprehensif, dan dengan peningkatan prestasi Firefox baru -baru ini, ia lebih dapat mengenal pasti kawasan masalah sebenar semasa rendering laman web. Kami menggalakkan anda untuk meneroka lebih lanjut sendiri selepas anda mengenali istilah dan tahu apa yang perlu dicari.

Soalan Lazim (FAQ)

Apakah tujuan audit prestasi dalam alat pemaju Firefox?

Audit prestasi dalam alat pemaju Firefox direka untuk membantu pemaju memahami prestasi aplikasi web mereka dalam masa nyata. Ia memberikan pandangan tentang pelbagai metrik prestasi seperti masa beban, kelajuan rendering, dan pelaksanaan JavaScript. Dengan menganalisis metrik ini, pemaju dapat mengenal pasti kesesakan, mengoptimumkan kod, dan meningkatkan pengalaman pengguna secara keseluruhan.

Bagaimana untuk mengakses alat prestasi dalam edisi pemaju Firefox?

Untuk mengakses alat prestasi dalam edisi pemaju Firefox, anda perlu membuka panel Alat Pemaju. Anda boleh melakukan ini dengan mengklik kanan di mana sahaja di laman web dan memilih elemen semak. Kemudian, klik tab Prestasi. Di sini anda boleh memulakan rakaman baru untuk menganalisis prestasi aplikasi web anda.

Apakah perbezaan antara Edisi Pemaju Firefox dan pelayar Firefox biasa?

Edisi Pemaju Firefox adalah versi Firefox yang direka khusus untuk pemaju web. Ia mengandungi pelbagai alat dan ciri yang tidak terdapat dalam penyemak imbas Firefox biasa, seperti alat pengauditan prestasi maju, grid CSS, dan debuggers JavaScript. Alat ini boleh membantu pemaju membina, menguji dan menyahpepijat aplikasi web mereka dengan lebih cekap.

Bagaimana menggunakan Firefox's Pagespeed Insights Add-On?

PageSpeed ​​Insights Firefox Add-On menyediakan cara mudah untuk menganalisis prestasi laman web. Selepas memasang add-on, anda boleh mengaksesnya dari bar alat Firefox. Cukup masukkan URL halaman yang ingin anda analisis dan add-on akan memberikan laporan terperinci mengenai prestasinya, termasuk cadangan untuk penambahbaikan.

Apakah ARCHI FPS Meter Add-On untuk Firefox?

Add-on Meter Archi FPS Firefox adalah alat yang membolehkan anda mengukur kadar bingkai aplikasi web. Ini sangat berguna untuk mengenal pasti isu-isu prestasi, terutamanya dalam permainan atau animasi berasaskan web. Tambahnya memaparkan kadar bingkai semasa dalam bar alat Firefox, yang membolehkan anda memantau prestasi dalam masa nyata.

Bagaimana menggunakan ujian ujian halaman all-in-one Firefox?

Add-On Tespeed Test Firefox's All-in-One Firefox menyediakan analisis komprehensif prestasi laman web. Selepas memasang add-on, anda boleh mengaksesnya dari bar alat Firefox. Masukkan URL halaman yang ingin anda analisis dan tambahan akan memberikan laporan terperinci termasuk masa pemuatan, skor PagesPeed, dan cadangan penambahbaikan.

Bagaimana menggunakan alat pemaju Firefox untuk meningkatkan prestasi aplikasi web anda?

Alat pemaju Firefox menyediakan pelbagai cara untuk meningkatkan prestasi aplikasi web anda. Anda boleh menggunakan tab Prestasi untuk mengenal pasti kesesakan dalam kod anda, tab Rangkaian untuk menganalisis masa beban, dan debugger JavaScript untuk mengoptimumkan skrip. Di samping itu, penambahan PagesPeed Insights dapat memberikan cadangan khusus untuk penambahbaikan.

Bolehkah saya menggunakan alat pemaju Firefox untuk menganalisis prestasi aplikasi web mudah alih saya?

Ya, alat pemaju Firefox termasuk corak reka bentuk responsif yang membolehkan anda mensimulasikan saiz dan resolusi skrin yang berbeza. Ini sangat berguna untuk menganalisis prestasi aplikasi web mudah alih dan memastikan mereka memberikan pengalaman pengguna yang baik pada semua peranti.

Apakah masalah prestasi biasa yang boleh dikenalpasti menggunakan alat pemaju Firefox?

Isu prestasi biasa yang boleh dikenalpasti dengan alat pemaju Firefox termasuk masa pemuatan perlahan, kecekapan rendering yang rendah, dan pelaksanaan JavaScript yang berlebihan. Masalah ini boleh membawa kepada pengalaman pengguna yang lemah, jadi penting untuk mengenal pasti dan menyelesaikan isu -isu ini pada awal proses pembangunan.

Bagaimana untuk mengetahui lebih lanjut mengenai menggunakan alat pemaju Firefox untuk audit prestasi?

Terdapat banyak sumber untuk membantu anda mengetahui lebih lanjut mengenai menggunakan alat pemaju Firefox untuk audit prestasi. Rangkaian Pemaju Mozilla menyediakan dokumentasi yang komprehensif mengenai semua aspek alat, termasuk panduan dan tutorial terperinci. Di samping itu, terdapat banyak komuniti dan forum dalam talian di mana anda boleh bertanya dan berkongsi pengalaman anda dengan pemaju lain.

Atas ialah kandungan terperinci Pengauditan Prestasi: Alat Pemaju Firefox Deep Dive. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!