Performance analysis of Alipay applet

Above the fold algorithm description

The first screen is the page for the first time rendering full-screen content , which is a key node for calculating T2. To put it simply, during the page loading process, record all the rendered frames, after the page loads, check back each frame, the frame where the image rendering area reaches the maximum value for the first time is recorded as T2

T2 calculation starting point

The time starting point of T2 is PerformanceTiming.naviagtionStart , which is the time when the main HTML document starts to load. The scene of loading the page in WebView is very close to the timing of WebView.loadUrl

T2 starts to record the rendered frame

The time point when T2 starts to record the rendered frame is FirstFullScreenLayout , that is, the layout height is greater than one screen. Before this point in time, there is generally no content displayed on the page, so there is no need to record the rendered frame

Conditions for the end of T2 calculation

Common conditions for ending calculation of T2 are as follows:

• The page exits. For example, the user closes the page
• The page is not visible. For example, the app cuts to the background
• There is user interaction. For example, the user clicks or swipes the page
• T2 calculation time-consuming timeout. The calculation of T2 frame recording should not consume too much time. If the threshold of 50ms is exceeded, the calculation will end, and subsequent frames will not be recorded.
• The number of T2 frames exceeds the threshold. T2 frames cannot be recorded too much, and performance will be lost. If the threshold of 50 frames is exceeded, the calculation will end, and subsequent frames will not be recorded.
• The Window where the WebView is located loses focus. For example, the page has Native pop-ups

It is important to note that the time point at which the calculation of T2 ends is not necessarily the end of time T2, and it is very likely to be different. After the calculation of T2 is completed, a retrospective check is needed to find the frame where the rendering area of the image reaches the maximum value for the first time, and it is recorded as T2

Factors affecting time-consuming

Core time consuming

• The package size is too large: The compressed package including the whole package/main package (sub-package) and the internal bundle file (worker) are too large. The package file will contain some static resources. Relatively speaking, the latter has a greater impact, because each run will have a worker parsing process
• Synchronous api call (my.Sync), blocking execution.

• uc cold start: the uc cold start (init_uc) of the first screen applet on the Alipay homepage will take a high proportion of time, because although the app has already started the uc initialization, it will definitely be too late to complete the initialization when the applet on the homepage is accessed. (If you want to reduce the time-consuming, apply to be kicked out of the Alipay homepage by default).

  • In the core time-consuming phase, uc cold start takes 145% more time than hot start (Ele.me applet).

Business time consuming

• Main link time-consuming: no sign-in, main interface call to page rendering, serial link.
• Insufficient content on the first screen: The main interface data module is insufficient.
• Rendering data volume: the number of setData & too many content, which affects rendering efficiency
• The picture is too large: directly affect the judgment of the first screen full of T2 statistics