when my page is rendered, it uses chrom"s developer tool to record the changes of each frame rendered by the page. You can see that when the css has not been downloaded, the copy on my page is displayed first (without any style), and when the css file and the picture of the page are downloaded completely, my page has a complete style. If the network is poor and on some Android machines, users will flash when they enter the page (see the red page in my screenshot first).
there are two optimization methods that can be thought of at present:
- adds the style= "display:none;" attribute to the html tag of the entire page container, and js listens for the window.onload event display container.
- enter the page and add Loading.
but neither of these methods is very elegant, and onload will also have an impact on the rendering performance of the page.
do you have any better optimization methods?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="parent">
<img src="./.jpg" style="width: 100px;height: 100px;">
</div>
</body>
</html>