问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

前端怎么统计白屏时间，包括后端处理的时间？

头像
tuihou123321
    49118112152

    前端目前能统计到的白屏时间，只能是从Html下载下来才能开始统计
    白屏时间 = endTime - startTime

    <html>
 <head> 
  <script>            var startTime = new Date()                </script> 
  <title>白屏时间</title> 
  <link href="xxxxx" /> 
  <link href="xxxxx" /> 
  <script>            var endTime = new Date()                </script> 
 </head> 
 <body>
  xxxxxx
 </body>
</html>

    真实用户的白屏时间应该是：
    白屏时间= endTime- 用户打开url的时间点（如果是传统的服务端渲染页面，这个返回的时间无法统计在前端的白屏时间内）

    <html>
 <head> 
  <title>白屏时间</title> 
  <link href="xxxxx" /> 
  <link href="xxxxx" /> 
  <script>            var endTime = new Date()                </script> 
 </head> 
 <body>
  xxxxxx
 </body>
</html>
    javascript前端
    阅读 3.1k
    3 个回答
    得票最新
    头像
    普拉斯强
      2.7k1313
      ✓ 已被采纳
      performance.timing.domContentLoadedEventEnd - performance.timing.fetchStart;
      头像
      gentlecoder
        1.2k1113

        使用PerformancePaintTiming

        function showPaintTimings() {
  if (window.performance) {
    let performance = window.performance;
    let performanceEntries = performance.getEntriesByType('paint');
    performanceEntries.forEach( (performanceEntry, i, entries) => {
      console.log("The time to " + performanceEntry.name + " was " + performanceEntry.startTime + " milliseconds.");
    });
  } else {
    console.log('Performance timing isn\'t supported.');
  }
}

        预期结果

        The time to first-paint was 2785.915 milliseconds.
The time to first-contentful-paint was 2787.460 milliseconds.
        头像
        zangeci
          14.8k71731

          Performance API？

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