这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
课堂重点
今天的课是实战前端监控SDK的直播课,老师讲的很不错,同时实战代码质量很高,是之前自学的时候没学到的东西,还需要我去多多理解
理论篇
指标:
FP(First Paint) 首次绘制:标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点.
FCP(First Contentful Paint) 首次内容绘制标记浏览器渲染来自DOM第一位内容的时间点,该内容可能是文本,图像,SVG甚至元素.
LCP(Largest Contentful Paint) 最大内容渲染:代表在viewport中最大的页面元素加载的时间.LCP的数据会通过PerformanceEntry对象记录,每次出现更大的内容渲染,则会产生一个新的PerformanceEntry对象.(2019年11月新增)优点:1.容易理解 2给出与FMP相似的结果 3.容易计算和上报
DCL(DomContentloaded) 当HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,无需等待样式表、图像和子框架的完成加载.
FMP(First Meaningful Paint) 首次有效绘制:例如,在YouTube观看页面上,主视频就是主角元素.看这个csdn的网站不是很明显,这几个都成一个时间线了,截个weibo的看下.下面的示例图可以看到,微博的博文是主要元素.
L(onLoad) 当依赖的资源,全部加载完毕之后才会触发.
TTI(Time to Interactive) 可交互时间:指标用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点.
TBT(Total Blocking Time) 页面阻塞总时长:TBT汇总所有加载过程中阻塞用户操作的时长,在FCP和TTI之间任何long task中阻塞部分都会被汇总
FID(First Input Delay) 首次输入延迟:指标衡量的是从用户首次与您的网站进行交互(即当他们单击链接,点击按钮等)到浏览器实际能够访问之间的时间,下面来张图来解释FID和TTI的区别:
CLS(Cumulative Layout Shift) 累积布局偏移:总结起来就是一个元素初始时和其hidden之间的任何时间如果元素偏移了,则会被计算进去,具体的计算方法可看这篇文章 web.dev/cls/
SI(Speed Index) 指标用于显示页面可见部分的显示速度,单位是时间.
语法:
unhandledrejection:当Promise被reject且没有reject处理器的时候,会触发unhandledrejection事件;这可能发生在window下,但也可能发生在Worker中。这对于调试和为意外情况提供后备错误处理非常有用。
Window: error event :当资源加载失败或无法使用时,会在Window对象触发error事件。例如:script执行时报错。
XMLHttpRequest.open()初始化一个请求。该方法只能在 JavaScript 代码中使用,若要在 native code 中初始化请求,请使用 openRequest()。
XMLHttpRequest.send()发送请求。如果请求是异步的(默认),那么该方法将在请求发送后立即返回。
Document: readystatechange 事件当文档的 readyState 属性发生改变时,会触发 readystatechange 事件。
Navigator.sendBeacon()方法可用于通过 HTTP POST 将少量数据 异步 传输到Web服务器。使用户代理在有机会时异步地向服务器发送数据,同时不会延迟页面的卸载或影响下一导航的载入性能
实战篇
相关链接
Chrome Performance常见名词解释blog.csdn.net/c_kite/arti…