3.4 应用的生命周期 App's Lifecycle

Question

说到这个性能优化，是不是任何一毫秒你都必须保证你的应用运行在高效率之下呢？当然不是，这是有策略的。对响应时间要求紧的地方，需要极佳的性能；无关紧要的地方，慢一点无所谓。所谓好钢用在刀刃上。下面，我们就来看看应用有什么生命周期，以及每个部分所需的最慢响应时间是多少。

应用的生命周期，总结起来可以归结为四个部分：RAIL。

一般来说，按时间顺序，会先发生加载（Load） -> 空闲（Idle） -> 用户交互 -> 视觉反馈（Response） -> 结果反馈（Animate）。

• https://speakerdeck.com/paullewis/making-a-silky-smooth-web

Load 加载时间

这是最关键的1秒钟，这一秒里，你需要加载所有的 基本功能、文字、页面样式等。这部分的优化策略，就是我们 3.1 #158 和 3.2 #159 节谈到的 CRP 关键路径优化策略。前面这许多知识和努力都是为了交付这个 1秒 的 Load time。

Idle 空闲时间

这个空闲时间特指 load 加载完成后，用户开始操作之前的这段时间，有50ms 左右。这段时间做什么呢？当然是做预加载。加载一些 不需要1秒里交付、但用户可能接下来就要操作的资源，包括 图片、视频预览、留言等。可见下图。

Response 响应用户交互时间

比如用户点了个按钮、滚动了一下页面，都属于用户交互。用户交互会触发特定事件发生，不过在事件执行中间，结果返回之前，我们需要先给用户一些立刻的反馈。这个反馈需要多快发生呢？100ms。

Animate 渲染时间

这个时间是怎么得来的呢？人眼感知不出卡顿的最低频率是60Hz，就是一秒60次的刷新，那么每次刷新就是 1000 / 60 = 16ms。你的反馈需要在这16秒内完成，其中还要除去浏览器本身的一些调度时间，实际留给你的时间只有 11~12 ms。在这 12 毫秒里，你要完成至少一次 frame 的渲染，也就是从 Recalculate Styles -> Layout -> Paint -> Composite Layers。

后续我们可以看到，这个地方的优化策略就是实打实的代码了。怎么尽量减少触发的渲染阶段，怎么加快每个阶段的 CSS / JS 代码的执行速度，都是生死攸关的因素。