preface

Front-end performance, which is a big and interesting area, is an unavoidable issue for every front-end engineer, so this series will slowly explore some of the performance aspects. Recently also came into contact with some performance aspects of debugging and optimization work, paper come zhongjue shallow, must know this to practice.

Unexpectedly is the performance optimization, the first step should be performance debugging, find our page performance problems, this article belongs to the entry level, not to say more, into the topic

Know the Chrome Performance

If you can’t find it, you can check the browser version. Maybe it’s the version problem. Mine is up to date, so I’m sure it’s ok

In Chrome, open the Chrome Debug panel and enter the Performance screen. As shown below, follow the steps

Step 4: Simulate the CPU speed to help you reestablish the problem. If 4x slowdowns are not possible, select 6x Slowdowns

We can see that there are several important buttons on the top left, which are used as follows:

If we hit Re-record, it will appear:

Once you’re done, the following screen will appear, and these are the things you should focus on

Let’s take a look at the parts:

  • Part I:controls, as described above
  • Part two: Important parameters, which we callOverviewPane, we can seeFPS.CPU.NETChanges at page load time.
    1. FPS: frames per second, the higher the green bar,FPSThe higher the height, we should focus on the red section, which indicates that our page is likely to lag, plus60Is an ideal value
    2. CPU: CPUresources
    3. NET: Each colored bar represents a resource, and the longer the bar, the longer the event required to retrieve the resource
  • Part three: Flame diagram
  1. The horizontal axis shows the loading time
  2. The vertical axis shows the order in which events (threads) are executed, from the top to the bottom, with special attention to the red triangle line
  • Part IV:SummaryPart of it, you can seeCPUResource allocation in, as shown in the following figureRenderingThat’s a lot of it

Use tips: Sections 2, 3, and 4 are all linked, such as when you select a section of the flame diagram, belowSummaryThe summary of this section is displayed

Use Performance to locate Performance problems

The above brief introduction of Performance, after we get the data, how to analyze?

The specific steps are as follows:

Click on the specific execution code to see the relevant problem code

conclusion

Above we just introduced how to locate the performance problem, how to optimize the next, this is a big problem, will be slowly summarized in this series next!

Welcome to pay attention to this public account