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/

测试结果

测试总览

测试明细查看

---

总结

1. waterfall char请求瀑布图（根据瀑布图，查看并定位优化点）
2. first view首次的访问时间
3. 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" ]; then
  echo >&2 'SERVER_URL not set'
  exit 1
fi
if [ -z "$LACATION" ]; then
  echo >&2 'LOCATION not set'
  exit 1
fi
EXTRA_ARGS=""
if [ -n "$NAME" ]; then
  EXTRA_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