学习总结

92 阅读1分钟

一、小程序总包,分包和独立分包:

developers.weixin.qq.com/miniprogram…

二、前端监控SDK的技术要点与原理分析:

juejin.cn/post/701797…

一个完整的前端监控平台包括三个部分:数据采集与上报、数据整理和存储、数据展示。

本文要讲的就是其中的第一个环节——数据采集与上报。下图是本文要讲述内容的大纲,大家可以先大致了解一下:

image.png

image.png

性能数据采集

chrome 开发团队提出了一系列用于检测网页性能的指标:

  • FP(first-paint),从页面加载开始到第一个像素绘制到屏幕上的时间;

  • FCP(first-contentful-paint),从页面加载开始到页面内容的任何部分在屏幕上完成渲染的时间;

  • LCP(largest-contentful-paint),从页面加载开始到最大文本块或图像元素在屏幕上完成渲染的时间;

  • CLS(layout-shift),从页面加载开始和其生命周期状态变为隐藏期间发生的所有意外布局偏移的累积分数。

这四个性能指标都需要通过 PerformanceObserver 来获取(也可以通过 performance.getEntriesByName() 获取,但它不是在事件触发时通知的)。PerformanceObserver 是一个性能监测对象,用于监测性能度量事件。

三、V8浅谈:juejin.cn/post/704102…

四、小程序跳转H5:

<web-view src="{{url}}" wx:if="{{url}}"></web-view>