Loading scheme of rendering style on the first screen

problem scenario: the recently developed Vue project found that the network is too poor, causing the first screen of the page to go blank for nearly 3 seconds. You want to optimize the first screen rendering problem.
Optimization scheme:
1 reduce code volume
2 pages pre-render
3cdn acceleration
4 first screen style prompt

Scheme 123 shortens the rendering time of the first screen, but it is OK, but the blank time still exists, so scheme 4 is needed.

scenario 4 that I think of now is to add a style to the head tag in the index.html file in the vue project, and delete the style in the main.js of the project .
this method is feasible, but feels a little rough. The desired effect is to omit the deletion operation. The style only works when the first screen rendering time or page content is empty

.

try to run into a problem many times, how to make the CSS selector select elements whose descendants are empty or whose content is empty ?


it is more common to use skeleton screen to solve this problem, and it is easy to find a ready-made solution to refer to
Vue page skeleton screen injection practice

.
Menu