Firefox開發(fā)者工具（DevTools）詳解：提升網(wǎng)站性能的利器

本文將深入探討Firefox開發(fā)者工具（DevTools），一套旨在幫助開發(fā)者檢查、調(diào)試、分析和優(yōu)化網(wǎng)站及Web應(yīng)用程序性能的工具集。我們將重點(diǎn)關(guān)注與性能相關(guān)的工具，同時(shí)介紹DevTools的入門使用方法和一些實(shí)用設(shè)置。

訪問DevTools的方法：

• 點(diǎn)擊導(dǎo)航工具欄右側(cè)的漢堡菜單，選擇“網(wǎng)頁開發(fā)者”，然后選擇您要使用的子工具。
• 使用鍵盤快捷鍵，例如Shift F5（Windows和macOS）打開性能工具，Ctrl Shift E（Windows）或Cmd Option E（macOS）打開網(wǎng)絡(luò)工具。
• 在頁面任意位置右鍵單擊，然后選擇“檢查元素”。

關(guān)鍵要點(diǎn)

• Firefox Web開發(fā)者工具(DevTools)提供一系列工具，幫助開發(fā)者檢查、調(diào)試、分析和優(yōu)化網(wǎng)站及Web應(yīng)用程序的性能，重點(diǎn)關(guān)注加載時(shí)間和運(yùn)行時(shí)性能。
• DevTools中的網(wǎng)絡(luò)監(jiān)視器工具可用于確定瀏覽器下載網(wǎng)頁不同資源所需的時(shí)間，并找出導(dǎo)致網(wǎng)頁加載速度緩慢或阻塞的請(qǐng)求。
• DevTools的性能工具通過提供對(duì)網(wǎng)頁UI響應(yīng)能力和JavaScript代碼性能的洞察，幫助開發(fā)者發(fā)現(xiàn)瓶頸和性能問題。
• DevTools圖表和部分中使用顏色代碼，幫助開發(fā)者快速發(fā)現(xiàn)導(dǎo)致問題的操作類型，并在不同視角之間切換時(shí)跟蹤操作類型。
• Firefox的DevTools支持選擇或縮小配置文件的時(shí)間范圍，使開發(fā)者能夠?qū)Ｗ⒂谔囟ɑ顒?dòng)周期以進(jìn)行更詳細(xì)的分析。

DevTools設(shè)置

Firefox DevTools擁有許多選項(xiàng)，可幫助開發(fā)者自定義其體驗(yàn)，例如在Web控制臺(tái)中啟用時(shí)間戳，或禁用HTTP緩存（用于模擬所有打開DevTools的頁面的首次加載性能）。

訪問DevTools設(shè)置面板的方法：

首先打開DevTools，然后：

• 點(diǎn)擊工具欄中的“設(shè)置”按鈕。
• 按F1在任何當(dāng)前工具的頂部顯示設(shè)置面板。
• 按Ctrl Shift O（Windows和Linux）或Cmd Shift O（macOS）顯示設(shè)置面板。

在這里，您可以選擇默認(rèn)工具、要在工具箱中顯示的按鈕、主題（深色-淺色-Firebug）和其他高級(jí)設(shè)置。

專注于性能的工具

分析Web應(yīng)用程序的性能時(shí)，需要區(qū)分加載時(shí)間性能和運(yùn)行時(shí)性能。

加載時(shí)間性能回答諸如“哪些資源加載時(shí)間過長(zhǎng)？”之類的問題。處理運(yùn)行時(shí)性能時(shí)，我們需要關(guān)注JavaScript和CSS（特別是CSS動(dòng)畫），以便查看代碼在哪里花費(fèi)了大部分時(shí)間以及什么導(dǎo)致了瓶頸。

讓我們看看網(wǎng)絡(luò)監(jiān)視器和性能工具。

網(wǎng)絡(luò)監(jiān)視器

網(wǎng)絡(luò)監(jiān)視器以表格形式顯示Firefox進(jìn)行的所有網(wǎng)絡(luò)請(qǐng)求（例如，加載頁面或發(fā)送XMLHttpRequests、Fetch API請(qǐng)求等）。

它還可以顯示與請(qǐng)求相關(guān)的HTTP標(biāo)頭、HTTP響應(yīng)和Cookie，并允許您搜索它們。您還可以使用它來執(zhí)行、顯示和保存當(dāng)前頁面加載的性能分析。

