Profiler

React16.5 has officially added Profiler functionality to DevTool, which collects the rendering times caused by each change to help developers spot potential performance issues and help develop higher performance React applications

The official blog

How to use

Chrome’s React DevTool now has a Profiler TAB that you can click to switch to the Profiler screen

In versions after You use Act16.5, Profiler is enabled by default during development. To use Profiler in your environment, see here

By default, the Profiler opens with nothing but the record button (much like Chrome’s Performance).

After you start recording, you can perform some actions that you want to analyze, then click Stop to stop recording, and you can get the recorded content

Analysis of Recorded content

First, React has two phases for processing tasks after version 16:

  1. The Render phase determines which changes need to be processed into the DOM, comparing the last render to the new update
  2. commitThe React phase eventually implements all changes (that is, updates from js objects to the DOM) and calls themcomponentDidMountandcomponentDidUpdateThese lifecycle methods

The performance data is grouped in the Commit phase and displayed on the toolbar on the right

It looks like a bar chart, with each column representing a commit and its color and height corresponding to the execution time. The higher the color, the more yellow the execution time, and vice versa.

Delete selected commits

To set the selection option, click the Settings icon on the left of the Commits group and click on the dialog box that appears.

  1. Less than the execution time is not shown
  2. Whether to display the time of the original DOM rendering

Flame figure

The flame map displays the render information of each component in a tree-like structure during a commit. Similar to the commit grouping information, color and length correspond to the render time of the component, but the render time of the component depends on the render time of its children.

The Router component takes the longest rendering time, and is roughly equal to the sum of the Nav and Route rendering times, because the child component’s rendering time must be counted in the parent component’s rendering time.

You can click on any component to view its details

Clicking on a component also allows you to view its props and state

Sometimes you select a component and switch in the commits group, and there are reminders of changes in the State and props panels

No view

Selecting the ranking view next to the flame chart shows the ranking of the components in the commit from highest to lowest rendering time, making it easy to delete the longest render.

The component view

If you need to see how many times a component is rendered and how long it takes during your recording, this view is for you.

It looks like a bar chart, with each bar representing one render and length and color representing the length of time.

You can open this view by double-clicking a component, or by selecting a component and clicking the icon in the upper right corner.

Interactive? Interactions

React has previously released a set of experimental apis to track the cause of updates, and information using this API is also displayed in devTool

The four green dots are the commit of the node calling the API, and you can also see the activity trace in the commit information of the flame map

You can switch between interaction and commits by clicking on the message

By the way, this API is used through the scheduler package

import { unstable_trace as trace } from "schedule/tracing"

class MyComponent extends Component {
  handleLoginButtonClick = event= > {
    trace("Login button click", performance.now(), () => {
      this.setState({ isLoggingIn: true });
    });
  };

  // render ...
}
Copy the code

You can see it here for more details

The last

This feature is great because it makes it very easy for developers to see the component rendering cost of each operation, and it is very convenient for developers to find unnecessary renderings.

In fact, small details in React development can have a significant impact on the performance overhead of the entire application. However, the current browser is too powerful and most applications are under the condition of excessive performance, so the performance problem is not obvious.

At the end of the article, there is a video that shows how profilers can help you find performance problems and optimize them.

I’m Jocky, a front-end engineer who focuses on React techniques and in-depth analysis. React is definitely a well-designed and forward-thinking framework that will make you feel more sophisticated the further you learn it. Follow me for the latest React updates and the most in-depth React learning.See more articles here