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 call
Overview
Pane, we can seeFPS
.CPU
.NET
Changes at page load time.- FPS: frames per second, the higher the green bar,
FPS
The higher the height, we should focus on the red section, which indicates that our page is likely to lag, plus60
Is an ideal value CPU
:CPU
resourcesNET
: Each colored bar represents a resource, and the longer the bar, the longer the event required to retrieve the resource
- FPS: frames per second, the higher the green bar,
- Part three: Flame diagram
- The horizontal axis shows the loading time
- 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:
Summary
Part of it, you can seeCPU
Resource allocation in, as shown in the following figureRendering
That’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, belowSummary
The 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