簡(jiǎn)而言之，此工具可用于確定瀏覽器下載網(wǎng)頁不同資源所需的時(shí)間。

您還可以使用此工具來監(jiān)視和找出導(dǎo)致網(wǎng)頁加載速度緩慢或阻塞的請(qǐng)求。網(wǎng)絡(luò)面板顯示何時(shí)觸發(fā)主要事件（DOMContentLoaded和load）。

請(qǐng)求時(shí)間線

網(wǎng)絡(luò)列表中的每個(gè)請(qǐng)求都包含一個(gè)時(shí)間線列，該列顯示與請(qǐng)求相關(guān)的計(jì)時(shí)信息，例如加載資源的總時(shí)間。

DevTools在報(bào)告中標(biāo)記主要生命周期事件，例如DOMContentLoaded和頁面加載。藍(lán)色表示觸發(fā)DOMContentLoaded事件的時(shí)間；紫色線表示頁面加載事件觸發(fā)的時(shí)間。

DOMContentLoaded與Load事件

DOMContentLoaded事件在HTML文檔完全加載和解析時(shí)觸發(fā)，不包括CSS樣式表、圖像和框架。

load事件在HTML文檔及其所有關(guān)聯(lián)的樣式表、圖像和框架完全加載時(shí)觸發(fā)。

請(qǐng)求詳細(xì)信息面板

單擊請(qǐng)求列表中的請(qǐng)求后，您可以看到一個(gè)右對(duì)接的詳細(xì)信息窗格，其中包含許多不同的選項(xiàng)卡，例如標(biāo)頭、參數(shù)、響應(yīng)、計(jì)時(shí)和安全性。

對(duì)于性能，我們將特別關(guān)注計(jì)時(shí)信息。

網(wǎng)絡(luò)計(jì)時(shí)

在此窗格中，有許多與每個(gè)請(qǐng)求相關(guān)的計(jì)時(shí)指標(biāo)：

Blocked是等待網(wǎng)絡(luò)連接在隊(duì)列中花費(fèi)的時(shí)間。

Sending是將請(qǐng)求發(fā)送到服務(wù)器所需的時(shí)間。

Receiving是從服務(wù)器接收響應(yīng)所需的時(shí)間，或者（如果已緩存）從緩存中讀取它所需的時(shí)間。

Waiting是客戶端在接收第一個(gè)字節(jié)之前等待的總時(shí)間。在其他性能分析工具（如WebPageTest.org或Chrome的DevTools）中，這稱為TTFB或第一個(gè)字節(jié)時(shí)間。

還有DNS解析，這是解析服務(wù)器主機(jī)名所需的時(shí)間，以及Connecting，這是打開TCP連接所需的時(shí)間。

如何分析加載時(shí)間性能

網(wǎng)絡(luò)監(jiān)視器集成了一個(gè)性能分析工具，可用于分析網(wǎng)頁的加載時(shí)間性能。

要開始分析加載時(shí)間性能，您可以：

• 點(diǎn)擊底部狀態(tài)欄中的“分析”圖標(biāo)。
• 在網(wǎng)絡(luò)監(jiān)視器打開時(shí)重新加載頁面或發(fā)出網(wǎng)絡(luò)請(qǐng)求（實(shí)際上，這只會(huì)顯示有關(guān)請(qǐng)求的表格信息，而不會(huì)進(jìn)行加載時(shí)間性能分析）。

最終報(bào)告顯示按類型接收的資源的餅圖和相應(yīng)的表格：JavaScript、CSS、圖像和字體等，以及包含以下詳細(xì)信息的摘要：

• 緩存響應(yīng)的數(shù)量
• 總請(qǐng)求數(shù)
• 大小
• 傳輸大小
• 加載時(shí)間

網(wǎng)頁使用空緩存和已填充緩存進(jìn)行測(cè)試。

首次加載性能

Firefox的DevTools允許您在兩種不同的情況下分析Web應(yīng)用程序的性能：

• 無緩存，模擬首次訪問時(shí)資產(chǎn)尚未緩存的情況。
• 有緩存，模擬第二次訪問。瀏覽器已緩存應(yīng)用程序的資產(chǎn)，消除了許多往返服務(wù)器的次數(shù)。

您還可以使用“禁用緩存”設(shè)置來模擬在任何選項(xiàng)卡上打開DevTools時(shí)網(wǎng)頁的首次加載。

