性能检测及回传

[chenchenyuyu]

一、为什么要做？

原因：

（1）用户对产品页面的感知：

页面进去是白屏、黑屏 按钮点击没有反应 使用的时候很卡 加载太慢 页面直接卡死 （2）测试与研发

测试：我这里为什么这么慢？研发：我这里很快呀？ 测试：我觉得这个打开至多3s ！研发：我不认同！

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

3. 开发者：实现针对性有效优化，提高代码质量

4. 提高产品的竞争力和稳定性

5. 建立标准性能指标衡量产品性能

6. 衡量用户的真实体验

二、什么时候做？

首先，你应该完成了网页的基本功能后再优化。如果你在前期就花时间优化，那么后期有可能没时间做其他功能。

其次，在没有找到性能瓶颈之前，不要优化！不要过早优化或是无用优化

搞清楚一个网页渲染呈现的大概流程，通过性能监控找准性能问题再优化：

DNS 查询 发送请求 等待服务器响应 下载服务器响应内容 解析 HTML、CSS、JS 等 渲染 HTML、CSS、JS 和图片等 响应用户的点击事件等

三、怎么做？

「对症下药」

四、性能要求？

前端基本性能指标	关注理由	实现方案
页面加载时间	这几乎代表了用户等待页面可用的时间
白屏时间	直接影响用户体验，首屏优化等
DOM构建时间	反省下你的 DOM 树嵌套是不是太多了！
解析dom耗时	反省下你的 DOM 树嵌套是不是太多了！
DNS解析时间	DNS 预加载做了么？页面内是不是使用了太多不同的域名导致域名查询的时间太长？
TCP连接时间	TCP 建立连接完成握手的时间
request请求耗时	页面内容经过 gzip 压缩了么，静态资源 css/js 等压缩了么？

业务要求：所有指标为多次测量平均值，上下浮动20%以内均为达标

业务定制性能指标	关注理由	实现方案
首屏加载时间
第一张图加载时间
预测结果加载时间
全部图像加载时间
mpr响应时间
mpr完全加载结束时间
mpr在一个平面内切换中心另两个平面的响应时间
图文报告生成时间

[chenchenyuyu]