foreword
Recently, the business has been free, and I also put my own feelings in the development process on the main line for investigation and optimization. Here I will record the whole process of the author's introduction 白屏时间of mobile scripts.vConsole
Network script and problem location
For the white screen time, it has a lot to do with network transmission, as shown in the figure:
This is performancea network loading picture of the production environment. FPThe appearance of up to 3.3 seconds is very vivid at first glance vConsole, and it takes 2.6 seconds to block the rendering of the main thread, and such debugging tools do not need to be displayed at all. The introduction of production needs to be used in daily and pre-release environments, so locate the project code and find the code block of the problem point:
This is also the code written by the former classmate. In fact, the script written here is the same as the one that was not written. The script that occupies the most resources is still introduced in each environment (38 lines). Let’s modify the code block a little and change it into a dynamic loading form vConsole:
After the transformation is completed, the current production status is maintained in the daily and pre-launch environments, and the production environment has dramatically improved:
Before optimization:
Optimized:
It can be found that the time spent in the script is much less.
End of article
This is just a very simple practical record of performance optimization. It mainly records the thinking process, optimization entry point (white screen or interaction) and indicator analysis (network time or frame animation). The code is not written much, but with such There will be countless small optimization points in the thinking process waiting to be discovered and optimized.