December 5, 2017 at 12:12Performance analysis of React 16 apps with Chrome Developer Tools
- Transfer
React is one of the leading front-end frameworks, not only because Facebook is behind it, but also because of its high performance. React's virtual DOM is known for efficient component rendering. But what if these components suddenly become not so fast? Where to look? How to fix it?
In this article, using a real React application as an example, we will show you new powerful tools for monitoring code performance using the Chrome developer tools. Any React developer can use these tools to find problems in slow components.
In order to reproduce what we are going to talk about, you will need the following:
To get started, you'll need enough workspace, so open the Chrome Developer Tools in a separate window and expand this window as far as the monitor screen allows.
Customizing Chrome Developer Tools
When performing performance tests, it’s important to strive to simulate the actual conditions in which the application will run. Not everyone has computers for $ 3,000 or the latest phone models.
Fortunately, Chrome developers have taken care of such test scenarios, there is an opportunity to slow down the execution of JavaScript. Thanks to this, we will make performance problems more obvious. In addition, if you manage to make the code fast on a slow (or specially slowed down) device, such a code will fly right on a regular computer.
Artificial slowdown in performance
If you slow down the modern MacBook by at least 4 times, its performance will be comparable to the Motorola Moto G4.
When React 16 is in development mode, it generates events for each component
In order to create a performance profile, you need to go to the page you want to experience (on the local host) and click on the button
This will start recording performance information for the current page. Chrome will automatically stop writing data after the page has fully loaded and displayed on the screen.
Starting Profiling
Once performance data has been recorded, you will see something that resembles the following figure.
Profiling Results
Here, from left to right, you can see what happens to the page during loading and initialization.
Let’s take some time to review the performance profile information, the meaning of which may not be obvious to those who first experience performance analysis in Chrome. In the figure, what we will talk about is marked by the numbers 1 and 2.
Today we will focus on what is called here -
Analysis of the application performance profile
Expand the window, open the group
Now we are going to study the area in which there is a red stripe described above. We can see that at this time the page displays the elements.
Zoom in on the desired area. See the badges?
When zooming in, information is displayed from the section
Below the component,
Having decided on the component that we will investigate, we will search for slow functions. In the figure below, you can see the Chrome Developer Tools window with numbered steps, the contents of which we will now describe.
Search for slow features
Transition to the source code
The code, the execution of which takes the most time, is marked with the corresponding indicator on the left (maybe this is not my best code, which should be put on public display). Now that you know exactly where the problem lies, you can fix it.
Using this approach for the last couple of weeks, I accelerated the execution of the code areas I was thinking about: “No, it’s difficult, probably, to improve at least something here, it will take a lot of time”. Now I know exactly how and where to look for JavaScript performance problems and I’m sure that in the future I will write better code.
React publishes metrics through
So, in Chrome, not React debugging tools are built-in, but the support for the universal API used by React. In addition, all major browsers support
Regarding the speed of applications, there are no trifles - every fraction of a second is important here. We hope this material has helped you improve your research skills and optimize application performance.
Dear readers! How do you analyze web application performance?
In this article, using a real React application as an example, we will show you new powerful tools for monitoring code performance using the Chrome developer tools. Any React developer can use these tools to find problems in slow components.
Prerequisites
In order to reproduce what we are going to talk about, you will need the following:
- React 16 application launched in development mode.
- Code maps generated when exporting a project (this is optional, but highly recommended).
- Developer tools Google Chrome or Chromium (they are in all current releases).
Tool Setup
To get started, you'll need enough workspace, so open the Chrome Developer Tools in a separate window and expand this window as far as the monitor screen allows.
Customizing Chrome Developer Tools
When performing performance tests, it’s important to strive to simulate the actual conditions in which the application will run. Not everyone has computers for $ 3,000 or the latest phone models.
Fortunately, Chrome developers have taken care of such test scenarios, there is an opportunity to slow down the execution of JavaScript. Thanks to this, we will make performance problems more obvious. In addition, if you manage to make the code fast on a slow (or specially slowed down) device, such a code will fly right on a regular computer.
Artificial slowdown in performance
If you slow down the modern MacBook by at least 4 times, its performance will be comparable to the Motorola Moto G4.
Performance analysis
When React 16 is in development mode, it generates events for each component
markand measurethat are part of the User Timing API . In order to create a performance profile, you need to go to the page you want to experience (on the local host) and click on the button
Start profiling and reload pagein the developer tools. This will start recording performance information for the current page. Chrome will automatically stop writing data after the page has fully loaded and displayed on the screen.
Starting Profiling
Once performance data has been recorded, you will see something that resembles the following figure.
Profiling Results
Here, from left to right, you can see what happens to the page during loading and initialization.
Let’s take some time to review the performance profile information, the meaning of which may not be obvious to those who first experience performance analysis in Chrome. In the figure, what we will talk about is marked by the numbers 1 and 2.
- The indicator in the form of a red bar shows that in this place on the timeline there is a serious load on the processor (performing long tasks). Perhaps this is exactly what slows down the application, and what we need to explore in more detail.
- The colors used in the chart at the top of the window correspond to different activities. The decline in productivity in the course of performing various types of activities has its own reasons, there are special ways to fix various problems and means of their analysis.
Today we will focus on what is called here -
Scripting — that is, JavaScript performance.Analysis of the application performance profile
Expand the window, open the group
User Timingand take the opportunity to view screenshots of the page taken during its loading in order to examine how the page is displayed. Now we are going to study the area in which there is a red stripe described above. We can see that at this time the page displays the elements.
Zoom in on the desired area. See the badges?
When zooming in, information is displayed from the section
User Timingand the component with the label Pulse(the one that takes 500 ms to output). Below the component,
Pulseyou can see the rendering information of the child components, but the size of the corresponding elements indicates that they do not create a special load on the system.Search for slow features
Having decided on the component that we will investigate, we will search for slow functions. In the figure below, you can see the Chrome Developer Tools window with numbered steps, the contents of which we will now describe.
Search for slow features
- Click on the component you want to explore, in this case
Pulse. Due to this, only actions from this component will be displayed at the bottom of the window. - Select a tab
Bottom-Up. - Sort the list in descending order by measure
Total Time. In some cases, sorting by measureSelf Time, or grouping by something other than a URL , may come in handy . What exactly is suitable in your case, you will understand in the process. - Click on the arrow icons until you find the code fragment that you want to explore in more detail. In this case, the call looks suspicious
map. It runs many times and takes almost 90 ms. - But why do we need code cards. Clicking on
MetricStore.js:59it allows you to see the corresponding section of the application source code. Take a look at it.
Transition to the source code
The code, the execution of which takes the most time, is marked with the corresponding indicator on the left (maybe this is not my best code, which should be put on public display). Now that you know exactly where the problem lies, you can fix it.
Using this approach for the last couple of weeks, I accelerated the execution of the code areas I was thinking about: “No, it’s difficult, probably, to improve at least something here, it will take a lot of time”. Now I know exactly how and where to look for JavaScript performance problems and I’m sure that in the future I will write better code.
Why are debugging tools for React apps built into Chrome?
React publishes metrics through
User Timing API, which you can use to place time markers in your own code. This allows, for example, to find out how long the component takes to initialize, or after how long after a certain event the user clicks the Buy button. Here is some good stuff about User Timing API. So, in Chrome, not React debugging tools are built-in, but the support for the universal API used by React. In addition, all major browsers support
User Timing API, but the PerformanceChrome Developer Tools tab went much further than others, which greatly facilitated debugging of React applications in Chrome.Summary
Regarding the speed of applications, there are no trifles - every fraction of a second is important here. We hope this material has helped you improve your research skills and optimize application performance.
Dear readers! How do you analyze web application performance?