H5 performance optimization can be summarized in the following directions:

  • Advance the action on the request timeline
  • Put the request after the timeline is not urgent
  • Provides resources to the page from the nearest location

When discussing the loading performance of H5, there are mainly the following roles:

  • Native container
  • Users (development perspective)
  • Server (Data page)
  • H5 page

This article will summarize some general h5 optimization schemes from the perspective of different roles combined with optimization directions.

Native container optimization

  • Webview pool reduces Webview initialization time by pre-initializing WebViews and reusing WebViews
  • Data prefetch The container provides the data prefetch capability to load data in advance
  • DNS connection container establishes DNS links with the same domain name as the H5 page in advance
  • Offline package You can use the offline package to load the downloaded local resources and display them

H5 In-page optimization

  • Preconnect dnS-pretch, preconnect
  • The resource bundle splits the framework and the business code for unpacking, and the framework layer uses a longer caching strategy to reduce requests from the framework code
  • Page resource loading image lazy loading, lazy route loading, small image inlining
  • Js performs optimization cache calculation results, WebWorker, GPU rendering, long list

Server optimization

  • The front-end side of the API aggregation service can aggregate multiple back-end requests based on a single request, and the back-end end can aggregate data on the Intranet
  • CDN Dr Policy
  • Server rendering can complete the data request assembly and the page HTML streaming back (renderToNodeStream).

The user

  • Function trade-offs Low-end machines give up some features to ensure a smoother page
  • Skeleton screen Use skeleton screen to give the user a better experience when data is not returned
  • The render tree

reference

WebView performance and experience analysis and optimization

Render pages: How browsers work

Compare the rendering scheme of the same layer

Welcome to pay attention to my front public number – front small bench, progress together