JavaScript性能和響應(yīng)能力

JavaScript是單線程的，這意味著瀏覽器同步運(yùn)行代碼，但是由于HTML5 Web Workers（多線程JavaScript的標(biāo)準(zhǔn)API），您也可以在其他線程中運(yùn)行代碼。

此單線程負(fù)責(zé)運(yùn)行瀏覽器正在執(zhí)行的所有工作，例如布局渲染、計(jì)算樣式和垃圾收集。

此外，諸如setTimeout、click和load之類的事件以及資源獲取，都由單線程執(zhí)行。（確實(shí)，這些任務(wù)是異步執(zhí)行的，但是JavaScript中的異步性是不同的：它是通過使用事件驅(qū)動(dòng)方法、事件循環(huán)和隊(duì)列來模擬的。）

良好的性能和響應(yīng)能力歸功于JavaScript的異步模型，但是長(zhǎng)時(shí)間運(yùn)行的函數(shù)會(huì)導(dǎo)致性能不佳和UI響應(yīng)能力差。

性能工具

性能工具允許您通過提供對(duì)網(wǎng)頁UI響應(yīng)能力（響應(yīng)用戶交互）和JavaScript代碼性能的洞察，來發(fā)現(xiàn)網(wǎng)頁的瓶頸和性能問題。

使用性能工具，您可以控制開始和停止錄制按鈕，在您可以控制的一段時(shí)間內(nèi)開始對(duì)當(dāng)前打開的網(wǎng)頁進(jìn)行性能分析。然后，該工具將顯示摘要以及瀏覽器為渲染頁面而執(zhí)行的操作的表格視圖和圖形視圖。

您可以使用性能工具查找和檢測(cè)阻塞單線程的長(zhǎng)時(shí)間運(yùn)行的代碼段。

如何使用性能工具

使用性能工具的步驟非常簡(jiǎn)單：

• 打開您的網(wǎng)頁，打開性能面板，然后開始記錄性能。
• 等待幾秒鐘，還要確保在分析過程中與您的頁面進(jìn)行交互，然后停止錄制。
• 查找任何長(zhǎng)時(shí)間運(yùn)行的函數(shù)或事件，并關(guān)注（放大）FPS低的時(shí)段。
• 當(dāng)您找到可以針對(duì)進(jìn)一步優(yōu)化而定位的任何活動(dòng)時(shí)，您可以使用其他子工具來獲取有關(guān)采取行動(dòng)位置的詳細(xì)信息。

請(qǐng)務(wù)必遵循一些用戶交互場(chǎng)景，并在分析過程中與應(yīng)用程序UI的不同部分進(jìn)行交互，特別是您想要優(yōu)化的部分。還要避免不必要的額外操作：例如，不要與您不嘗試分析的部分進(jìn)行交互，因?yàn)樗鼈冎粫?huì)為報(bào)告的結(jié)果增加更多噪聲。

選擇時(shí)間范圍

Firefox的DevTools支持選擇或縮小配置文件的時(shí)間范圍。您可以單擊時(shí)間線或FPS圖表部分，然后拖動(dòng)鼠標(biāo)以選擇一段時(shí)間。停止拖動(dòng)后，DevTools將更新其他視圖和圖表，以僅顯示在該時(shí)間段內(nèi)發(fā)生的事件信息。

FPS圖表

幀速率圖表顯示錄制期間的每秒幀數(shù)。錄制運(yùn)行時(shí)，此圖表充當(dāng)具有實(shí)時(shí)值的FPS儀表。

FPS圖表顯示分析時(shí)間的FPS最大值、最小值和平均FPS值。所有這些值都可以快速告訴您是否存在任何性能瓶頸。

如果您正在運(yùn)行任何動(dòng)畫，則FPS應(yīng)為60 fps。觀看此視頻以了解此值為何如此重要：

您可以使用此圖表快速發(fā)現(xiàn)表示幀速率嚴(yán)重下降（表示瀏覽器存在性能瓶頸）的視覺間隙（崩潰）和不一致之處。

您可以從此屏幕截圖中看到具有崩潰的FPS圖表：

瀑布圖

維基百科將瀑布圖解釋為：

一種數(shù)據(jù)可視化形式，有助于理解順序引入的正值或負(fù)值的累積效應(yīng)。由于柱狀圖（磚塊）在空中明顯的懸掛，瀑布圖也稱為飛磚圖或馬里奧圖。

