diff --git a/content/blog/2018-09-10-introducing-the-react-profiler.md b/content/blog/2018-09-10-introducing-the-react-profiler.md index 7cb439e1fa..483801d8b3 100644 --- a/content/blog/2018-09-10-introducing-the-react-profiler.md +++ b/content/blog/2018-09-10-introducing-the-react-profiler.md @@ -1,196 +1,196 @@ --- -title: "Introducing the React Profiler" +title: "React Profiler 介绍" author: [bvaughn] --- -React 16.5 adds support for a new DevTools profiler plugin. -This plugin uses React's [experimental Profiler API](https://github.com/reactjs/rfcs/pull/51) to collect timing information about each component that's rendered in order to identify performance bottlenecks in React applications. -It will be fully compatible with our upcoming [time slicing and suspense](/blog/2018/03/01/sneak-peek-beyond-react-16.html) features. - -This blog post covers the following topics: -* [Profiling an application](#profiling-an-application) -* [Reading performance data](#reading-performance-data) - * [Browsing commits](#browsing-commits) - * [Filtering commits](#filtering-commits) - * [Flame chart](#flame-chart) - * [Ranked chart](#ranked-chart) - * [Component chart](#component-chart) - * [Interactions](#interactions) -* [Troubleshooting](#troubleshooting) - * [No profiling data has been recorded for the selected root](#no-profiling-data-has-been-recorded-for-the-selected-root) - * [No timing data to display for the selected commit](#no-timing-data-to-display-for-the-selected-commit) -* [Deep dive video](#deep-dive-video) - -## Profiling an application {#profiling-an-application} - -DevTools will show a "Profiler" tab for applications that support the new profiling API: - -![New DevTools "profiler" tab](../images/blog/introducing-the-react-profiler/devtools-profiler-tab.png) - -> Note: +React 16.5 添加了对开发者工具的 Profiler 插件的支持。 +该插件使用了 React 的[ Profiler 实验性 API](https://github.com/reactjs/rfcs/pull/51) 来收集所有组件渲染的耗时，目的是为了找出 React 应用程序的性能瓶颈。 +它将完全兼容我们即将推出的[时间片和 suspense](/blog/2018/03/01/sneak-peek-beyond-react-16.html) 特性。 + +这篇博文包含以下内容： +* [分析应用程序](#profiling-an-application) +* [查看性能数据](#reading-performance-data) + * [浏览提交记录](#browsing-commits) + * [筛选提交记录](#filtering-commits) + * [火焰图](#flame-chart) + * [排序图](#ranked-chart) + * [组件图](#component-chart) + * [交互动作](#interactions) +* [常见问题](#troubleshooting) + * [选择的根元素下没有分析数据被记录](#no-profiling-data-has-been-recorded-for-the-selected-root) + * [选中的提交记录没可展示的时间数据](#no-timing-data-to-display-for-the-selected-commit) +* [视频解析](#deep-dive-video) + +## 分析应用程序 {#profiling-an-application} + +开发者工具将会对支持新的分析 API 的应用程序添加一个“Profiler”选项卡： + +![新的开发者工具“Profiler”选项卡](../images/blog/introducing-the-react-profiler/devtools-profiler-tab.png) + +> 注意： > -> `react-dom` 16.5+ supports profiling in DEV mode. -> A production profiling bundle is also available as `react-dom/profiling`. -> Read more about how to use this bundle at [fb.me/react-profiling](https://fb.me/react-profiling) +> `react-dom` 16.5+ 在 DEV 模式下支持性能分析。 +> 在生产环境也可以使用 `react-dom/profiling` 代码包进行性能分析， +> 查阅 [fb.me/react-profiling](https://fb.me/react-profiling) 了解更多如何使用这个代码包。 -The "Profiler" panel will be empty initially. Click the record button to start profiling: +这个“Profiler”面板初始为空，你可以点击 record 按钮开始分析： -![Click "record" to start profiling](../images/blog/introducing-the-react-profiler/start-profiling.png) +![点击“record”开始分析](../images/blog/introducing-the-react-profiler/start-profiling.png) -Once you've started recording, DevTools will automatically collect performance information each time your application renders. -Use your app as you normally would. -When you are finished profiling, click the "Stop" button. +当你开始记录之后，开发者工具将在每次应用程序渲染时自动收集性能数据。 +你可以和平常一样使用你的应用程序， +当你完成分析之后，请点击“Stop”按钮。 -![Click "stop" when you are finished profiling](../images/blog/introducing-the-react-profiler/stop-profiling.png) +![当你完成性能分析之后，点击“stop”](../images/blog/introducing-the-react-profiler/stop-profiling.png) -Assuming your application rendered at least once while profiling, DevTools will show several ways to view the performance data. -We'll [take a look at each of these below](#reading-performance-data). +假设你的应用程序在分析时至少渲染一次，开发者工具将提供几种方法查看性能数据。 +我们将会[在接下来介绍它们](#reading-performance-data)。 -## Reading performance data {#reading-performance-data} +## 查看性能数据 {#reading-performance-data} -### Browsing commits {#browsing-commits} -Conceptually, React does work in two phases: +### 浏览提交记录 {#browsing-commits} +从概念上讲，React 分两个阶段工作： -* The **render** phase determines what changes need to be made to e.g. the DOM. During this phase, React calls `render` and then compares the result to the previous render. -* The **commit** phase is when React applies any changes. (In the case of React DOM, this is when React inserts, updates, and removes DOM nodes.) React also calls lifecycles like `componentDidMount` and `componentDidUpdate` during this phase. +* **渲染** 阶段会确定需要进行哪些更改，比如 DOM。在此阶段，React 调用 `render`，然后将结果与上次渲染的结果进行比较。 +* **提交** 阶段发生在当 React 应用变化时。（对于 React DOM 来说，会发生在 React 插入，更新及删除 DOM 节点的时候。）在此阶段，React 还会调用 `componentDidMount` 和 `componentDidUpdate` 之类的生命周期方法。 -The DevTools profiler groups performance info by commit. -Commits are displayed in a bar chart near the top of the profiler: +开发者工具的 profiler 是在提交阶段收集性能数据的。 +每次提交都会被展示在 profiler 界面顶部的条形图中： -![Bar chart of profiled commits](../images/blog/introducing-the-react-profiler/commit-selector.png) +![已分析的提交记录](../images/blog/introducing-the-react-profiler/commit-selector.png) -Each bar in the chart represents a single commit with the currently selected commit colored black. -You can click on a bar (or the left/right arrow buttons) to select a different commit. +在条形图中，每一列都表示单次提交的数据，当前选中的提交会变成黑色。 +你可以点击各个列（或者是左/右切换按钮）来查看不同的提交的数据。 -The color and height of each bar corresponds to how long that commit took to render. -(Taller, yellow bars took longer than shorter, blue bars.) +这些列的颜色和高度对应该次提交渲染所需的时间。 +(较高的黄色的列比较短的蓝色的列耗费的时间长。) -### Filtering commits {#filtering-commits} +### 筛选提交记录 {#filtering-commits} -The longer you profile, the more times your application will render. -In some cases you may end up with _too many commits_ to easily process. -The profiler offers a filtering mechanism to help with this. -Use it to specify a threshold and the profiler will hide all commits that were _faster_ than that value. +你分析的时间越长，应用程序渲染的次数就越多。 +有时候，你可能会因为_过多的提交记录_而感觉难以处理。 +profiler 提供了一个筛选功能，帮助你解决这个问题。 +使用它来设置一个时间阈值，profiler 将隐藏所有比该值_更快_的提交记录。 -![Filtering commits by time](../images/blog/introducing-the-react-profiler/filtering-commits.gif) +![按时间筛选提交记录](../images/blog/introducing-the-react-profiler/filtering-commits.gif) -### Flame chart {#flame-chart} +### 火焰图 {#flame-chart} -The flame chart view represents the state of your application for a particular commit. -Each bar in the chart represents a React component (e.g. `App`, `Nav`). -The size and color of the bar represents how long it took to render the component and its children. -(The width of a bar represents how much time was spent _when the component last rendered_ and the color represents how much time was spent _as part of the current commit_.) +火焰图会展示你所指定的那一次提交的应用程序的信息， +图中的每一列都代表了一个 React 组件，（如：`App`，`Nav`）。 +列的大小和颜色代表渲染该组件及其子组件所需的耗时。 +(列的宽度代表组件_上次渲染_的耗时，列的颜色代表在_该次提交_中渲染的耗时。) -![Example flame chart](../images/blog/introducing-the-react-profiler/flame-chart.png) +![火焰图示例](../images/blog/introducing-the-react-profiler/flame-chart.png) -> Note: +> 注意： > -> The width of a bar indicates how long it took to render the component (and its children) when they last rendered. -> If the component did not re-render as part of this commit, the time represents a previous render. -> The wider a component is, the longer it took to render. +> 列的宽度表示组件（及其子组件）上次渲染所需的耗时。 +> 如果组件在本次提交中未重新渲染，则代表上次渲染的耗时。 +> 一个列越宽，其所代表的组件渲染耗时就越长。 > -> The color of a bar indicates how long the component (and its children) took to render in the selected commit. -> Yellow components took more time, blue components took less time, and gray components did not render at all during this commit. +> 列的颜色表示组件（及其子组件）在本次提交中渲染的耗时。 +> 黄色代表耗时较长，蓝色代表耗时较短，灰色代表该组件在这次提交中没有重新渲染。 -For example, the commit shown above took a total of 18.4ms to render. -The `Router` component was the "most expensive" to render (taking 18.4ms). -Most of this time was due to two of its children, `Nav` (8.4ms) and `Route` (7.9ms). -The rest of the time was divided between its remaining children or spent in the component's own render method. +例如，上图中所展示的提交总共渲染耗时为 18.4ms。 +`Router` 组件是渲染成本“最昂贵的”（花费了 18.4ms）。 +它所花费的时间大部分在它的两个子组件上：`Nav`（8.4ms）和 `Route`（7.9ms）。 +剩下的时间用于它的其他子组件和它自身的渲染。 -You can zoom in or out on a flame chart by clicking on components: -![Click on a component to zoom in or out](../images/blog/introducing-the-react-profiler/zoom-in-and-out.gif) +你可以通过单击组件放大或缩小火焰图： +![单击组件放大或缩小火焰图](../images/blog/introducing-the-react-profiler/zoom-in-and-out.gif) -Clicking on a component will also select it and show information in the right side panel which includes its `props` and `state` at the time of this commit. -You can drill into these to learn more about what the component actually rendered during the commit: +点击一个组件的同时也会选中它，它的详细信息将会展示在右边的面板中，该面板会展示该组件在这次提交时的 `props` 和 `state`。 +你可以深入研究这些信息，进一步了解这次提交组件实际渲染的内容： -![Viewing a component's props and state for a commit](../images/blog/introducing-the-react-profiler/props-and-state.gif) +![查看组件提交的 props 和 state](../images/blog/introducing-the-react-profiler/props-and-state.gif) -In some cases, selecting a component and stepping between commits may also provide a hint as to _why_ the component rendered: +在某些情况下，选中一个组件后在不同的提交之间切换也可以发现触发这次渲染的_原因_： -![Seeing which values changed between commits](../images/blog/introducing-the-react-profiler/see-which-props-changed.gif) +![查看提交之间变化的数据](../images/blog/introducing-the-react-profiler/see-which-props-changed.gif) -The above image shows that `state.scrollOffset` changed between commits. -This is likely what caused the `List` component to re-render. +上图表示 `state.scrollOffset` 在提交之间被改变了。 +这可能是导致 `List` 组件重新渲染的原因。 -### Ranked chart {#ranked-chart} +### 排序图 {#ranked-chart} -The ranked chart view represents a single commit. -Each bar in the chart represents a React component (e.g. `App`, `Nav`). -The chart is ordered so that the components which took the longest to render are at the top. +同火焰图一样，排序图也会展示你所指定的那一次提交的信息， +图中的每一列都代表了一个 React 组件（如：`App`，`Nav`）。 +不同的是排序图是有顺序的，耗时最长的组件会展示在第一行。 -![Example ranked chart](../images/blog/introducing-the-react-profiler/ranked-chart.png) +![排序图示例](../images/blog/introducing-the-react-profiler/ranked-chart.png) -> Note: +> 注意： > -> A component's render time includes the time spent rendering its children, -> so the components which took the longest to render are generally near the top of the tree. +> 组件的渲染耗时包含了其子组件渲染所花费的时间， +> 因此，渲染耗时最长的组件通常距离树的顶部最近。 -As with the flame chart, you can zoom in or out on a ranked chart by clicking on components. +与火焰图一样，你可以通过单击组件放大或缩小排序图。 -### Component chart {#component-chart} +### 组件图 {#component-chart} -Sometimes it's useful to see how many times a particular component rendered while you were profiling. -The component chart provides this information in the form of a bar chart. -Each bar in the chart represents a time when the component rendered. -The color and height of each bar corresponds to how long the component took to render _relative to other components_ in a particular commit. +在你分析的过程中，使用该图来查看某一组件在多次提交中的渲染时间有时候是非常有用的。 +组件图会以一个列的形式展示， +其中每一列都表示你所选择的组件某一次提交下的渲染时间。 +每列的颜色和高度都表示该组件在某次提交中_同其它组件_的渲染耗时对比。 -![Example component chart](../images/blog/introducing-the-react-profiler/component-chart.png) +![组件图示例](../images/blog/introducing-the-react-profiler/component-chart.png) -The chart above shows that the `List` component rendered 11 times. -It also shows that each time it rendered, it was the most "expensive" component in the commit (meaning that it took the longest). +上图显示 `List` 组件渲染了 11 次。 +同时它还显示了每次渲染时，它都是提交中最“昂贵”的组件（意味着它的耗时最长）。 -To view this chart, either double-click on a component _or_ select a component and click on the blue bar chart icon in the right detail pane. -You can return to the previous chart by clicking the "x" button in the right detail pane. -You can also double click on a particular bar to view more information about that commit. +想查看此图，请双击组件_或者_选择组件后单击右侧面板中的蓝色列表图标。 +你可以通过单击右侧面板中的“x”按钮返回原图。 +也可以通过双击组件图的某一列来查看该提交的更多信息 -![How to view all renders for a specific component](../images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif) +![如何查看某一组件所有的渲染](../images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif) -If the selected component did not render at all during the profiling session, the following message will be shown: +如果你选中的组件在分析期间从未被渲染过，则会显示下面的消息： -![No render times for the selected component](../images/blog/introducing-the-react-profiler/no-render-times-for-selected-component.png) +![所选组件无渲染时间](../images/blog/introducing-the-react-profiler/no-render-times-for-selected-component.png) -### Interactions {#interactions} +### 交互动作 {#interactions} -React recently added another [experimental API](https://fb.me/react-interaction-tracing) for tracing the _cause_ of an update. -"Interactions" traced with this API will also be shown in the profiler: +React 最近添加了一个用于跟踪更新_原因_的[实验性 API](https://fb.me/react-interaction-tracing)。 +被这些 API 跟踪的“交互动作”也会显示在 profiler 中: -![The interactions panel](../images/blog/introducing-the-react-profiler/interactions.png) +![交互动作面板](../images/blog/introducing-the-react-profiler/interactions.png) -The image above shows a profiling session that traced four interactions. -Each row represents an interaction that was traced. -The colored dots along the row represent commits that were related to that interaction. +上图显示了一个分析期间被跟踪的四个交互动作。 +每行都表示一个已经被跟踪的交互动作。 +每行中彩色的点表示与该交互动作相关的提交记录。 -You can also see which interactions were traced for a particular commit from the flame chart and ranked chart views as well: +你还可以从火焰图和排序图的视图中查看某一提交记录被跟踪了哪些交互动作： -![List of interactions for a commit](../images/blog/introducing-the-react-profiler/interactions-for-commit.png) +![提交记录的交互动作列表](../images/blog/introducing-the-react-profiler/interactions-for-commit.png) -You can navigate between interactions and commits by clicking on them: +通过单击交互动作和提交记录，可以在它们之间切换： -![Navigate between interactions and commits](../images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif) +![在交互动作和提交记录之间切换](../images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif) -The tracing API is still new and we will cover it in more detail in a future blog post. +tracing API 是新的特性，我们会在未来的博文中更详细地介绍它。 -## Troubleshooting {#troubleshooting} +## 常见问题 {#troubleshooting} -### No profiling data has been recorded for the selected root {#no-profiling-data-has-been-recorded-for-the-selected-root} +### 选择的根元素下没有分析数据被记录 {#no-profiling-data-has-been-recorded-for-the-selected-root} -If your application has multiple "roots", you may see the following message after profiling: -![No profiling data has been recorded for the selected root](../images/blog/introducing-the-react-profiler/no-profiler-data-multi-root.png) +如果你的应用程序有多个“根”节点，你可能会在分析后看到以下消息： +![选择的根元素下没有分析数据被记录](../images/blog/introducing-the-react-profiler/no-profiler-data-multi-root.png) -This message indicates that no performance data was recorded for the root that's selected in the "Elements" panel. -In this case, try selecting a different root in that panel to view profiling information for that root: +这个信息表示你在“Elements”面板中选择的根节点没有性能数据被记录。 +在这种情况下，请尝试在该面板中选择其他根节点来查看性能分析数据： -![Select a root in the "Elements" panel to view its performance data](../images/blog/introducing-the-react-profiler/select-a-root-to-view-profiling-data.gif) +![在“Elements”界面中选择根节点来查看它的性能数据](../images/blog/introducing-the-react-profiler/select-a-root-to-view-profiling-data.gif) -### No timing data to display for the selected commit {#no-timing-data-to-display-for-the-selected-commit} +### 选中的提交记录没可展示的时间数据 {#no-timing-data-to-display-for-the-selected-commit} -Sometimes a commit may be so fast that `performance.now()` doesn't give DevTools any meaningful timing information. -In this case, the following message will be shown: +有时提交的速度可能很快，以至于 `performance.now()` 无法给开发者工具任何有意义的数据。 +在这种情况下，将显示以下的消息： -![No timing data to display for the selected commit](../images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png) +![选中的提交记录没可展示的时间数据](../images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png) -## Deep dive video {#deep-dive-video} +## 视频解析 {#deep-dive-video} -The following video demonstrates how the React profiler can be used to detect and improve performance bottlenecks in an actual React application. +以下视频演示了如何使用 React profiler 来检测和改进实际 React 应用程序中的性能瓶颈。