roads 构筑极致用户体验_农业银行：追求极致的用户体验前端性能关键指标简析...

最新推荐文章于 2022-04-15 16:20:00 发布

亲爱的薄荷绿

最新推荐文章于 2022-04-15 16:20:00 发布

阅读量280

点赞数

文章标签： roads 构筑极致用户体验

本文链接：https://blog.csdn.net/weixin_42165583/article/details/112248723

版权

文/刘家杰张德慧李劭阳

极致的用户体验是Web应用系统开发者永恒的追求。如何量化用户体验值并持续优化前端网页性能是应用开发者常常探讨的话题。根据著名的“2-5-8原则”，随着Web页面加载用时的增加，用户的访问体验也将产生如下变化：

可见前端作为直接与用户交互的界面，其性能优劣对于互联网用户的留存起着至关重要的作用。在移动互联网注意力成本不断提高的今天，任何应用都无法承受用户大量流失的代价。

探讨前端性能，有必要详细解析一下网页在浏览器中的加载流程，以便量化用户体验值，对症下药，找出瓶颈所在。

网页加载流程简析

从用户在浏览器界面上执行一项交互操作(如点击一个页面链接)，到浏览器完成整个页面的加载和渲染，需要历经从客户端到服务端再回到客户端的处理流程，涉及到 O SI 模型 ( 开放式系统互联通信参考模型 ) 的多个层次。由于传输层及以下层次的协议栈已实现较好的封装，以下重点讨论应用层的逻辑。

网页加载流程各步骤带来的性能开销包括：UI交互延迟(卡顿或停滞)、系统资源(CPU、内存、硬盘、电池等)消耗、网络响应时间延迟、网络流量消耗等。 01客户端浏览器构建HTTP请求包含用户交互事件处理、报文组装、 D NS 域名解析、发送请求等操作，如果是 H TTPS 协议还会涉及密钥协商的过程。各操作对性能造成影响如下：

0 2客户端与服务端之间的网络传输传输层使用TCP协议，包含接入层、汇聚层、核心层等。

0 3服务端应用程序构建HTTP响应包含负载均衡、服务端路由、拦截器处理、业务逻辑调用、服务端渲染，报文组装、Gzip压缩、HTTPS加解密等操作。

0 4服务端与客户端之间的网络传输与步骤二类似，不再赘述。 0 5客户端浏览器渲染页面这是最值得前端开发者关注的阶段，包含HTTPS解密、GZip解压、HTML解析、外链资源加载、DOM树构建、CSSOM树构建、Render树构建、布局、绘制、层合并、GPU渲染。

由于HTML的解析顺序是自上而下，且JavaScript以单线程执行，因此页面渲染过程将占用大量的硬件资源，并造成UI响应时间延迟。当用户或者开发者修改了页面DOM(Document Object Model，文档对象模型，定义了访问和操作 HTML 文档的标准方法)元素的尺寸或可见性时，将依次触发重排、重绘、层合并、GPU渲染等流程，因此如何尽量减少重排也是前端优化的重要研究内容。通过以上分析可以得出，前端性能瓶颈可能出现在网络传输过程、服务端响应过程或浏览器渲染过程，影响性能的大部分操作都集中在最后的浏览器渲染过程。因此，前端的性能测试应关注硬件资源占用率、响应时间占用量、网络流量占用量，并重点优化浏览器渲染过程的关键操作步骤。

关键指标

Web应用系统的性能指标，主要是指服务端、网络层、客户端三个层面的效率，以下将介绍各层面的性能指标。0 1

服务端响应效率

包含以下四个时间概念： 1)应用响应时间：应用服务器从接收请求到返回响应所用的时间； 2)SQL执行时间：数据库服务器从接收SQL请求到返回执行结果所用的时间； 3)缓存读/写时间：缓存服务器从接收请求到返回响应所用的时间； 4)外部服务调用时间：外部服务从接收调用请求到返回调用结果所用的时间。

网络层传输效率分为页面级和请求级2个维度：

1)页面级请求数量(Counts)：单个页面内容加载所需要发送的资源请求总数；请求体积(Size)：单个页面所有资源的文件体积，可分为含压缩的体积和解压后的体积。

2)请求级请求状态(Status)：单个请求的状态；请求体积(Size)：单个请求的资源体积，可分为压缩时的体积和解压后的体积； DNS解析时间(DNS Lookup)：客户端从发送域名解析请求到接收解析结果所用的时间； TCP连接等待时间(Stalled)：发送TCP请求前的等待时间。由于浏览器对同一个域名限制了同时发起的TCP连接数量(如Chrome限制为6个)，在发送当前请求时可能需要等待上一个连接释放。 TCP连接建立时间(Initial Connection)：客户端从发送TCP第一次握手请求到完成三次握手所用的时间； SSL协商时间(SSL)：客户端在HTTPS传输协议下与服务端完成SSL密钥协商所用的时间；网络传输时间：单个请求所用的传输时间，可细分为请求发送时间(Request Sent)、响应等待时间(TTFB, Time to First Byte)、响应接收时间(Content Downloaded)；请求时间：单个请求从发送到完成响应接收的总耗时。

各时间指标的关系如下 ：