性能指标

前端性能检测工具 - Web Vitals

https://github.com/GoogleChrome/web-vitals-extension

web-vitals是Google发起的，旨在提供各种质量信号的统一指南，我们相信这些质量信号对提供出色的网络用户体验至关重要。其可获取三个关键指标（CLS、FID、LCP）和两个辅助指标（FCP、TTFB）

/**
 * @example reportWebVitals(console.log) // 输出到控制台
 */
const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};
export default reportWebVitals;

SSR应用常用时间点计算

window.onload = function() {
  var timing  = performance.timing;
  console.log('准备新页面时间耗时: ' + timing.fetchStart - timing.navigationStart);
  console.log('redirect 重定向耗时: ' + timing.redirectEnd  - timing.redirectStart);
  console.log('Appcache 耗时: ' + timing.domainLookupStart  - timing.fetchStart);
  console.log('unload 前文档耗时: ' + timing.unloadEventEnd - timing.unloadEventStart);
  console.log('DNS 查询耗时: ' + timing.domainLookupEnd - timing.domainLookupStart);
  console.log('TCP连接耗时: ' + timing.connectEnd - timing.connectStart);
  console.log('request请求耗时: ' + timing.responseEnd - timing.requestStart);
  console.log('白屏时间: ' + timing.responseStart - timing.navigationStart);
  console.log('请求完毕至DOM加载: ' + timing.domInteractive - timing.responseEnd);
  console.log('解释dom树耗时: ' + timing.domComplete - timing.domInteractive);
  console.log('从开始至load总耗时: ' + timing.loadEventEnd - timing.navigationStart);
  console.log('首屏时间: ' + timing.domContentLoadedEventStart - timing.navigationStart);
}

preload、prefetch、dns-prefetch、async、defer

使用 Proload/Prefetch 优化你的应用 · Issue #17 · happylindz/blog

**preload优先级是高于prefetch的。**对于 preload 来说，一旦页面关闭了，它就会立即停止 preload 获取资源，而对于 prefetch 资源，即使页面关闭，prefetch 发起的请求仍会进行不会中断。

对于页面上主/首屏脚本，可以直接使用 defer 加载，而对于非首屏脚本/其它资源，可以采用 preload/prefeth 来进行加载。

任何你想要先加载后执行，或者想要提高页面渲染性能的场景都可以使用Preload。

在<head>中写入<link rel="preload" href="some-resource-url" as="xx">（包括用JS创建<link>元素并插入到<head>）
在HTTP头部加上Link: <some-resource-url>; rel=preload; as=xx

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Faster</title>
  
  <!-- 提前解析CSS文件所在域名的DNS -->
  <link rel="dns-prefetch" href="//cdn.com/">

  <!-- 首屏需要用到，下载但不影响解析 -->
  <link rel="preload" href="//js.cdn.com/currentPage-part1.js" as="script">
  <link rel="preload" href="//js.cdn.com/currentPage-part2.js" as="script">
  <link rel="preload" href="//js.cdn.com/currentPage-part3.js" as="script">

  <!-- 非首屏下一页可能用到的资源，网络空闲时提前预下载 -->
  <link rel="prefetch" href="//js.cdn.com/prefetch.js">

  <style type="text/css">
    /* 首页用到的CSS内联 */
    /* 这样可以减少关键回路数和关键资源个数，但增加了关键资源大小，策略 */
  </style>
</head>
<body>

  <script type="text/javascript" src="//js.cdn.com/currentPage-part1.js" defer></script>
  <script type="text/javascript" src="//js.cdn.com/currentPage-part2.js" defer></script>
  <script type="text/javascript" src="//js.cdn.com/currentPage-part3.js" defer></script>
</body>
</html>