圖片源

在性能工具的情況下，瀑布圖顯示了瀏覽器正在執(zhí)行的活動(dòng)和瀏覽器特定事件的細(xì)分，例如：

• 布局渲染或布局元素（也稱為重排）
• 樣式
• 動(dòng)畫幀請(qǐng)求
• 重繪或像素繪制
• 垃圾收集等

布局操作或重排和樣式計(jì)算代價(jià)高昂，因此這些可能是優(yōu)化的潛在領(lǐng)域。請(qǐng)參閱此Google文章以了解更多詳細(xì)信息。

以下是示例應(yīng)用程序的瀑布圖屏幕截圖：

調(diào)用樹視圖

調(diào)用樹視圖顯示瀏覽器在其上花費(fèi)大部分時(shí)間的JavaScript函數(shù)，以及重要的度量，例如活動(dòng)的總時(shí)間、自有時(shí)間及其相對(duì)于總分析時(shí)間的百分比。

自有時(shí)間是指僅由操作花費(fèi)的時(shí)間，不考慮它調(diào)用的函數(shù)。

總時(shí)間是指操作及其調(diào)用的函數(shù)花費(fèi)的時(shí)間。

調(diào)用樹在統(tǒng)計(jì)上告訴您，在錄制過程中，瀏覽器在哪些函數(shù)（聚合）上花費(fèi)了大部分時(shí)間。

JS火焰圖

火焰圖在分析期間顯示JavaScript調(diào)用堆棧的火焰圖。火焰圖是由Brendan Gregg創(chuàng)建的一種性能可視化類型。

火焰圖使大多數(shù)熱點(diǎn)代碼路徑能夠快速準(zhǔn)確地識(shí)別。

堆疊的條形圖意味著直接存在于CPU中的頂部操作調(diào)用了底部操作。

您可以在此處閱讀有關(guān)火焰圖的更多信息。

您可以使用幀速率和JavaScript火焰圖、瀑布圖和調(diào)用樹視圖來找出性能問題所在，并找出需要優(yōu)化的特定函數(shù)。

火焰圖顯示了在錄制的特定時(shí)間點(diǎn)特定函數(shù)的調(diào)用堆棧的狀態(tài)。

火焰圖包含大量數(shù)據(jù)，因此要獲得有意義的讀數(shù)，您需要放大直到選擇幾毫秒。

顏色代碼

不同的圖表和部分使用相同的顏色對(duì)相同類型的操作和資產(chǎn)進(jìn)行顏色編碼——JavaScript、CSS、渲染、繪制等。

您可以使用顏色來區(qū)分不同視圖中的操作，快速發(fā)現(xiàn)導(dǎo)致問題的操作類型，并在不同視角之間切換時(shí)跟蹤操作類型。

您可以通過此菜單過濾出您想要在圖表和視圖中看到的單個(gè)活動(dòng)，您還可以在其中看到與不同操作關(guān)聯(lián)的不同顏色。

例如，如果您使用CSS動(dòng)畫，則需要關(guān)注的是諸如重新計(jì)算樣式、應(yīng)用樣式更改、布局和繪制之類的活動(dòng)。您可以過濾掉其他活動(dòng)以減少噪聲。

對(duì)于JavaScript，您需要關(guān)注函數(shù)調(diào)用、解析HTML和解析XML。

結(jié)論

在本文中，我們已經(jīng)了解了如何開始使用Firefox的DevTools以及如何使用不同的與性能相關(guān)的子工具。Firefox的DevTools非常全面，并且隨著Firefox最近的性能升級(jí)，它更能夠準(zhǔn)確地識(shí)別網(wǎng)站渲染過程中的真正問題區(qū)域。我們鼓勵(lì)您在熟悉了術(shù)語并知道要尋找什么之后，自己進(jìn)一步探索。

關(guān)于使用Firefox開發(fā)者工具進(jìn)行性能審核的常見問題解答 (FAQ)

Firefox開發(fā)者工具中性能審核的目的是什么？

Firefox開發(fā)者工具中的性能審核旨在幫助開發(fā)者實(shí)時(shí)了解其Web應(yīng)用程序的性能。它提供對(duì)各種性能指標(biāo)的洞察，例如加載時(shí)間、渲染速度和JavaScript執(zhí)行情況。通過分析這些指標(biāo)，開發(fā)者可以識(shí)別瓶頸、優(yōu)化代碼并改善整體用戶體驗(yàn)。

