北关尔士

https://juejin.cn/post/6916527678807867400

关键指标白屏时间：从浏览器输入地址并回车后到页面开始有内容的时间；首屏时间：从浏览器输入地址并回车后到首屏内容渲染完毕的时间；用户可操作时间节点：domready触发节点，点击事件有反应；总下载时间：window.onload的触发节点。

白屏幕时间计算：chrome.loadingTimes() 我们可以看到 firstPaintTime 这个时间点，是你的页面出现内容后的时间点..如果页面一直白屏的话，firstPaintTime的值是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 白屏时间：responseStart - navigationStart

首屏时间(First Contentful Paint)：是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。

首屏时间 = 首屏内容渲染结束时间点 - 开始请求的时间点

首屏时间：performance.getEntriesByName("first-contentful-paint")[0].startTime - navigationStart

首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间。对于用户体验来说，首屏时间是用户对一个网站的重要体验因素。通常一个网站，如果首屏时间在5秒以内是比较优秀的，10秒以内是可以接受的，10秒以上就不可容忍了。超过10秒的首屏时间用户会选择刷新页面或立刻离开。

DOM ready时间：domContentLoadedEventEnd - navigationStart

白屏和首屏的优化目前白屏常见的优化方案有：

SSR 预渲染骨架屏

优化首屏加载时间的方法： CDN分发（减少传输距离）后端在业务层的缓存静态文件缓存方案前端的资源动态加载减少请求的数量利用好HTTP压缩