这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
RAIL是一个以用户为中心的性能模型,为思考性能问题提供了一个方法论。模型将用户体验根据关键动作分解到响应、动画、滚动、加载等模块中,帮助开发者为他们每个模块定义性能目标
RAIL是什么？
RAIL代表web应用程序生命周期的四个不同的方面:响应,动画,空闲和负载。用户有不同的性能期望，基于上下文定义性能目标和用户体验研究用户如何感知延迟
- response
- 当用户和页面进行交互式,页面给与用户的响应时间
- 处理事件应在50ms内完成
- animation
- 每10ms 产生一帧
- idle
- 尽可能增加空闲时间
- load
- 在3s之内完成内容加载并可以交互
Response
当用户在页面进行操作交互，页面需要快速的给予用户响应，否则页面响应时间过久，将会导致极差的用户体验，严重会导致用户的流失
例如当用户点击一个按钮进行交互时，时间超过50ms还没有给出响应结果，此时可以给予用户一个loading状态进行响应，告知用户此时页面正在处理当前的交互，而不是页面安静的展示在哪里一动不动
例如用户打开一个弹框，弹框内部的数据需要请求数据完成之后渲染，前端是不能保证用户的网络是否良好，兜底的行为应该是先展示弹框告知用户你的操作是有效的，此时在弹框中给予一个loading状态，提示用户此时正在加载数据请耐心等候
Animation
动画效果在现代浏览器页面中是非常常见且基础的，可以很好增强用户体验
无论是我们在渲染长列表、JS操作DOM还是CSS控制动画，都会提到60桢的概念，也就是每帧的时间控制在大约16.66ms，这样就可以保证我们的动画效果可以跟随浏览器的渲染频率，但是在浏览器的每一次渲染的过程中并不仅仅有处理动画的工作，还会牵扯到大量的其他工作，比如repaint、reflow等，所以为了保证动画的效果请尽量将动画的时间控制的10ms以内，保证可以留出足够的时间给浏览器做其他事情
追求视觉光滑。用户注意到当帧速率不同
Idle
在程序中设计过程中，应该最大化的增加和利用空闲时间，响应用户输入的时间应该控制在50ms以内
用空闲时间来完成延迟的工作。例如,对于初始页面加载,加载尽可能少的数据,然后使用空闲时间来加载
执行工作时间控制在50ms以内。若是超过50ms, 那么将会影响响应用户输入的反馈速度，影响交互体验
比如当用户进入到一个页面，首先先将当前页面的资源进行加载，可以通过埋点等手段判断用户接下来的操作路径，这个时候便可以利用空闲时间进行资源的加载
Load
交付内容和互动在3秒之内完成，若是页面加载缓慢会导致用户的注意力会分散、用户感知任务断了。
优化的快速加载性能相对于用户的设备和网络功能。目前,一个好的目标首先加载加载页面,是互动在5秒或更少的中档和缓慢的3 g连接移动设备
对于随后的加载,一个好的目标是在2秒加载页面
