【Web技术】861- 4000字带你了解 Web 前端监控
前端自习课
共 8183字,需浏览 17分钟
· 2021-02-06
前言:为什么需要监控
web 的性能一定程度上影响了用户留存率,Google DoubleClick 研究表明:如果一个移动端页面加载时长超过 3 秒,用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒,用户就会流失 10%。
RAIL
模型来衡量应用性能,即:Response
、Animation
、Idle
、Load
,分别代表着 web 应用生命周期的四个不同方面。并指出最好的性能指标是:100ms 内响应用户输入;动画或者滚动需在 10ms 内产生下一帧;最大化空闲时间;页面加载时长不超过 5 秒。![](https://filescdn.proginn.com/f2ba19d8314d2f2df653e2ba149ade7b/4b02cf3342a393e610ce79f5bd37f0e2.webp)
响应速度:页面初始访问速度 + 交互响应速度 页面稳定性:页面出错率 外部服务调用:网络请求访问速度
1.页面访问速度:白屏、首屏时间、可交互时间
![](https://filescdn.proginn.com/3f1999c5a7dcdc924c2f438622d3c7bc/55929fd6140c5c616290f85addea3858.webp)
![](https://filescdn.proginn.com/e6cfdd6faf2e7aa11bdaae977f5d6e23/398af9f73126d0eb64420fe60fc8071c.webp)
1)first paint (FP) and first contentful paint (FCP)
这两个指标浏览器已经标准化了,从 performance 的
The Paint Timing API
可以获取到,一般来说两个时间相同,但也有情况下两者不同。![](https://filescdn.proginn.com/8b02cdae8e3f2a99fc20b20de539defb/8f365296be988939b3ecbc7b89c07cff.webp)
我们假设当一个网页的 DOM 结构发生剧烈的变化的时候,就是这个网页主要内容出现的时候,那么在这样的一个时间点上,就是首次有意义的渲染。这个指标浏览器还没有规范,毕竟很难统一一个标准来定义网站的主体内容。
first meaningful paint
:https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view![](https://filescdn.proginn.com/d0563b364b8ea47de5b0cfc25b54ddf1/4eb8030465810e6252436abd5f460352.webp)
2.页面稳定性:页面出错情况
资源加载错误 JS 执行报错
3.外部服务调用
CGI 耗时 CGI 成功率 CDN 资源耗时 监控的分类?
合成监控
Lighthouse
、PageSpeed
、WebPageTest
、Pingdom
、PhantomJS
等。Lighthouse
是 google 一个开源的自动化工具,运行 Lighthouse
的方式有两种:一种是作为 Chrome 扩展程序运行;另一种作为命令行工具运行。Chrome 扩展程序提供了一个对用户更友好的界面,方便读取报告。通过命令行工具可以将 Lighthouse 集成到持续集成系统。![](https://filescdn.proginn.com/64ef20832ccc7309be24f0edb1aeb3d2/807702226f7cbe088a424e9949dfbe54.webp)
![](https://filescdn.proginn.com/770496a2b52ecf1d1d41f8d04ce20903/0cd83939134bee6b4af3999e9cf6919d.webp)
![](https://filescdn.proginn.com/56c395b8016cc7014e3baa2811fdc71a/1e50b6048cb06cc18f1374bab828719f.webp)
![](https://filescdn.proginn.com/3eee67c7054ba179a8f0b95d1d39c4f1/042736c7bfe81b21aa8b0d8383de23dd.webp)
合成监控方式的优缺点:
无侵入性。 简单快捷。缺点: 不是真实的用户访问情况,只是模拟的。 没法考虑到登录的情况,对于需要登录的页面就无法监控到。
真实用户监控
FrontJs
、oneapm
、Datadog
等。![](https://filescdn.proginn.com/390769adff2e0ef40a97fab6655a2098/118ceeac09eac6cd74bc6a23c578cf97.webp)
![](https://filescdn.proginn.com/53052b988f730c099b277bd00b5b4412/5b71858ac42b558174e0cd5de84129d6.webp)
是真实用户访问情况。 可以观察历史性能趋势。 有一些额外的功能:报表推送、监控告警等等。缺点: 有侵入性,会一定程度上响应 web 性能。
![](https://filescdn.proginn.com/d4bcc45491eafb6af3bd3d417f3cd189/3aa733bf7c96b4c0589212cbedb195b6.webp)
performance 分析
![](https://filescdn.proginn.com/4877f823a35fc57cd75a7eebfb4648f0/1b3d534a1c128fa0ff4266a8ae287e1b.webp)
基本属性
![](https://filescdn.proginn.com/a59f12b8a3516cd3c45e186e248fdf0a/b9adbc29e076ac309f90586e94e5a8c2.webp)
![](https://filescdn.proginn.com/a0133c964fe75159d7aed54b1c7c7ee8/898ad08b2b197a159be23a9f165a10f2.webp)
![](https://filescdn.proginn.com/1c6ffda965850fd63d62674b72a60309/702f8fb70f3c58534b5cb9870e8122a6.webp)
![](https://filescdn.proginn.com/9a83789dcb8aed2b9f6b85f9f70974ae/1401fcae4bf17e919a9dc243cf3f2463.webp)
![](https://filescdn.proginn.com/e98fe1955118cf099b7fd86f1e4a6ed5/ae5b640c0da82ea4abc45a423d8de00a.webp)
基本方法
performance
实体对象,通过 getEntriesByName
和 getEntriesByType
方法可对所有的 performance
实体对象 进行过滤,返回特定类型的实体。![](https://filescdn.proginn.com/56db4704ba1cf3024eb918e39198fb16/cb76333953bc1f777d07622570dd857f.webp)
performance.getEntriesByName() performance.getEntriesByType() performance.mark() performance.clearMarks() performance.measure() performance.clearMeasures() performance.now() ...
提供的 API
performance.getEntriesByType("navigation");
![](https://filescdn.proginn.com/1a8df770fcdc4d31d0033260190c2081/895e7a0ec08ce61ad884de225f25b767.webp)
![](https://filescdn.proginn.com/5428ef29859c132fd1df9732acb44fc5/b763fbf8b3549e0f6bc85f40538f5003.webp)
重定向次数:performance.navigation.redirectCount 重定向耗时: redirectEnd - redirectStart DNS 解析耗时: domainLookupEnd - domainLookupStart TCP 连接耗时: connectEnd - connectStart SSL 安全连接耗时: connectEnd - secureConnectionStart 网络请求耗时 (TTFB): responseStart - requestStart 数据传输耗时: responseEnd - responseStart DOM 解析耗时: domInteractive - responseEnd 资源加载耗时: loadEventStart - domContentLoadedEventEnd 首包时间: responseStart - domainLookupStart 白屏时间: responseEnd - fetchStart 首次可交互时间: domInteractive - fetchStart DOM Ready 时间: domContentLoadEventEnd - fetchStart 页面完全加载时间: loadEventStart - fetchStart http 头部大小:transferSize - encodedBodySize
performance.getEntriesByType("resource");
// 某类资源的加载时间,可测量图片、js、css、XHR
resourceListEntries.forEach(resource => {
if (resource.initiatorType == 'img') {
console.info(`Time taken to load ${resource.name}: `, resource.responseEnd - resource.startTime);
}
});
总结
let p = window.performance.getEntries();
performance.navigation.redirectCount
p.filter(ele => ele.initiatorType === "script").length
p.filter(ele => ele.initiatorType === "css").length
p.filter(ele => ele.initiatorType === "xmlhttprequest").length
p.filter(ele => ele.initiatorType === "img").length
window.performance.getEntriesByType("resource").length
重定向耗时: redirectEnd - redirectStart DNS 解析耗时: domainLookupEnd - domainLookupStart TCP 连接耗时: connectEnd - connectStart SSL 安全连接耗时: connectEnd - secureConnectionStart 网络请求耗时 (TTFB): responseStart - requestStart HTML 下载耗时:responseEnd - responseStart DOM 解析耗时: domInteractive - responseEnd 资源加载耗时: loadEventStart - domContentLoadedEventEnd
白屏时间: domLoading - fetchStart 粗略首屏时间: loadEventEnd - fetchStart 或者 domInteractive - fetchStart DOM Ready 时间: domContentLoadEventEnd - fetchStart 页面完全加载时间: loadEventStart - fetchStart
const p = window.performance.getEntries();
let cssR = p.filter(ele => ele.initiatorType === "script");
Math.max(...cssR.map((ele) => ele.responseEnd)) - Math.min(...cssR.map((ele) => ele.startTime));
const p = window.performance.getEntries();
let cssR = p.filter(ele => ele.initiatorType === "css");
Math.max(...cssR.map((ele) => ele.responseEnd)) - Math.min(...cssR.map((ele) => ele.startTime));
如何监控?
保证数据的准确性 尽量不影响应用的性能
1.基本性能上报
performance navagation timing
中的所有点都上报,其余的上报内容可参考 performance 分析一节中截取部分上报。例如:白屏时间,JS 和 CSS 总数,以及加载总时长。2.首屏时间计算
performance.getEntries()
拿到的所有图片实体对象,根据图片的初始加载时间和加载完成时间去更新首屏渲染时间。MutationObserver
接口提供了监视对 DOM 树所做更改的能力,是 DOM3 Events 规范的一部分。3.异常上报
1)js error 监听 window.onerror 事件 2)promise reject 的异常 监听 unhandledrejection 事件
window.addEventListener("unhandledrejection", function (event) {
console.warn("WARNING: Unhandled promise rejection. Shame on you! Reason: "
+ event.reason);
});
3)资源加载失败 window.addEventListener('error') 4)网络请求失败 重写 window.XMLHttpRequest 和 window.fetch 捕获请求错误 5)iframe 异常 window.frames[0].onerror 6)window.console.error
4.CGI 上报
本文作者:liu, summerqy
本文链接:http://www.alloyteam.com/2020/01/14184/
回复“加群”与大佬们一起交流学习~
点击“阅读原文”查看 100+ 篇原创文章
评论