详尽的数据是做业务决策和性能优化的重要依据
我们将会从以下几个方面来讨论网页性能的相关内容
- 一些基本的概念
- 衡量标准
- 性能测量工具
- 页面性能应该关注的指标
- 什么指标可以直观反映用户的直接感受
- 性能优化的一些举措
- 其他
衡量标准
加载速度
白屏
首屏
TTI 页面可操作
页面下载
DNS查询
TCP连接
ttfb首字节
脚本错误
错误率
性能测量工具
chrome dev tool
lighthouse
webpage test
pageSpeed Insights
应该关注哪些指标
页面访问
pv/uv
页面来源
操作系统
浏览器
低于分布
网络类型
什么指标能准确反映用户的感受
我们的现状是什么
核心指标
Fp 首次渲染时间/白屏时间
Tti 页面可交互时间
dcl DomContentLoaded 完成时间,表示HTML,css解析完成,同步js也执行完成
Load 页面完全加载时间
Error 发生js错误的文件信息
页面渲染是逐步完成的,而且页面解析是按照文档流从上至下解析的,因此一般认为开始解析body的时间点就是页面开始展示的时间
-
-domLoading
fp = domloading - navigationStart
Tti-可交互时间
表示DOM树构建完成
tti = domInteractive - navigationSatrt
Dcl - 文档内容加载完毕
domContentLoaded 触发事件,表示DOM树和cssDom树构建完成,意味可以构建渲染树
dcl = domContentLoadedEventEnd - navigationStart
Load-
页面加载时间
页面完成所有下载,触发onload 事件。也就是 window.onload
load = loadEventSatart - navigationStart
error -js 错误
搜集方式
try catch
promise 的catch
window监听error 事件
error-js 错误
Try catch 无法捕捉异步错误和语法错误
window.onerror 应该写在最前方
Window.onerror 无法捕捉到跨越脚本的错误a详细信息
Promise 错误没有catch方法处理的话,onerror也无能为力,需要额外添加unhandledrejection监听
混淆压缩的文件错误定位的问题
如何上报
前端计算出相应的数据指标后,还需要发送给服务器,由服务器对数据进行分析处理,上报的方式有两种
ajax 发送
通过url 携带参数发送
浏览器
蓝线表示DOMContentLoaded
绿线代表第一次绘制的时间
红线表示load
https://www.cnblogs.com/onflying/archive/2013/04/23/3037789.html
关于性能优化的文章
https://juejin.im/post/5b879e16f265da436d7e543c?utm_source=gold_browser_extension
【参考文章】
Audits 和 Chrome 性能插件
Chrome开发者工具详解-系列(1-5)
https://www.cnblogs.com/charliechu/p/6021141.html