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.

在工作流程中，我想跟踪正在处理的产品几页的最终大小/时间值。