本文主要是介绍02-03RAIL测量模型、webpagetest、Lighthouse-笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1. 什么是RAIL
R: Response响应
请求后很快的被响应
评估标准：处理事件应在50ms以内完成
A:Animation 动画
评估标准： 每10ms产生一帧(再粗略一点：60帧每秒)
I: Idel 空闲
让浏览器有足够的空闲时间【主线程的空闲时间】。
只有有了足够的空闲时间，才能保证快速的响应。
评估标准： 尽可能增加空闲时间
L:Load 加载
资源的加载（的时间）
评估标准： 在5s内完成内容加载并可以交互
内容加载:资源加载、解析、渲染
包括网络原因、地理位置等外部因素也要考虑在内。
2. 性能测量工具
2.1 Chrome DevTools 开发调试、性能评测
2.2 Lighthouse网站整体质量评估
2.3 WebPageTest 多测试地点、全面性能报告
站点地址：https://webpagetest.org/
测试结果
测试总览
测试明细查看
总结
- waterfall char请求瀑布图（根据瀑布图，查看并定位优化点）
- first view首次的访问时间
- repeat view二次访问时间
3. 本地部署webpageTest工具
前提：安装Docker
3.1 镜像拉取
3.2 服务启动
window
# 服务端启动
doker run -d -p 8000:80 webpagetest/server# 客户端访问启动
doker run -d -p 8001:80 --network="host" -e "SERVER_URL=http://localhost:8000:80/work" -e "LOCATION=Test" webpagetest/agent
执行如上两句命令即可
mac
1. 执行服务端/客户端启动命令（同window）
2. 配置docker
* 新建server和client目录
* 在server目录下新建 配置文件Dockerfile、locations.ini
Dockerfile
FROM webpagetest/server
ADD locations.ini /var/wptwww/
locations.ini
[locations]
1=Test_Loc
[Test_Loc]
1=Test
label=Test Location
group=Desktop
[Test]
browser=Chrome,Firefox
label="Test Location"
connectivity=LAN
* 打包server
# 执行如下命令
docker build -t wpt-server .
* 在agent目录下新建 配置文件Dockerfile、script.sh
Dockerfile
FROM webpagetest/agent
ADD script.sh /
ENTRYPOINT /script.sh
script.sh
#!/bin/bash
set -e
if [ -z "$SERVER_URL" ]; thenecho >&2 'SERVER_URL not set'exit 1
fi
if [ -z "$LACATION" ]; thenecho >&2 'LOCATION not set'exit 1
fi
EXTRA_ARGS=""
if [ -n "$NAME" ]; thenEXTRA_ARGS="$EXTRA_AEGS --NAME $NAME"
fi
python /wpt-agent/wptagent.ph --server $SERVER_URL --location $LOCATION $EXTRA_ARGS --xvfb --dockerized -vvvvv --shaper none
* script.sh文件设置权限
chmod u+x script.sh
* 打包agent
# 执行如下命令
docker build -t wpt-agent.
* 停止现在运行的docker实例
# 查询实例
docker ps
# 停止实例
docker stop 实例id1,实例id2.....
* 运行镜像
# 运行server镜像
docker run -d -p 8000:80 wpt-server #(wpt-server是上面自定义的服务名称)# 运行服务端访问镜像
docker run -d -p 8001:80 --network="none" -e "SERVER_URL=http://localhost:8000/work" -e "LOCATION=Test" wpt-agent #(wpt-agent 是上面自定义的服务名称)
* 页面访问
可使用localhost本机访问或者IP地址局域网内访问
4. Lighthouse使用
4.1 安装
# 安装lighthourse
npm install -g lighthouse # 全局安装
4.2 使用(命令行方式)
# lighthouse 网址
# 例如
lighthouse https://youku.com/
执行后会弹出Chrome浏览器分析且成功分析完成后，会提示运行结果保存的文件位置。
4.3 运行结果查看
打开上面执行的结果文件
4.4 chrome自带
4.5 使用调试命令
对于分析报告的结果，有些需要准确定位问题的，可以借助调式命令。
命令调起方式：(F12页面中) ctrl+shift+p
举例说明：
有些资源不确定在首屏是否需要，那就把建议的这些资源全部屏蔽，看是否影响首屏加载(业务有特殊要求的除外)。
- 打开调式命令
- 添加要屏蔽的资源（可使用通配符）
- 刷新页面，查看首屏页面是否有影响。
5. Chrome DevTools 的使用
Network:
开发时可以禁用缓存。
性能测试时需打开，这样才可以对缓存的功能进行测评
Network:
资源压缩后再传输，可节约传输时间。
源文件大小：文件的原本大小。
网络传输的文件大小： 文件从服务端获取的文件的大小。
【服务端对资源进行压缩后再传输，这里网络传输的文件就是压缩的文件】
Network:
网络模式。
可以选择不同的网络模式来测试。
如已经提供的 速度3G(Fast 3G)/慢3G（slow 3G);
还可以自定义网络状态。
Performance
详细了解Chrome DevTools
这篇关于02-03RAIL测量模型、webpagetest、Lighthouse-笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
