[learning notes] possible reasons and optimization methods for white screen on Web pages

Problem description

Page white screen , The details are as follows

The main reason for page white screen is that page rendering is blocked

The reason why rendering is blocked

Probably because CSS Loading is blocked , And then because of CSS stay headb tag , As a result, only after loading CSS, To display the content , However CSS Loading is blocked for some reason , As a result, the following content cannot be rendered , So that the whole page becomes a white screen .
It could be JS Loading is blocked , As a result, the page cannot be parsed . Finally, the whole page becomes white .

Optimization method

The best way to optimize , It must be optimized directly CSS,JS Volume , So as to fundamentally solve the problem of slow loading , Load blocking problem
besides , The tricky way is to put a large volume CSS and JS Put in body Tail end , Then use a small amount for positioning and other basic styles CSS Put it in the head , Make sure that the page will load the basic styles and elements of the page first , Then load JS Of Script Labels can also be added async,defer attribute , send JS The loading of becomes asynchronous , such JS Loading will not block page parsing