我的页面在渲染的时候通过chrom的开发者工具记录下页面渲染的每一帧的变化。可以看到当css还没有下载完时,我页面的上的文案先显示出来了(没有任何样式),当css文件和页面的图片都下载完全后,我的页面才有一个完整的样式。如果在网络比较差的情况下和一些安卓机器上,用户进入页面就会出现闪的情况(先看到我截图中红色标的那个页面)。
目前能够想到的优化方法有两种:
- 是在整个页面容器的html标签上添加style=“display:none;”属性,js监听window.onload事件显示容器。
- 进入页面加Loading。
但是感觉这种两方法都不是很优雅,而且onload也会对页面的渲染性能有影响。
请问各位大佬有什么更好的优化方法么?
<!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>
可以参考下手机端知乎页面加载的效果展示?