写在前面

• 记录 性能监控 方面的学习过程🤔

学习过程

大前端时代前端变化

• Gmail SPA
• Angular/React/Vue MVVM/工程化
• weex/react native 跨端
• Node 全栈

前端变化给监控带来了什么样的改变

• 传统监控模式能否使用于新的技术？比如 PV 统计
  • 导致 PV 下降的原因和解法
  • 原因
    • 业内路由替代了请求新的页面
  • 解法
    • 哈希路由：监听 hash change 变化上报 PV
    • 非哈希路由(Angular): 轻量 hack pushState 和 replaceState
  • 案例
    • 下拉刷新
    • 滚屏分页
    • 阿里云邮后台一直开着，每周上百次查看
    • 未关闭的浏览器 Ta b几小时后再次浏览
    • 查找信息时，浏览器 Tab 之间快速切换
• SPA模式下首屏如何计算？
  • 第一阶段：自定义打点时期
    • 页头和首屏dom处分别通过 new Date() 打点
  • 第二阶段：W3C标准时期
    • Navigaion Timing API
  • 第三阶段：SPA盛行导致w3c标准失去原来的意义
  • 现阶段：用户感官指标FMP
    • FMP：主要内容可见时间
    • 猜想：主要内容 = 元素增量最大的点 （猜想不成立）
      • 什么原因导致猜想不成立？
        • 元素是否可见
        • 每个元素对页面的影响是否等效？ –> 权重
  • 下一阶段：W3C/paint-timing 首屏加载时间计算已经在提案中
• 跨端开发给监控带来什么挑战？
• 前端监控的上报模式在 Node.js 端是否合理？

前端监控的最佳实践

• 主动监控
• 性能样本分布 & 慢会话
  • 慢会话追踪
• 搜索报错明细
• 出错行为还原

阿里云ARMS前端监控系统架构

写在后面

• 祝大家多多发财