Look at the picture speak
The call stack
Starting from render down, and then back to the red box marked the perform, then all the way down to dangerouslyProcessChildrenUpdates B, and then back to the red box marked the perform, finally carried out closeAll
Click receiveComponent to see bottom-up
You can view all the call stacks under receiveComponent. Click to open each call stack and obtain more information about the time consuming operation. It’s kind of like a father-son process
The parse script(script compile) in the figure above should be Evaluate script
Self Time
ABCD Time ratio.
Summary
Call Tree
The top down call stack is the call stack from Parse HTML all the way to receiveComponent. You can search for keywords through a filter box or categorize them by group.
Event Log
It’s also a top-down call stack, but it can be filtered by the filter box, sorted by the dropdown box, or by the type of Loading/Scripting, etc.
Long task
Web. Dev/TBT /? Utm_so…
The main thread is considered “blocked” any time there’s a Long Task — a Task that runs on The main thread for more than 50 milliseconds (ms).
According to the above article, tasks that exceed 50ms are called long tasks. The excess will be filled with a red slash, as shown below.
How to reduce TBT is also given in the above article for reference, you can study it carefully later when you are free.