前端性能优化02_RAIL测量模型

RAIL测量模型

RAIL是google提出的一个量化性能测试的标准，我们通过这个模型就可以指导我们性能优化的目标。我们可以看到许多测试优化的建议，但是始终没有一个量化的结果。我们需要有人告诉我们，我们做什么可以，做到怎样才算好。这个就是RAIL测量模型给我们带来的东西。一些量化的指标。它不光有指导性的作用，并且也是后面优化必备知识点的基础。

什么是RAIL

我们的web出现了已经有二三十年的背景，在过去很长的一段时间里，技术工程师不断的去追求让web网站，web应用变得更快，去进行优化。因为我们始终觉得这个东西它不够快。我们的终极理想是：用户把地址输入到地址栏之后，回车的瞬间网站就可以 出来，但是受限于技术，硬件。但是现在与过去20年相比，我们已经有了飞速的进步，这是为什么现在有很多web的用户，但是用户多，问题也就来了。以前使用web的可能是一些研究机构或者院校的老师，用户群非常的小，如果性能不好，影响的用户群非常的小。但是我们现在的人每天都在使用web，如果性能不好影响就非常的大。这个时候google站出来了，他给大家制定了一个标准，做了一个模型告诉大家应该怎么做，做到什么样子才行性能才算好。这也是google的伟大，一流的公司不仅仅是做技术做产品，他要站出来做标准。（我们不说超越，能跟上脚步，把产品做踏实就oK了）

rail是一个标准，告诉我们做什么，怎么去做

- Response 响应：当用户和网站进行交互的时候，点击按钮，输入内容之后，网站有没有及时给一个反馈。所以这里的响应并不是请求的那个响应，而是网站给用户的一个响应的体验

- Animation 动画：现在网站为了做的好看，炫酷一般会加动画，但是这个动画加的是不是足够的流畅（60帧）

- Idle 空闲：让浏览器有足够的空闲时间。能不能让用户的交互被及时反馈的前提是有足够的空闲时间。有的时候你点击按钮或者其它操作会觉得卡，肯定是因为浏览器的主线程没有空闲，非常的忙。这个时候我就要考虑一下如何加大Idle的时间，不能让主线程总是处于繁忙的状态.
我们可以通过google调试工具的performance这个选项卡，查看一些性能指标
查看主线程情况，每时每刻都在做什么，有没有足够的空闲

- Load 加载：网络加载资源的时间。
用户访问网站的时候，可能就一直看着一个白屏在那里等。初级的前端工程师，可能就觉得我这个网站功能做全了，不报错就已经可以了。但是其实用户和开发人员的出发点是不一样的。需要我们换位思考。一开始访问一个陌生的网站，并不知道网站的内容是什么，最直观的感受是网站加载够不够快，如果特别慢，可能就会觉得这个网站可能不是特别的好。网络不好，我们并不是束手无策的。添加一些小小的交互

RAIL的目标

让良好的用户体验成为性能优化的目标

RAIL评估标准

• 响应：处理事件应在50ms以内完成： google测试发现用户能够接收的最高延迟是100ms，所以用户的交互操作，我们应该在100ms以内进行反馈。有人就会觉得有点矛盾，你说要50ms现在又是100ms
  
  我们说的100ms是用户进行交互，点击事件，输入框等等，一直到网站能给出反馈经历的时间，要在100ms之内，但是我们真正能解决输入事件的时间是没有100ms的。用户输入内容的时候，浏览器需要时间对用户的输入进行处理(input queued)，大约是50ms，保险起见，真正能对事件做出处理的时间只有50ms

• 动画：每10ms产生一帧：人眼流畅的帧数是一秒60帧，大概是16ms一帧。16ms和10ms的差异是什么？浏览器去绘制每一帧其实也需要消耗时间，大概就是6ms左右，所以将这因素考虑进去，那么产生动画保证在一帧10ms

• 空闲：尽可能增加空闲时间：浏览器空闲足够多，当用户的交互来的时候，我们就有足够的时间去进行去处理。再有一点，我们不能让我们的处理时间太长（超过50ms）。前置时间是50ms，处理时间是50ms，那么当用户交互来了，你根本就没有时间处理。你会有一种卡住了的感觉。那是不是我们前端什么都不用做了呢？我要根据情况来决定做什么。
  比如说我为了前端优化做了推迟加载，首次加载完了之后，后面要加载的内容，利用空闲时间慢慢加载过来。这个是OK的。但是一些业务逻辑计算，你放到前端去做，那就是不合理的了，一些大量计算相关的东西我们应该在后台去做。

• 加载：在5s内完成内容加载并可以交互：这个指标是非常高的一个要求，我们这里要分两个层面来看。第一个：你要在5秒内完成内容的加载，解析和渲染。这样才能达到让用户去交互的一个目的。第二个层面：要考虑用户不一定都是在使用电脑，也有可能在使用移动设备，包括他们的网络环境也可能特别的差。那么导致加载收到影响
  我们要是能把这四点做好，网站的优化就已经做到很完美了，但是我们往往在发现问题，解决问题的路上