<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>
名词解释
- APM:Application Performance Management，应用性能管理
- blank:白屏时间，指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间，blankTime = responseEnd - navigationStart
- fp:First Paint Time, 首次渲染时间,getPaintTime('first-paint')
- fcp:First Contentful Paint Time, 首次内容渲染时间,getPaintTime('first-contentful-paint')
- fmp:First Meaning Pain，Google 定义它为「是否有用？」的时间点，社区中常有这么几种方式进行「相对准确」的计算 FMP，所谓相对准确，是相对于实际项目而言。
- 主动上报：开发者在相应页面的「Meaning」位置上报时间
- 权重计算：根据页面元素，计算权重最高的元素渲染时间
- 趋势计算：在 render 期间，根据 dom 的变化趋势推算 FMP 值
- domready:首次可交互时间,浏览器完成所有 HTML 解析并且完成 DOM 构建，此时浏览器开始加载资源,domreadyTime = domInteractive - navigationStart
- firstscreen:首屏时间，如果页面首屏有图片，首屏时间 = 首屏图片全部加载完毕的时刻 - window.performance.timing.navigationStart
；如果页面首屏没有图片，首屏时间 = 页面处于稳定状态前最后一次 dom 变化的时刻 - window.performance.timing.navigationStart - load:页面完全加载时间，loadTime = 首次渲染时间 + DOM 解析耗时 + 同步 JS 执行 + 资源加载耗时
function getPaintTime(type) {
if (utils.isFunction(performance.getEntriesByType)) {
const paint = performance.getEntriesByType('paint');
if (utils.isArray(paint)) {
const filter = paint.filter(p => {
return p.name === type;
});
if (filter.length === 0) {
return 0;
} else {
return filter[0].startTime;
}
}
}
return 0;
}
需要解决的问题
- 如何获取及展示性能数据，即需要有现状性能大盘，优化后数据提升等数据
- 如何制定性能标准，即性能优化的目标是什么，达到多少可以满足用户的需求
- 众多不达标页面中，如何给出最需要优化的页面，即给出优化完后，见效快的页面
获取性能数据及展示
浏览器获取
以chrome为例，打开开发者模式，可以看到每个请求的网络耗时以及相应的页面耗时
- queue：表示在队列中等待的时间，包括以下时间
- 请求已被渲染引擎推迟，因为该请求的优先级被视为低于关键资源（例如脚本/样式）的优先级。 图像经常发生这种情况。
- 请求已被暂停，以等待将要释放的不可用 TCP 套接字。
- 请求已被暂停，因为在 HTTP 1 上，浏览器仅允许每个源拥有六个 TCP 连接。
- 生成磁盘缓存条目所用的时间（通常非常迅速）
如下图中各个间隙的时间
- stall:请求等待发送所用的时间。 可以是等待 Queueing 中介绍的任何一个原因。 此外，此时间包含代理协商所用的任何时间
- DNS Lookup: 执行 DNS 查询所用的时间。 页面上的每一个新域都需要完整的往返才能执行 DNS 查询。
- Initial Connection:建立连接所用的时间，包括 TCP 握手/重试和协商 SSL 的时间。
- SSL:完成 SSL 握手所用的时间。
- Request Sent:发出网络请求所用的时间。 通常不到一毫秒。
- Waiting (TTFB):等待初始响应所用的时间，也称为至第一字节的时间。此时间将捕捉到服务器往返的延迟时间，以及等待服务器传送响应所用的时间。
- Content Download: 接收响应数据所用的时间
命令行获取耗时时间
- curl获取请求的各个阶段耗时
- time_namelookup: DNS解析时间
- time_connect：tcp建联时间
- time_appconnect：SSL/SSH 等上层协议建立连接的时间，比如 connect/handshake 的时间。
- time_redirect：从开始到最后一个请求事务的时间
- time_pretransfer：从请求开始到开始传输的时间
- time_total：这次请求花费的全部时间
curl -o /dev/null -w 'time_namelookup: %{time_namelookup}\ntime_connect: %{time_connect}\ntime_appconnect: %{time_appconnect}\ntime_redirect: %{time_redirect}\ntime_pretransfer: %{time_pretransfer}\ntime_starttransfer: %{time_starttransfer}\n----------\ntime_total: %{time_total}\n' -s 'http://www.baidu.com'
输出为：
time_namelookup: 0.004559
time_connect: 0.009082
time_appconnect: 0.044093
time_redirect: 0.000000
time_pretransfer: 0.044128
time_starttransfer: 0.050661
----------
time_total: 0.050772
一个美化版本的curl--->httpstat,pip install httpstat
httpstat https://www.baidu.com
Connected to 61.135.169.125:443 from 192.168.1.5:51436
HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
Connection: keep-alive
Content-Length: 2443
Content-Type: text/html
Date: Sat, 18 Jan 2020 06:20:28 GMT
Etag: "588603e6-98b"
Last-Modified: Mon, 23 Jan 2017 13:23:50 GMT
Pragma: no-cache
Server: bfe/1.0.8.18
Set-Cookie: BDORZ=27315; max-age=86400; domain=.baidu.com; path=/
Body stored in: /var/folders/2f/dsc9h45518z77hmfvw2djg2h0000gn/T/tmp8wLyay
DNS Lookup TCP Connection TLS Handshake Server Processing Content Transfer
[ 4ms | 9ms | 27ms | 6ms | 0ms ]
| | | | |
namelookup:4ms | | | |
connect:13ms | | |
pretransfer:40ms | |
starttransfer:46ms |
total:46ms
埋点上报
web端或者客户端埋点上报到APM服务，常用的APM工具有:
如何制定性能标准(仅供参考)
从「用户感知时间长度」可以为用户感知交互做以下分级：
- 立马返回，无任何延时 < 0.2s
- 流畅 0.2s ~ 1.0s
- 可用 1.0s ~ 2.0s
- 丢帧 2.0s ~ 3.0s
- 卡顿 3.0s ~ 5.0s
- 阻塞 > 5.0s，用户可能无法忍受网站，需要给用户一些提示，如正在处理，请稍后。。。；这种场景最好同步转异步，完成后给用户发送消息提示，让用户直接查看结果
因此可以根据自己网站情况制定相应的目标性能，如平均值、50分位值、90分位值等
最需要优化的页面
- 从用户角度看，影响每个用户体验的是页面耗时，如果以N秒为目标值，那么用户在此页面上是U秒，那么用户浪费(N-S)秒的时间，时间越长约需要优化
- 对于整个网站来说，访问量越大（时间Ts内访问量为A次），越需要优化
- 另外每个页面也有重要程度，比如KeyPerson关注度等，因此给定一个系数α;
因此可以粗略给出一个impact值（单位为s），即 impact =))*%CE%B1)
网友评论