白屏时间、首屏时间

最新推荐文章于 2024-06-04 14:38:05 发布

前端同学

最新推荐文章于 2024-06-04 14:38:05 发布

阅读量1k

点赞数

分类专栏：前端工程前端性能优化文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/weixin_44730897/article/details/125221199

版权

前端性能优化同时被 2 个专栏收录

14 篇文章 3 订阅

订阅专栏

前端工程

3 篇文章 0 订阅

订阅专栏

白屏时间

浏览器显示第一个字符或者元素的时间
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>白屏</title>
  <script type="text/javascript">
    // 不兼容performance.timing 的浏览器，如IE8
    window.pageStartTime = Date.now();
  </script>
  <!-- 页面 CSS 资源 -->
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page.css">
  <script type="text/javascript">
    // 白屏时间结束点
    window.firstPaint = Date.now();
  </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

可使用 Performance API 时

白屏时间 = firstPaint - performance.timing.navigationStart;

可使用 Performance API 时

白屏时间 = firstPaint - pageStartTime;

首屏时间

首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间，dom处于比较稳定的阶段。
对于用户体验来说，首屏时间是用户对一个网站的重要体验因素。通常一个网站，如果首屏时间在5秒以内是比较优秀的，10秒以内是可以接受的，10秒以上就不可容忍了。超过10秒的首屏时间用户会选择刷新页面或立刻离开。
在这里插入图片描述
在 SSR（服务端渲染）的应用中，我们认为html的body渲染完成的时间就是首屏时间。我们通常使用 W3C 标准的Performance对象来计算首屏时间。

Performance经常被用于采集性能数据，因为对象内置了几乎所有常用前端需要的性能参数。

但是随着 Vue和React等前端框盛行, 导致Performance无法准确的监控到页面的首屏时间。因为页面的body是空，浏览器需要先加载js, 然后再通过js来渲染页面内容。那我们使用什么数据来当做首屏时间呢？

总结为一句话，就是SSR使用Dom渲染结束的时间，SPA的项目使用FMP的时间。

前端同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
白屏时间、首屏时间

浏览器显示第一个字符或者元素的时间可使用 Performance API 时白屏时间 = firstPaint - performance.timing.navigationStart;白屏时间 = firstPaint - pageStartTime;首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间，dom处于比较稳定的阶段。对于用户体验来说，首屏时间是用户对一个网站的重要体验因素。通常一个网站，如果首屏时间在5秒以内是比较优秀的，10秒以内是可以接受的，10秒以上就不可容忍了。超过1
复制链接

扫一扫

专栏目录