技术博客文章总结

常见关键节点

关键时间节点 描述 含义
TTFB time to first byte(首字节时间) 从请求到数据返回第一个字节所消耗时间
TTI Time to Interactive(可交互时间) DOM 树构建完毕，代表可以绑定事件
DCL DOMContentLoaded(DOM 加载完毕) 当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被加载
L onLoad 当依赖的资源全部加载完毕之后才会触发
FP First Paint(首次绘制) 第一个像素点绘制到屏幕的时间
FCP First Contentful Paint(首次内容绘制) 首次绘制任何文本，图像，非空白节点的时间
FMP First Meaningful Paint(首次有意义绘制) 首次有意义绘制是页面可用性的度量标准
LCP Largest Contentful Paint(最大内容渲染) 在 viewport 中最大的页面元素加载的时间
FID First Input Delay(首次输入延迟) 用户首次和页面交互（单击链接，点击按钮等）到页面响应交互的时间

计算重要的时间节点

const {
  fetchStart, // 开始访问
  requestStart, // 请求的开始
  responseStart, // 响应的开始
  responseEnd, // 响应的结束
  domInteractive, // dom可交互的时间点
  domeContentLoadedEventEnd, // dom加载完毕 + domcontentloaded完成的时间的事件（$(function() {})）
  loadEventStart, // 所有资源加载完毕
} = performance.timing

let TTFB = responseStart - requestStart // 首字节返回的事件 -> 可以看服务器的处理能力
let TTI = domInteractive - fetchStart // 整个的一个可交互的时长
let DCL = domeContentLoadedEventEnd - fetchStart // 整个DOM加载完毕
let L = loadEventStart - fetchStart // 所有资源加载完毕

const paint = performance.getEntriesByType('paint')
console.log(paint[0].startTime) // FP 只是画像素而已
console.log(paint[1].startTime) // FCP 有内容才行

// FMP first meaningful paint
new PerformanceObserver((entryList, observer) => {
  console.log(entryList.getEntries()[0])
  observer.disconnect() // 监控完直接结束即可
}).observe({ entryTypes: ['element'] })

// LCP
new PerformanceObserver((entryList, observer) => {
  entryList = entryList.getEntries()
  console.log(entryList[entryList.length - 1])
  observer.disconnect() // 监控完直接结束即可
}).observe({ entryTypes: ['largest-contentful-paint'] })

// FID
new PerformanceObserver((entryList, observer) => {
  let firstInput = entryList.getEntries()[0]
  if (!firstInput) return
  let Fid = firstInput.processingStart - firstInput.startTime
  console.log(Fid)
  observer.disconnect() // 监控完直接结束即可
}).observe({ type: ['first-input'], buffered: true })

// 可以查看多层结构在浏览器
console.dir(obj, { depth: null })

注意：timing 被废弃了，因为是 ms 级别，提供了 PerformanceNavigationTiming[精确到纳秒] const perEntries = window.performance.getEntries()

  • 前端性能采集三种方式：
    1. PerformanceTiming window.performance.timing
    2. PerformanceNavigationTiming window.performance.getEntries()
    3. PerformanceObserver[可以通过 mark 打标记]

网络优化策略

  • 减少 HTTP 请求数量，合并 JS、CSS
  • 合理设置服务端缓存，提高服务器处理速度（强缓存、协商缓存）
  • 避免重定向，重定向会降低响应速度（301、302）
  • 使用 dns-prefetch, 进行 DNS 预解析（淘宝网）
  • 采用域名分片技术，将资源放到不同的域名下。接触同一个域名最多处理 6~8 个 TCP 连接问题
  • 采用 CND 加载加快访问速度
  • gzip 压缩优化，对传输的资源进行体积压缩（html、js、css）
  • 加载数据优先级：preload (预先请求当前页面需要的资源)、prefetch (浏览器空闲时，将来页面中使用的资源) 将数据缓存到 HTTP 缓存中

← 浏览器 Observer →