Brian Vaughn

Translator: UC International develops PPP

Welcome to the “UC International Technology” public account, we will provide you with the client, server, algorithm, testing, data, front-end and other related high-quality technical articles, not limited to original and translation.

React 16.5 adds support for the DevTools profiler plugin. The React Profiler API (experimental) collects the elapsed time of each component to analyze and identify performance bottlenecks in React applications. It will be fully compatible with our upcoming Time Slicing and Suspense features.

Use the performance analysis plug-in

DevTools will display the “Profiler” TAB for applications that support the Profiler API:

Note: React-dom 16.5+ supports performance profiling by default in DEV mode. React-dom /profiling can be used if production packages require support. You can learn more about how to use this package in fb.me/react-profiling.

The “Profiler” panel is empty when opened by default. Click the “Record” button to start recording:

Once recording begins, DevTools will automatically collect performance information every time a render is applied. Then use your app normally. Click the Stop button to stop recording and analyzing.

Assuming your application has been rendered at least once during analysis, DevTools presents performance data to you in a variety of ways. We will explain them all below.

Viewing the Performance Report

A. Commits A report

Theoretically, React works in two phases:

  • The render phase determines whether the DOM needs to be updated. React calls the render function and compares the result of the render function with the last one.

  • When React updates the DOM (adding, deleting, modifying, etc.), life cycle functions (componentDidMount, componentDidUpdate, etc.) are called in the Commit phase.

Read React Virtual DOM

DevTools Profiler groups performance information by commits. Commits are shown in the bar chart near the top of the Profiler:

Each bar in the chart represents a COMMIT, and the currently selected commit color is black. You can select another COMMIT by clicking the vertical bar (or the left/right arrow buttons).

The color and height of each bar correspond to the render time required for the commit(the taller yellow bar takes longer than the shorter blue bar).

Filtering Commits

The longer you record, the more times you apply Render. Sometimes you might record multiple commits. To make analysis easier, Profiler provides filtering capabilities. You can set a threshold for a Profiler to hide all commits smaller than that.

Flame figure

A fire diagram represents the status of particular commits. Each bar in the figure represents a React component (e.g. App, Nav). The size and color of the bars indicate how long it takes to render the component and its children. (The width of the bar indicates how long the component was last rendered, and the color indicates how long it was spent as part of this commit.)

Note:

The width of the bar indicates how long it took to render the component (and its children) when it was last rendered. Previous time if the component was not updated as part of this COMMIT. The wider the component, the longer it takes to render.

The color of the bar indicates how long it takes for the component (and its children) to render in the selected COMMIT. The yellow component takes more time, the blue component takes less time, and the gray component indicates that no rendering is required during this commit.

For example, the COMMIT shown above takes a total of 18.4 milliseconds to render. The Router component took the most time to render (18.4 ms). Most of that time is spent on its two subcomponents, Nav (8.4ms) and Route (7.9ms). The remaining time is spent in the remaining child node, or in its own rendering method.

You can zoom in or out of the flames by clicking on the component:

When a component is selected, information about its props and state at commit is also displayed in the right panel. You can get more detailed information to help you better analyze what the component actually presents during the Commit:

Typically, when switching between different commits, the right panel also highlights the attribute that triggered the current commit:

The figure above shows the changes in commits between commits. This could be what causes the List component to be re-rendered.

Sequence diagram

The sort diagram is used to analyze a single commit. Each bar in the diagram represents a React component (e.g. App, Nav). The rendering time is sorted in descending order.

Note:

The rendering time of a component includes the time spent rendering its children, so such components are usually listed at the top of the icon.

As with the fire chart, you can zoom in or out by clicking on components.

Component diagram

Sometimes, you might want to see how many times a particular component has been rendered in this analysis. The component diagram presents this information as a bar graph. Each bar in the diagram shows how long each render of the component takes. The color and height indicate when the component was rendered relative to other components in this COMMIT.

The image above shows that the List component has been rendered 11 times. It also indicates that it was the most “expensive” component of commits (meaning it took the longest) per render.

To see the details of a render, double-click the component or select the component, and then click the blue bar chart icon in the details pane on the right. You can click the X button in the details pane on the right to return. Double-click details to see more information about this COMMIT.

If the selected component is not rendered at all during this analysis session, the following message is displayed:

Interactions (understood as actions that trigger updates)

React recently added another API for logging the actions that trigger updates (experimental). Interactions recorded using this API will also be displayed in the Profiler:

The figure shows four interactions recorded in an analytical session. Each row represents an interaction. The colored dots in each row represent the COMMIT associated with that interaction.

You can also view the interaction recorded for a commit from the fire and ranking charts:

You can switch between interaction and commits by clicking on them:

This is a new API that we will cover in more detail in a future blog post.

troubleshooting

The selected root node does not analyze data

If your application has multiple root nodes, you may see the following interface during analysis:

This message indicates that the selected root node does not analyze data. In this case, try to select a different root node in the panel to see the analysis information for that root node:

The selected COMMIT does not show timing data

There may be times where commits are too quick that perform.now () hasn’t delivered meaningful sequence information to DevTools. In this case, the following screen is displayed:

英文原文 :

https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html