The phenomenon of

IPad Mini3 enters the background in app, switches back to app, and renders the page again (flash screen)

Troubleshoot problems

  • Compared with the page with few resources, the page with large resources blinks frequently (the probability is very high). The main reason for this is that the WebView itself is limited.
  • Compare Android and ios, found that Android has no problem, ios has. The probable cause is a webview problem on ios
  • Turn on the Safari inspector and you can see on the timeline of the console that full GC is frequently triggered after switching to the background and re-opening the app.

why

Webkit’s drawing mechanism

Webkit draws pages by dividing the structure into layers, which become large tiled layers when they are large enough. This allows WebKit to render layers instead of the entire page every time the page structure changes, which is very important for rendering speed. Webkit allocates a certain size of “back-up memory” for each layer to be cached in memory. This is the context of the drawing layer, from which various effects (animation, 3D transformation, etc.) can be easily implemented.

Ios memory allocation policy

When iOS is out of memory, it has a different reclamation strategy based on uiWebView and WkWebView.

  • If it’s a UIWebView app, when you run out of memory the whole app will crash, that is, flash back.
  • If it is a WkWebView app, the single WkWebView will crash if there is not enough memory. The app is still there, and the page is blank.

The solution

Optimize resource size

Reference documentation

  • App Platform the solution to the problem of blank screen and flash back due to insufficient memory on iOS devices
  • The difference between the Minor, Major, and Full GC
  • Ios Transition Translate Splash Screen Error Summary