前端全链路性能优化之 全链路质量监控体系建设

前端全链路性能优化之 全链路质量监控体系建设，主要从前端团队研发，前后端合作，自动化测试及上线，代码质量优化，上线前的即时检测及上线后的性能/错误监控，对线上业务的基调监控，对App 性能和错误监控等方面讲解前端优化。

前端全链路性能优化之 全链路质量监控体系建设

• 6、上线前：如何对 HTML5 的质量做即时检测？
  • 页面错误
    • JS报错
    • 接口报错
    • 线上环境检测
    • 页面白屏
  • 页面性能
    • 页面完全加载时间检测
    • 前端 HTML，JS，CSS，压缩检测
    • 前端大 HTML，JS，CSS，大图检测
    • 前端 JS，CSS 个数检测
    • 服务器 Gzip 压缩
    • 服务器缓存设置检测
  • 页面安全
    • HTTP 和 HTTPS 检测
    • XSS 检测
  • 页面卡口
    • 运营（运营平台）
    • 研发（上线平台）
• 7、上线后：如何进行 HTML5 的性能和错误监控？
  • 页面性能监控
    • JS 错误监控
    • API 接口监控
    • 日志详情
    • 用户轨迹
  • 统计报表
    • 大盘走势
    • 地域
    • 运营商
    • 浏览器
  • 页面管理
  • 性能指标
  • 报警服务
• 8、线上业务：如何进行线上业务的基调监控？
  • 竞品分析
  • 多点监控
  • 告警服务
• 9、发版后：如何进行 App 的性能和错误监控？
  • 网络请求
  • 启动监控
  • 崩溃监控
  • 页面监控
  • 网络监控
  • WebView 监控
  • 报警服务
• 5、代码质量：如何有效提升团队整体的代码质量？
  • 制定代码规范（小组内或者团队内）
  • 静态代码扫描（可以在上线系统里增加流程）
  • CodeReview （高工或者小组内）
  • 阅读框架核心源码（站在巨人肩膀上）
• 4、自动化上线：有哪些方案可供选择？如何部署？ （自动化部署与上线）
  • 拉取代码库代码
  • 自动化工具在线打包编译
  • 代码上先部署至灰度机器
  • 代码上线部署至线上全量机器
  • CDN 后台静态文件更新缓存
• 3、自动化测试：有哪些主流的技术方案？如何选型？ （自动化测试的方式方法）
  • UI 自动化：上手简单，不过稳定性较差，工具有 appium，robot framework， selenium，airtest 等
  • 接口自动化：稳定，性价比非常高，工具有，Java + restassured，Python + requests，JMeter，HttpRunner 等
  • 单元测试：性价比极高，一般由开发完成，但是有一些单元测试框架，比如 Junit5，pytest，unittest。测试这边可以了解，运用到自己的代码中
• 2、协作模式：前端和后端如何开展更高效的合作 （前后端协作模式）
  • 前后端指定数据接口
  • 前端页面制作
  • 前端交互实现
  • 后端开发
  • 前后端联调
  • 前端上线
  • 后端上线
• 1、流程优化：如何优化前端团队的研发流程 （前端研发流程）
  • 技术选型（页面渲染技术和混合式开发技术）
  • 项目初始化（React，Vue，Angular）
  • 依赖模块引入（私有 NPM）
  • 本地开发（自研发前端工具）
  • 项目联调
  • 效果确认（产品，设计师确认）
  • 项目上线（部署系统）