Mobile phone white screen front-end optimization method, more than 5 kinds of

Mobile phone white screen is mainly due to page rendering blocking, resulting in the following reasons:

1:css file loading takes a certain amount of time and the page is blank during loading

Workaround: Use the CSS code in front of or inline with HTML <style>

2. May be waiting for the asynchronous loading of data to render the page results in a white screen, large data load slow, resulting in data not requested to block page rendering

Resolution: Synchronously renders the page when the phone is displayed on the first screen, followed by an asynchronous request to render the page when the page scrolls (sliding)

3. The execution of the first screen JS of the mobile page will block the rendering of the page.

Workaround: Try not to place inline scripts in the first-screen HTML code. i.e.: Do not use <script></script>

Note: The first screen: the user can see the first page, the other pages can be displayed by sliding scroll bar.

Mobile phone white screen front-end optimization method, more than 5 kinds of