前端性能优化检测

前端可用性是从用户的角度出发，检测整个系统的可用性，系统任何一个环节的缺失都会对体验造成影响。

前端可用性现状：

1、页面功能和交互复杂度增加

2、前端功能测试局限性

3、各种前端渲染框架的引入

4、运营线上问题反馈

前端可用性建设意义

1、全面覆盖： 覆盖系统请求、资源、渲染、各种交互环节

2、主动反馈： 主动反馈和发现线上问题

3、优化提升： 优化前端可用性、优化用户体验可用性

前端可用性评估指标

• 关键指标白屏时间6s

前端可用性保障系统设计

可用性系统要求：实时性， 全面性

1. 数据采集：请求异常、资源异常、渲染异常、交互异常。

请求状态吗异常，请求超时，返回数据格式错误。（AJAX监控）

资源加载失败（CDN监控）

渲染异常（DOM检查）

交互异常（JS错误监控）

2. 监控预警：实时监控、阈值报警。

海量数据存储读取、可视化数据展现、多维度数据查询。

设定合理阈值、邮件短信报警

3. 兜底容灾：容错机制、快速降级。

异步渲染机制出错跳转同步页、友好的错误用户提示。

重要机制添加降级开关、迅速（3min内）完成降级

前端可用性优化思路

前端可用性展望

1、提升整体业务故障响应能力

2、智能化分析辅助

3、异常采用机制标准化和通用化

欢迎各位同道关注我的公众号：codefuzi，有更多前端知识，也会持续更新，希望能和大家一起成长