第 197 题：前端性能优化与监控上报

Question

Chrome 开发团队提出了一系列用于检测网页性能的指标：

1. FP（first-paint），从页面加载开始到第一个像素绘制到屏幕上的时间
2. FCP（first-contentful-paint），从页面加载开始到页面内容的任何部分在屏幕上完成渲染的时间
3. LCP（largest-contentful-paint），从页面加载开始到最大文本块或图像元素在屏幕上完成渲染的时间
4. CLS（layout-shift），从页面加载开始和其生命周期状态变为隐藏期间发生的所有意外布局偏移的累积分数

这四个性能指标都需要通过 PerformanceObserver 来获取（也可以通过 performance.getEntriesByName() 获取，但它不是在事件触发时通知的）。PerformanceObserver 是一个性能监测对象，用于监测性能度量事件。

Answer 1

贴两个地址吧

1. 谷歌：https://developers.google.com/web/fundamentals/
2. 雅虎：https://developer.yahoo.com/performance/rules.html

Answer 2

作为前端工程师，性能优化是最基础、必备的内容，也是最繁琐的内容，如何把这项工作做好喃？本系列开始进入前端性能优化与监控的进阶，主要内容包括但不仅限于：

• 如何认识网站性能
• 性能标准
• 如何衡量一个 Web 页面的性能：性能指标
• 从页面呈现过程看性能瓶颈
• 性能优化策略
  • 常见性能优化方案：35 条军规[雅虎]、Web 开发最佳实践手册[谷歌]等
  • 如何优化加载性能
  • 如何优化渲染性能
  • 实践：首屏秒开、白屏 300ms 和界面流畅优化技巧
• 性能实践
  • 如何排查加载性能问题
  • 如何排查性能渲染问题
• 性能测试工具
• 性能采集与监控实践
  • 性能采集：首屏、白屏卡顿等
  • 性能采集与上报 SDK
  • 从 0 到 1 搭建性能平台
• 探索
  • 前端性能优化未来发展

帮助你从 0 到 1 构建整个前端性能体系

Answer 3

1. 减少HTTP请求
   2.多频操作-防抖节流
2. 服务端渲染
3. 静态资源使用CDN
4. 图片尽量使用 webp icon
5. 减少不必要的重绘和回流
6. 事件委托
7. 合理使用css选择器