前端性能测试

前端关注的性能指标有：

1、白屏时间
用户首次看到网页有内容的时间，即第一次渲染流程完成时间。
2、首屏时间：
用户看到第一屏，即整个网页顶部大小为当前窗口的区域，示完整的时间。
3、首资源下载时间
从开始下载到第一个资源均下载完成的时间，不包括页面绘制时间。
4、总资源下载时间
从开始下载到所有资源均下载完成的时间，不包括页面绘制时间。
5、用户可操作时间
从页面开始加载到用户操作可响应的时间。

常见问题：

1、网络：

最常见问题是一系列已被加入队列或已被停止的条目。这表明正在从单个网域检索太多的资源。在 HTTP 1.0/1.1 连接上，Chrome 会将每个主机强制设置为最多六个 TCP 连接。如果您一次请求十二个条目，前六个将开始，而后六个将被加入队列。最初的一半完成后，队列中的第一个条目将开始其请求流程。

2、ttfb长

客户端与服务器之间的网络条件较差，或者 2.服务器应用的响应慢

首先请尽可能缩减网络。理想的情况是将应用托管在本地，然后查看 TTFB 是否仍然很长。如果仍然很长，则需要优化应用的响应速度。可以是优化数据库查询、为特定部分的内容实现缓存，或者修改您的网络服务器配置。很多原因都可能导致后端缓慢。您需要调查您的软件并找出未满足您的性能预算的内容。
如果本地托管后 TTFB 仍然漫长，那么问题出在您的客户端与服务器之间的网络上。很多事情都可以阻止网络遍历。客户端与服务器之间有许多点，每个点都有其自己的连接限制并可能引发问题。测试时间是否缩短的最简单方法是将您的应用置于其他主机上，并查看 TTFB 是否有所改善。
---------------------
作者：weixin_34137799
来源：CSDN
原文：https://blog.csdn.net/weixin_34137799/article/details/87176404
版权声明：本文为博主原创文章，转载请附上博文链接！

 

3、如果您看到 Content Download 阶段花费了大量时间，则提高服务器响应或串联不会有任何帮助。首要的解决办法是减少发送的字节数。

 

参考地址：

https://developers.google.cn/web/tools/chrome-devtools/network/understanding-resource-timing