# First Screen Rendering Optimization
Optimization of the first screen rendering of the page, the goal is to letHome Rendering Complete(Page.onReady) As early as possible. But in many casesHome Rendering CompleteIt may still be a blank page, so it is more important for users to see the content of the page earlier (First Paint or First Contentful Paint）。
# 1. use[Injection on demand]((ability/lazyload#Injection on demand))and[Time injection]((ability/lazyload#Time injection))
In addition to optimizing the time taken for code injection,Injection on demandandTime injectionIt can also reduce the number of components that need to be initialized, reduce the time consuming of the actual page rendering, and makeHome Rendering CompleteIn advance.
EnableInjection on demandLater, part of the component code injection will be delayed to the front page rendering stage, causing the stage time to increase, but the total time will generally decrease.
# 2. EnableInitial rendering cache
Self-base library version 2.11.1 Mini Program support enabled.Initial rendering cacheAfter opening, it can be opened inNon-firstWhen launched, the visual layer does not need to wait for the logical layer to initialize, but directly shows the page rendering results to the user in advance.Home Rendering CompleteAnd pages are visible to users much earlier.
# 3. Avoid referencing unused custom components
When the page is rendered, initializes the configuration in the current page and the global configuration via usingComponents Reference, and other custom components on which the component depends. Unused custom components can affect rendering time.
When the component is not in use, it should be timely removed from the usingComponents Removed in.
# 4. Streamline First Screen Data
The time taken to render the home page is positively related to the complexity of the page. For complex pages, you can choose to perform progressive rendering, according to the content priority of the page, the key parts of the page can be displayed first, for non-key parts or invisible parts can be delayed update.
In addition, data unrelated to visual layer rendering should be kept out of the Data To avoid affecting page rendering time.
# 5. Advance First Screen Data Request
Many Mini programs need to rely on server-side interface data (such as product lists, etc.) when rendering the home page of the Mini Program may be blank or skeleton screen.
Since network requests take a relatively long time, we recommend that developers use the Page.onLoad Or earlier time to initiate a network request, and should not wait Page.onReady We'll do it later.
In order to further request the timing of the launch in advance, the Mini Program provides developers with the following capabilities:
- Data prepull: When the Mini Program is cold started, the WeChat client can pull the business data from the third-party server through the WeChat background in advance, and the page can be rendered faster when the code package is loaded, reducing the user waiting time.
- Periodic updates: In the case where the user does not open the Mini Program, the data can also be pulled from the server in advance, and the page can be rendered faster when the user opens the Mini Program, reducing the user wait time.
# 6. Cache request data
The Mini Program provideswx.setStorage、wx.getStorageSuch as the ability to read and write to a local cache, where data is stored locally and returned faster than network requests. If for some reason the developer is unable to use data prepull and periodic updates, we recommend first getting data from the cache to render the view and waiting for the network request to return to update.
# 7. Skeleton screen
A skeleton screen is usually used to outline the page through some gray blocks before it is fully rendered, and then replace it with real content after the data is loaded.
It is recommended that developers try to avoid showing blank pages when the page data is not ready (for example, it needs to be obtained through the network), but first show the general structure of the page through the skeleton screen, and request the data to return and then update the page. Increase the user's willingness to wait.
The developer tools provide[Generate skeleton screen]((Devtools /skeleton))The ability to help developers more convenient maintenance skeleton screen.
