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

本文將深入探討Firefox開發(fā)者工具（DevTools），一套旨在幫助開發(fā)者檢查、調(diào)試、分析和優(yōu)化網(wǎng)站及Web應(yīng)用程序性能的工具集。我們將重點(diǎn)關(guān)注與性能相關(guān)的工具，同時介紹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)注加載時間和運(yùn)行時性能。
• DevTools中的網(wǎng)絡(luò)監(jiān)視器工具可用於確定瀏覽器下載網(wǎng)頁不同資源所需的時間，並找出導(dǎo)致網(wǎng)頁加載速度緩慢或阻塞的請求。
• DevTools的性能工具通過提供對網(wǎng)頁UI響應(yīng)能力和JavaScript代碼性能的洞察，幫助開發(fā)者發(fā)現(xiàn)瓶頸和性能問題。
• DevTools圖表和部分中使用顏色代碼，幫助開發(fā)者快速發(fā)現(xiàn)導(dǎo)致問題的操作類型，並在不同視角之間切換時跟蹤操作類型。
• Firefox的DevTools支持選擇或縮小配置文件的時間範(fàn)圍，使開發(fā)者能夠?qū)Ｗ㈧短囟ɑ顒舆L期以進(jìn)行更詳細(xì)的分析。

DevTools設(shè)置

Firefox DevTools擁有許多選項(xiàng)，可幫助開發(fā)者自定義其體驗(yàn)，例如在Web控制臺中啟用時間戳，或禁用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）和其他高級設(shè)置。

專注於性能的工具

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

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

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

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

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

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

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

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

請求時間線

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

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

DOMContentLoaded與Load事件

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

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

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

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

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

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

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

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

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

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

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

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

如何分析加載時間性能

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

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

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

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

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

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

首次加載性能

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

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

您還可以使用“禁用緩存”設(shè)置來模擬在任何選項(xiàng)卡上打開DevTools時網(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ū)動方法、事件循環(huán)和隊(duì)列來模擬的。）

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

性能工具

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

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

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

如何使用性能工具

使用性能工具的步驟非常簡單：

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

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

選擇時間範(fàn)圍

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

FPS圖表

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

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

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

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

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

瀑布圖

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

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

圖片源

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

• 佈局渲染或佈局元素（也稱為重排）
• 樣式
• 動畫幀請求
• 重繪或像素繪製
• 垃圾收集等

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

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

調(diào)用樹視圖

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

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

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

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

JS火焰圖

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

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

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

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

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

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

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

顏色代碼

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

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

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

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

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

結(jié)論

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

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

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

Firefox開發(fā)者工具中的性能審核旨在幫助開發(fā)者實(shí)時了解其Web應(yīng)用程序的性能。它提供對各種性能指標(biāo)的洞察，例如加載時間、渲染速度和JavaScript執(zhí)行情況。通過分析這些指標(biāo)，開發(fā)者可以識別瓶頸、優(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瀏覽器中沒有的一系列工具和功能，例如高級性能審核工具、CSS網(wǎng)格和JavaScript調(diào)試器。這些工具可以幫助開發(fā)者更有效地構(gòu)建、測試和調(diào)試其Web應(yīng)用程序。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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