Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: Jason Ren <[email protected]>
  • Loading branch information
hanyujie2002 and jasonren0403 authored Oct 23, 2023
1 parent 6ac37bd commit 56f15b6
Showing 1 changed file with 9 additions and 9 deletions.
18 changes: 9 additions & 9 deletions files/zh-cn/learn/performance/measuring_performance/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,33 +60,33 @@ slug: Learn/Performance/Measuring_performance

## 网络监视工具

大多数浏览器都有可用的工具,你可以使用这些工具来针对已加载的页面进行运行,以确定它们的性能如何,大多数工具的工作方式都很类似。例如,Firefox 的[网络监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)返回有关从网络下载的所有素材的详细信息,以及显示每个下载所花费的时间的时间图
大多数浏览器都有可用的工具,你可以使用这些工具来针对已加载的页面进行运行,以确定它们的性能如何,大多数工具的工作方式都很类似。例如,Firefox 的[网络监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)返回有关从网络下载的所有素材的详细信息,并以瀑布图的形式显示每个素材的下载时间

你还可以查看 [Chrome 的网络监视器文档](https://developer.chrome.com/docs/devtools/network/)

## 性能监视工具

你也可以使用浏览器性能监测工具,比如 [Firefox 性能监测器](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html)来测量在执行不同操作时一个 web 应用或网站的用户界面性能。这可以指出可能拖慢你的 web 应用或网站速度的特性。

![开发者工具性能面板显示录制 #1. 的瀑布图](perf-monitor.png)
![开发者工具性能面板显示录制 #1 的瀑布图](perf-monitor.png)

另见 [Chrome 性能工具文档](https://developer.chrome.com/docs/devtools/performance/)
参见 [Chrome 性能工具文档](https://developer.chrome.com/docs/devtools/performance/)

## 性能 API

编写 web 代码时,有大量的 [web API](/zh-CN/docs/web/API) 可用,使你可以创建自己的性能测量工具。
编写 web 代码时,有大量的 [web API](/zh-CN/docs/Web/API) 可用,使你可以创建自己的性能测量工具。

你可以使用[导航计时 API](/zh-CN/docs/web/API/Navigation_timing_API) 来测量客户端 web 性能,包括卸载上一个页面所需的时间、域名查找所需的时间、执行窗口加载处理程序所花费的总时间等。你可以将该 API 用于与下图中显示的所有导航事件相关的度量。
你可以使用[导航计时 API](/zh-CN/docs/web/API/Navigation_timing) 来测量客户端 web 性能,包括卸载上一个页面所需的时间、域名查询所需的时间、执行窗口加载处理程序所花费的总时间等。你可以将该 API 用于与下图中显示的所有导航事件相关的度量。

![导航计时 API 可处理的各种处理器(包括 Navigation Timing API 度量):unload 提示、redirect、unload、应用缓存、DNS、TCP、请求、相应、处理、onLoad,以及 navigationStart、redirectStart、redirectEnd、fetchStart、domainLookupEnd、domainLookupStart、connectStart(secureConnectionStart)、connectEnd、requestStart、responseStart、responseEnd、unloadStart、unloadEnd、domLoading、domInteractive、domContentLoaded、domComplete、loadEventStart、loadEventEnd](navigationtimingapi.jpg)

[性能 API](/zh-CN/docs/web/API/Performance_API/Using_the_Performance_API),它为当前页面提供了访问性能相关信息的能力,包括[性能时间轴 API](/zh-CN/docs/web/API/Performance_Timeline)[导航计时 API](/zh-CN/docs/web/API/Navigation_timing_API)[用户计时 API](/zh-CN/docs/web/API/User_Timing_API)[资源计时 API](/zh-CN/docs/web/API/Resource_Timing_API)。这些接口允许准确测量 JavaScript 任务完成所需的时间。
[性能 API](/zh-CN/docs/Web/API/Performance_API/Performance_API),它为当前页面提供了访问性能相关信息的能力,包括[性能时间轴 API](/zh-CN/docs/Web/API/Performance_Timeline)[导航计时 API](/zh-CN/docs/Web/API/Navigation_timing)[用户计时 API](/zh-CN/docs/Web/API/User_timing)[资源计时 API](/zh-CN/docs/Web/API/Resource_timing)。这些接口允许准确测量 JavaScript 任务完成所需的时间。

[PerformanceEntry](/zh-CN/docs/web/API/PerformanceEntry) 对象是性能时间轴的一部分。性能条目可以通过在应用程序的显式点创建性能 _{{domxref("PerformanceMark","mark")}}__{{domxref("PerformanceMeasure","measure")}}_(例如,通过调用 {{domxref("Performance.mark","mark()")}} 方法直接创建。性能条目还可以通过间接方式创建,例如加载资源,如图像
[PerformanceEntry](/zh-CN/docs/Web/API/PerformanceEntry) 对象是*性能时间轴*的一部分。*性能条目*可以通过在应用程序的显式点创建性能 _{{domxref("PerformanceMark","mark")}}__{{domxref("PerformanceMeasure","measure")}}_(例如,通过调用 {{domxref("Performance.mark","mark()")}} 方法直接创建。性能条目还可以通过间接方式创建,例如加载图像等资源

[PerformanceObserver API](/zh-CN/docs/web/API/PerformanceObserver) 可用于观察性能测量事件,并在浏览器的性能时间轴中记录新的[性能条目](/zh-CN/docs/web/API/PerformanceEntry)时通知你。
[PerformanceObserver API](/zh-CN/docs/Web/API/PerformanceObserver) 可用于观察性能测量事件,并在浏览器的性能时间轴中记录新的[性能条目](/zh-CN/docs/Web/API/PerformanceEntry)时通知你。

虽然本文并没有深入介绍这些 API 的使用,但了解它们的存在是有用的。你还可以参考[导航和计时](/zh-CN/docs/web/Performance/Navigation_and_resource_timings)文章,以获取有关使用性能 web API 的更多示例。
虽然本文并没有深入介绍这些 API 的使用,但了解它们的存在是有用的。你还可以参考[导航和计时](/zh-CN/docs/Web/Performance/Navigation_and_resource_timings)文章,以获取有关使用性能 web API 的更多示例。

## 结语

Expand Down

0 comments on commit 56f15b6

Please sign in to comment.