html页面渲染页面文案显示时机优化(页面抖动)

我的页面在渲染的时候通过chrom的开发者工具记录下页面渲染的每一帧的变化。可以看到当css还没有下载完时,我页面的上的文案先显示出来了(没有任何样式),当css文件和页面的图片都下载完全后,我的页面才有一个完整的样式。如果在网络比较差的情况下和一些安卓机器上,用户进入页面就会出现闪的情况(先看到我截图中红色标的那个页面)。

目前能够想到的优化方法有两种:

  1. 是在整个页面容器的html标签上添加style=“display:none;”属性,js监听window.onload事件显示容器。
  2. 进入页面加Loading。

但是感觉这种两方法都不是很优雅,而且onload也会对页面的渲染性能有影响。

请问各位大佬有什么更好的优化方法么?

clipboard.png

<!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>
阅读 2.6k
3 个回答

可以参考下手机端知乎页面加载的效果展示?

你的css是怎么引用的,如果是放到<head>下,按理来说,不应该出现这种情况啊?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题