如何在Firefox開發(fā)者版中訪問性能工具？

要在Firefox開發(fā)者版中訪問性能工具，您需要打開開發(fā)者工具面板。您可以通過右鍵單擊網(wǎng)頁上的任意位置并選擇“檢查元素”來執(zhí)行此操作。然后，單擊“性能”選項(xiàng)卡。在這里，您可以開始新的錄制以分析Web應(yīng)用程序的性能。

Firefox開發(fā)者版和常規(guī)Firefox瀏覽器有什么區(qū)別？

Firefox開發(fā)者版是專門為Web開發(fā)者設(shè)計(jì)的Firefox版本。它包含常規(guī)Firefox瀏覽器中沒有的一系列工具和功能，例如高級(jí)性能審核工具、CSS網(wǎng)格和JavaScript調(diào)試器。這些工具可以幫助開發(fā)者更有效地構(gòu)建、測(cè)試和調(diào)試其Web應(yīng)用程序。

如何使用Firefox的PageSpeed Insights附加組件？

Firefox的PageSpeed Insights附加組件提供了一種簡(jiǎn)單的方法來分析網(wǎng)頁的性能。安裝附加組件后，您可以從Firefox工具欄訪問它。只需輸入您要分析的網(wǎng)頁的URL，附加組件將提供其性能的詳細(xì)報(bào)告，包括改進(jìn)建議。

Firefox的Archi FPS Meter附加組件是什么？

Firefox的Archi FPS Meter附加組件是一個(gè)允許您測(cè)量Web應(yīng)用程序幀速率的工具。這對(duì)于識(shí)別性能問題非常有用，尤其是在基于Web的游戲或動(dòng)畫中。附加組件在Firefox工具欄中顯示當(dāng)前幀速率，允許您實(shí)時(shí)監(jiān)視性能。

如何使用Firefox的All-in-One PageSpeed Test附加組件？

Firefox的All-in-One PageSpeed Test附加組件提供對(duì)網(wǎng)頁性能的全面分析。安裝附加組件后，您可以從Firefox工具欄訪問它。輸入您要分析的網(wǎng)頁的URL，附加組件將提供詳細(xì)報(bào)告，包括加載時(shí)間、PageSpeed分?jǐn)?shù)和改進(jìn)建議。

如何使用Firefox開發(fā)者工具來提高Web應(yīng)用程序的性能？

Firefox開發(fā)者工具提供了多種方法來提高Web應(yīng)用程序的性能。您可以使用“性能”選項(xiàng)卡來識(shí)別代碼中的瓶頸，“網(wǎng)絡(luò)”選項(xiàng)卡來分析加載時(shí)間，以及JavaScript調(diào)試器來優(yōu)化腳本。此外，PageSpeed Insights附加組件可以提供具體的改進(jìn)建議。

我可以使用Firefox開發(fā)者工具來分析移動(dòng)Web應(yīng)用程序的性能嗎？

是的，F(xiàn)irefox開發(fā)者工具包括響應(yīng)式設(shè)計(jì)模式，允許您模擬不同的屏幕尺寸和分辨率。這對(duì)于分析移動(dòng)Web應(yīng)用程序的性能并確保它們?cè)谒性O(shè)備上提供良好的用戶體驗(yàn)非常有用。

使用Firefox開發(fā)者工具可以識(shí)別哪些常見的性能問題？

使用Firefox開發(fā)者工具可以識(shí)別到的常見性能問題包括加載時(shí)間慢、渲染效率低和JavaScript執(zhí)行過多。這些問題會(huì)導(dǎo)致糟糕的用戶體驗(yàn)，因此在開發(fā)過程的早期識(shí)別和解決這些問題非常重要。

如何學(xué)習(xí)更多關(guān)于使用Firefox開發(fā)者工具進(jìn)行性能審核的信息？

有很多資源可以幫助您學(xué)習(xí)更多關(guān)于使用Firefox開發(fā)者工具進(jìn)行性能審核的信息。Mozilla開發(fā)者網(wǎng)絡(luò)提供了關(guān)于工具各個(gè)方面的全面文檔，包括詳細(xì)的指南和教程。此外，還有許多在線社區(qū)和論壇，您可以在那里向其他開發(fā)者提問和分享您的經(jīng)驗(yàn)。

以上是性能審核：Firefox開發(fā)人員工具深入潛水的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！