性能优化相关

[jangdelong]

1. 当面试官问你如何进行性能优化时，你该这么回答 https://juejin.im/post/6844903569154375693

[jangdelong]

var timing = window.performance.timing
timing.domLoading  //浏览器开始解析 HTML 文档第一批收到的字节
timing.domInteractive  // 浏览器完成解析并且所有 HTML 和 DOM 构建完毕
timing.domContentLoadedEventStart //DOM 解析完成后，网页内资源加载开始的时间
timing.domContentLoadedEventEnd // DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕）
timing.domComplete //网页上所有资源（图片等）下载完成,且准备就绪的时间

/ 计算加载时间
getPerformanceTiming() {
  const t = performance.timing;
  const times = {};
  // 页面加载完成的时间，用户等待页面可用的时间
  times.loadPage = t.loadEventEnd - t.navigationStart;
  // 解析 DOM 树结构的时间
  times.domReady = t.domComplete - t.responseEnd;
  // 重定向的时间
  times.redirect = t.redirectEnd - t.redirectStart;
  // DNS 查询时间
  times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;
  // 读取页面第一个字节的时间
  times.ttfb = t.responseStart - t.navigationStart;
  // 资源请求加载完成的时间
  times.request = t.responseEnd - t.requestStart;
  // 执行 onload 回调函数的时间
  times.loadEvent = t.loadEventEnd - t.loadEventStart;
  // DNS 缓存时间
  times.appcache = t.domainLookupStart - t.fetchStart;
  // 卸载页面的时间
  times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;
  // TCP 建立连接完成握手的时间
  times.connect = t.connectEnd - t.connectStart;
  return times;
}

[jangdelong]

业界前端性能优化方向（仅参考）：

1. 首屏加载时长；

• 路由懒加载；
• 代码分割。

2. DOM加载时长；

有时候js为了不阻塞页面加载设置了defer，但这样往往有时候会影响DOM的加载时长，故而，此项优化方向可以从提高js资源加载的优先级入手，例如主流程js使用rel=preload，非主流程js使用rel=prefetch。

3. 页面白屏时长。

• ssr。

[jangdelong]

谷歌浏览器性能指标Web Vitals，常用工具Lighthouse

1. CLS（Cumulative Layout Shift - 累积布局移位）: CLS 会衡量在网页的整个生命周期内发生的所有意外布局偏移的得分总和。得分是零到任意正数，其中 0 表示无偏移，且数字越大，网页的布局偏移越大。

2. FCP（First Contentful Paint - 首次内容绘制）：FCP 度量从页面开始加载到页面内容的任何部分呈现在屏幕上的时间，页面内容包括文本、图像（包括背景图像）、

3. FID（First Input Delay - 首次输入延迟）：从用户首次与您的网页互动（点击链接、点按按钮，等等）到浏览器响应此次互动之间的用时。这种衡量方案的对象是被用户首次点击的任何互动式元素。

4. LCP（Largest Contentful Paint - 最大内容绘制）：LCP 度量从用户请求网址到在视口中渲染最大可见内容元素所需的时间。最大的元素通常是图片或视频，也可能是大型块级文本元素。

5. TTFB (Time To First Byte - 从服务器接收到第一个字节耗时) TTFB 是发出页面请求到接收到应答数据第一个字节的时间总和，它包含了 DNS 解析时间、 TCP 连接时间、发送 HTTP 请求时间和获得响应消息第一个字节的时间。