前言
可量化网站性能的测量标准,通过RAIL模型指导性能优化的目标,量化指标。
什么是RAIL
Respose(响应):网站给用户的响应体验
Animation(动画): 网站加的动效给用户的体验
Idle(空闲): 网站响应时,页面卡顿,主线程繁忙的情况下,要考虑如何加大主线程空闲的时间
Load(加载): 资源加载时,白屏等待时间
RAIL评估标准
Respose(响应):处理事件应在50ms内完成
Animation(动画):每10ms产生一帧
Idle(空闲):尽可能增加空闲时间
Load(加载):在5s内完成内容加载并可以交互
性能测量工具
1.Chrome DevTools 开发调适、性能评测
![](https://img.haomeiwen.com/i10781774/85c3682a72073aef.png)
2.Lighthouse网站整体质量评估
安装lighthouse: npm install -g lighthouse
cmd执行命令: lighthouse https://baidu.com
执行命令后会生成html的测试报告存在本地,将报告的地址直接在浏览器中访问即可查看
![](https://img.haomeiwen.com/i10781774/ea45b0321f0e3f71.png)
![](https://img.haomeiwen.com/i10781774/916bca4c5d727088.png)
![](https://img.haomeiwen.com/i10781774/2c5fcf6a3f080677.png)
3.WebPageTest 多测试地点、全面性能报告(https://webpagetest.org/)
主要从下面几个要点解读WebPageTest的报告:
1.waterfall chart 请求瀑布图
2.first view 首次访问
3.repeat view 二次访问
网友评论