First of all, this paper will not describe how to analyze all the bottlenecks of Performance optimization and provide solutions, but only briefly describe the thinking of viewing Performance. Most of the analysis data are from Aduits Panel, Performance Panel and Memory Panel.
The core goal is how to improve JavaScript execution speed, of course you can check out the website to learn better landing solutions.
If you have finished clicking on the above solution, the basic steps are complete. In order not to waste your time, it is not recommended that you continue to read the following.
What’s the problem?
When the project maintenance reached a certain stage, a user suddenly gave feedback to the development. Is your system so stuck during use? In fact, for the most part, we are not clear about the user description of what is the meaning of the card? Is the system slow to load? Or is there a lack of user experience to make the user feel that the site is running? Or is it because of a network problem that the system has been loading page refresh requests, but the timeout setting is extremely high?
If the company has a front-end monitoring system, it is quite convenient to check some indicators (such as the loading time of the first screen) to help us locate the corresponding problem points. The vast majority of companies may only have a number of front-end, so it is difficult to have such a complete set of monitoring system, often a lot of time to need the front-end for more.
The core question is: Can we use existing browser tools to help us see the performance of our site?
How to solve the problem?
The premise
Make sure your environment is clean, preferably “consistent” with real users, then open a traceless page, enter your site address, and open developer tools along the way. The core logic of the above steps is to reduce unnecessary interference items during subsequent data collection.
Looking for an entry point
And then we’ll ask people for advice. After all, with such a large site, we need to cut into that dimension and we don’t have any idea right now. Then we find the Aduits Panel, select the performance evaluation point we want to review, and run the score. Before long, there will be data reports on each indicator, and below each indicator, there will be partial optimization suggestions, according to the suggestions to fix the corresponding problems, can help you improve each indicator.
Performance View
If the problem is only Performance, you can switch to the Performance Panel, click on the record function, and then refresh the page. After closing the record, wait for the browser to parse for a while, you can display the overall Performance of the record period.
The following data source sites are official examples.
If you don’t know what each panel in each content area represents, look up notes written by colleagues.
We can see a lot of red bar markers at the top of the content area. The marked area is the area where the performance bottleneck occurs. We can locate each execution task in the Main partition according to the mark, and the Main partition is mainly to see the call stack of the Main thread at the corresponding time, namely the flame map area. You can select a task. The detailed data is displayed in the details area.
We mark the red mark in the upper right corner of the flame chart and select one to view the detailed data.
Details module, which Outlines whether the execution time of the task is a performance bottleneck, and flags the current Call Stack to help us locate the script location where the specific functionality came from.
For example, if there is a rearrangement and redrawing problem, you can call the menu command to arouse the Rendering Panel to check “Paint flashing”, and then check on the page. If a large number of green squares are flashing, it indicates that there is rearrangement and redrawing. This kind of problem is mostly caused by CSS style, so you need to check whether a particular CSS property will trigger rearrangement redraw, please see csSTRiggers.
Of course, in the details panel we’ll see the other three Tabular Windows analyzing the process data in different dimensions.
If you want to see the function calls for the selected interval, you can look at the Call Tree Tabular, where you can see the source of the event that triggered the subsequent function calls and the rendering process.
There will be two times on the left: Self Time & Total Time. The former represents the amount of time consumed by the subtask itself, while the latter represents the total amount of time consumed by the subtask including its descendants.
In this panel, the data is viewed by the call stack from top to Bottom and then the call logic between functions. However, if you only want to see which subtasks take the most time, you are advised to use the bottom-up Tabular, where the corresponding underlying tasks can be sorted by time. You can also see the Call form of the task by clicking on it, which is somewhat the opposite of the Call Tree Call stack.
If you want to see the order in which tasks occur during recording, you can view the Event Log Tabular, which shows the order in which each task is executed and whether the same task is executed repeatedly.
Each Tabular will indicate where the corresponding function is located in the script. Click on the corresponding link and the tool will automatically redirect you to the Source Panel. On the left side, you can see when each line of code is executed.
All the above are based on the examples put forward on the official website, and then combined with the functions of the toolbar to explain how to use the functions, in a more sense, to provide a solution for what data you want to see and where to find it. Of course, the possible problems and corresponding solutions have been provided on the official website. If you are interested, you can read here.
Of course, if you want to check Memory leaks and other problems, the Memory Panel can analyze the current call stack of the website, as well as the corresponding time point under the analysis of new Memory increase, so as to analyze the problem.
However, I couldn’t quite understand the meaning of the information provided on the official website after checking it twice. Besides, I couldn’t go through the chapter of terminology, so there were some terms in the middle of the chapter, which seemed vague to me, so I didn’t continue to analyze how to use Memory Panel to analyze the website. You can read here if you are interested. Of course, you have found a more clear article, welcome you can leave a message to me, thank you very much.