1 前言
从网站出现开始, 页面呈现白屏的时长, 还有用户进行交互时的响应快慢程度, 等等情况, 向来都是开发者所关注在意的要点, 这产生的影响很直接, 关乎一个网站能不能给用户的浏览给予舒适的服务, 而这样的一种舒适度, 对用户的吸引力有着直接的关联, 毕竟没有谁能够忍受一个页面出现长达10秒时长的空白状况, 更不用说是在点按按钮之后, 页面长时间都没有任何反应的情形了。
网页的性能在一定程度上对用户留存率产生了影响，研究显示: 要是一个移动端页面的加载时长超出 3 秒, 那么用户就会舍弃浏览。BBC 发觉网页加载时长每增添 1 秒, 用户就会流失 10%。在 2006 年, 曾搞过一个报道, 响应时间每提升 100ms, 他们就会增加 1%的收入。从这里能够看出, 页面性能的重要之处, 然而究竟多迅速才算是快速呢。
有开发者提出来一种用于衡量应用性能的RAIL模型, 它属于一种以用户作为中心的性能模型, 此模型提供了一种有关考虑性能的结构, 该模型把用户体验化解为关键操作, 像点击、滚动、加载等, 还能帮您针对每个操作去定义性能目标。
2 RAIL模型
RAIL 所代表的, 是 web 应用生命周期当中四个方面, 这四个方面各不相同, 分别是: (响应), (动画), Idle（空闲）, Load（加载）。
最为出色的性能指标在于, 对用户输入的回应要在 100 毫秒以内, 动画或者滚动情况下, 每生成一帧需要在 10 毫秒以内, 要将空闲的时间最大化, 此外页面加载的时长不能超过 5 秒。
用户各有不同, 对于RAIL里的每一个, 有着不一样的性能期望, 于是, 性能指标是依据上下文, 以及有关用户怎样感知延迟的用户体验研究去定义的。
2.1 用户感知性能延迟的关键指标
针对性能延迟, 用户的感知存在差异, 这具体是由网络条件以及硬件所决定的。比如说, 借助快速的Wi-Fi连接, 于功能强大的台式机上加载站点时, 一般只需不到1秒的时间, 对此用户已然习以为常。要是通过速度较为缓慢的3G网络连接, 在移动设备上加载站点就会耗费更长的时间, 因而, 移动用户往往会更具耐心。在移动设备方面, 5秒钟内完成加载才是在移动设备上加载站点更现实的目标。
基于上述阐述, 弄清楚了用户究竟是以怎样的方式去切实感觉性能延迟的, 接下来要去介绍的内容是环绕RAIL模型里占据关键地位, 发挥至关重要支撑作用的那些性能指标。
2.2: 用户交互发生后, 应答在100毫秒内完成, 2.3: 一帧要在10毫秒这个时间段当中产生出来。
2.4 Idle：最大限度利用空闲时间
2.5 Load：在5秒内交互内容并实现可交互
一旦页面加载呈现出迟缓的态势, 用户的注意力便会出现分散的状况, 进而他们会认定任务已经处于中断的状态。那些加载速度较快的网站, 具备着更为长久的平均会话时长、较低的跳出率以及更高程度的广告可见性。
优化相关的快速加载性能, 依据用户的设备以及网络能力。当下, 针对首次加载而言, 在移动设备上，若使用速度较为缓慢的 3G 连接, 理想的目标是使其在 5 秒或者更短的时间里面达成可交互。
对于后续加载，理想的目标是在 2 秒内加载页面。
往上, 给出了这般一种围绕用户来构建的性能样式, 具体且细致地把用户体验分割到相关按键操作里头, 涉及像点击、滚动以及加载此类操作, 针对每一种操作自行设定性能方面的目标。
接下来，我们看一下关于每一个web页面的核心指标。
3 核心web指标
在2020年所定义的, 处于核心地位的Web指标阈值, 其目的在于做这样一件事, 即给具备统一性质的指导来针对网络质量指标, 而这些指标对于去提供那种出色的网络用户体验而言是具有至关重要的意义的。
3.1 三大核心指标
3.2 其他指标
以上, 我们介绍了用户性能体验指标, 也介绍了 web 性能核心指标, 那么你有没有想要再多稍微深入了解一下, 一个从输入网址开始到变得可交互的 web 页面的过程呢。
4 web加载全过程
统计从输入url开始, 一直到用户能够使用页面的这一整个过程的时间, 会返回一个对象, 这个对象里的单位全部都是毫秒。
按触发顺序排列所有属性：
注意：开始页面请求
留意: 在此处握手终止, 涵盖安全连接构建完毕, 以及SOCKS权限核准通过。
要留意, 仅仅是这时候DOM树解析已然完成, 但网页内的资源在这时候并没有开始进行加载。
5 各指标计算方式
6 总结
我们在对网站性能予以优化这个进程当中, 发觉这些标准在某些时候要相互抵触较劲。比如说, 一个阈值一直能够达成实现, 和该阈值一直能够带去不错的用户体验, 这两者之间或许会存在着矛盾状况。另外, 由于人类感知方面的研究一般会给出一个具有范围性质的值, 并且用户行为指标又展现出行为的渐进性变化, 我们发现通常不存在唯一的"正确"指标阈值。所以, 我们于优化网站性能之际能够去参考上述范围阈值, 与此同时要认识到不存在一个堪称完美的阈值, 毕竟"完全相信书本反而比不上没有书本"这事, 并且我们有时有可能得从多个具备合理性的候选阈值里着手去进行挑选。我们并非是要去弄清楚, "完美的阈值究竟是多少", 与之相反的是, 我们应当要着重于去认清, "到底是哪一个候选阈值, 是最为符合我们的网站的"。
7 后续
本文站在前端视角, 阐述了关乎用户性能体验的若干种核心指标, 还归纳了对应的标准。与此同时, 从输入网址直至页面全然加载完毕这般的过程, 系统地介绍了一个 web 页面的加载完整流程。然而这仅仅是身为一个开发者, 评估一个页面性能所需的基础理论知识, 后续会尽力给大家呈上一些实际工作里的实践应用, 诸如性能检测的应用方案, 像等工具的实际运用；web 页面性能优化需要了解的一小部分要点。