har文件分析http_如何使用HAR文件分析一段時間內的性能

har文件分析http

When I consider the performance of a website, several things come to mind. I think about looking at the requests of a page, understanding what resources are being loaded, and how long these resources take to be available to users.

當我考慮網站的性能時，會想到幾件事。我考慮查看頁面的請求，了解正在加載哪些資源以及這些資源可供用戶使用多長時間。

The network tab will give you a table containing all assets loaded on the page. It will also show you relevant information about the origin of those assets (domain, HTTP status code, size), who initiated the request, and the order in which they were loaded in a waterfall representation.

網絡標簽會為您提供一個表格，其中包含頁面上加載的所有資產。它還將向您顯示有關這些資產的來源(域，HTTP狀態代碼，大小)，發起請求的人以及以瀑布表示形式加載它們的順序的相關信息。

You can add more information to this table by right-clicking one of the table headers and choosing other columns.

您可以通過右鍵單擊表標題之一并選擇其他列來向該表添加更多信息。

The size, time and waterfall columns will be crucial to understanding the performance of a page. The size value will present the gzipped size of the resource (when applicable), while the time column shows the total duration from the start of the request to the receipt of the final byte in the response.

大小，時間和瀑布列對于理解頁面的性能至關重要。 size值將顯示資源的壓縮大小(如果適用)，而time列顯示從請求開始到響應中最后一個字節接收的總持續時間。

Last, but not least, the waterfall column demonstrates when the asset is loaded along with the other requests.

最后但并非最不重要的一點是，瀑布列說明了何時將資產與其他請求一起加載。

Performance improvements are noticeable by changes in your code/environment. So how do we keep track of what is being analyzed by the Network tab? By exporting the page in HAR format.

通過更改代碼/環境，可以顯著提高性能。那么，我們如何跟蹤“網絡”選項卡正在分析的內容？通過以HAR格式導出頁面。

什么是HAR文件？ (What is a HAR file?)

A HAR (short for HTTP Archive) file is a JSON file containing all information about a browser’s interactions with a page. It will contain the HTML document and its respective JS and CSS files.

HAR(HTTP存檔的縮寫)文件是一個JSON文件，其中包含有關瀏覽器與頁面交互的所有信息。它將包含HTML文檔及其各自的JS和CSS文件。

Along with this content, a HAR file will also contain all headers’ information and the browser metadata (that is, the time of each request).

除此內容外，HAR文件還將包含所有標頭的信息和瀏覽器元數據(即每個請求的時間)。

It is important to mention here that cookies and form data will also be logged in the file, so be careful to not include sensitive information (personal details, passwords, credit card numbers) while auditing pages.

在此必須提及，cookie和表單數據也將記錄在文件中，因此在審核頁面時請注意不要包含敏感信息(個人詳細信息，密碼，信用卡號)。

Also, you should audit pages in private windows, which avoids browser extensions. It's important to avoid a browser’s extensions since they may modify the loading times of a page.

另外，您應該在專用窗口中審核頁面，這樣可以避免瀏覽器擴展。避免瀏覽器擴展很重要，因為它們可能會修改頁面的加載時間。

生成HAR文件 (Generating HAR files)

谷歌瀏覽器 (Google Chrome)

Close all incognito windows in Google Chrome.
關閉Google Chrome中的所有隱身窗口。
Open a new incognito window in Google Chrome.
在Google Chrome瀏覽器中打開一個新的隱身窗口。
Go to View > Developer > Developers Tools.
轉到查看>開發人員>開發人員工具。
In the Developer Tools panel, choose the Network tab.
在“開發人員工具”面板中，選擇“網絡”選項卡。
Check the Preserve Log and Disable cache checkboxes to record all interactions.
選中保留日志和禁用緩存復選框以記錄所有交互。
Refresh the page.
刷新頁面。
Click the Export HAR (down arrow icon) to export the HAR file.
單擊導出HAR(向下箭頭圖標)以導出HAR文件。
Save the HAR file.
保存HAR文件。

火狐瀏覽器 (Firefox)

Close all private windows in Firefox.
關閉Firefox中的所有私有窗口。
Open a new private window in Firefox.
在Firefox中打開一個新的私有窗口。
Go to Tools > Developer > Network or ctrl-shift-E.
轉到工具>開發人員>網絡或ctrl-shift-E。
Refresh the page.
刷新頁面。
In the Cog icon (upper right side of the page), choose Save All As Har.
在齒輪圖標(頁面右上角)中，選擇全部另存為Har。
Save the HAR file.
保存HAR文件。

蘋果瀏覽器 (Safari)

Ensure that Show Develop menu in menu bar checkbox is checked under Safari > Preferences > Advanced.
確保在Safari>偏好設置>高級下選中了在菜單欄中的顯示開發菜單復選框。
Choose File > Open New Private Window.
選擇“文件”>“打開新的專用窗口”。
Visit the web page where the issue occurs.
訪問發生問題的網頁。
Choose Develop > Show Web Inspector. The Web Inspector window appears.
選擇“開發>顯示Web檢查器”。出現“ Web檢查器”窗口。
Refresh the page.
刷新頁面。
Click Export on the upper right side of the pane.
單擊窗格右上方的導出。
Save the HAR file.
保存HAR文件。

讀取HAR文件 (Reading HAR files)

Once you have a HAR file, you can try a few HAR viewers online. My personal favourite is the one created by Jan Odavarko.

擁有HAR文件后，您可以在線嘗試一些HAR查看器。我個人最喜歡的是Jan Odavarko創建的。

What I like about this viewer in particular is the fact you can have multiple files open at the same time, which makes it easier to compare them.

我特別喜歡這個查看器，因為您可以同時打開多個文件，這使得比較它們變得更加容易。

使用HAR文件分析頁面的性能 (Using HAR files to analyze the performance of a page)

HAR files can be useful to collect information about the assets of a page. Since you have detailed information about their content, you can compare what has improved (or in some cases, not improved) after a new feature is launched or a redesign is completed, for example.

HAR文件可用于收集有關頁面資產的信息。由于您具有有關其內容的詳細信息，因此，例如，在啟動新功能或完成重新設計后，您可以比較哪些方面有所改進(或在某些情況下沒有改進)。

During my workflow, I like to keep track of the final size/time values of a few pages of the product that I am working on.

在工作流程中，我想跟蹤正在處理的產品幾頁的最終大小/時間值。