RAIL测量模型

前言

可量化网站性能的测量标准，通过RAIL模型指导性能优化的目标，量化指标。

什么是RAIL

Respose(响应)：网站给用户的响应体验
Animation(动画): 网站加的动效给用户的体验
Idle(空闲): 网站响应时，页面卡顿，主线程繁忙的情况下，要考虑如何加大主线程空闲的时间
Load(加载): 资源加载时，白屏等待时间

RAIL评估标准

Respose(响应)：处理事件应在50ms内完成
Animation(动画)：每10ms产生一帧
Idle(空闲)：尽可能增加空闲时间
Load(加载)：在5s内完成内容加载并可以交互

性能测量工具

1.Chrome DevTools 开发调适、性能评测

image.png

2.Lighthouse网站整体质量评估

安装lighthouse： npm install -g lighthouse
cmd执行命令： lighthouse https://baidu.com
执行命令后会生成html的测试报告存在本地，将报告的地址直接在浏览器中访问即可查看

image.png image.png
image.png

3.WebPageTest 多测试地点、全面性能报告(https://webpagetest.org/)

主要从下面几个要点解读WebPageTest的报告：
1.waterfall chart 请求瀑布图
2.first view 首次访问
3.repeat view 二次访问