采集行为
2024年04月30日
一、页面跳转
二、点击行为
三、按键行为
四、发送请求
五、切屏行为
六、资源加载
获取页面中加载的资源信息，比如它们的 url 是什么、加载了多久、是否来自缓存等，最终生成 资源加载瀑布图。瀑布图展现了浏览器为渲染网页而加载的所有的资源，包括加载的顺序和每个资源的加载时间。分析这些资源是如何加载的, 可以帮助我们了解究竟是什么原因拖慢了网页，从而采取对应的措施来提升网页速度。可以通过 performance.getEntriesByType('resource') 获取页面加载的资源列表，同时可以结合 initiatorType 字段来判断资源类型，对资源进行过滤.其中 PerformanceResourceTiming 来分析资源加载的详细数据
// PerformanceResourceTiming 各字段说明
{
connectEnd, // 表示浏览器完成建立与服务器的连接以检索资源之后的时间
connectStart, // 表示浏览器开始建立与服务器的连接以检索资源之前的时间
decodedBodySize, // 表示在删除任何应用的内容编码之后，从*消息主体*的请求（HTTP 或缓存）中接收到的大小（以八位字节为单位）
domainLookupEnd, // 表示浏览器完成资源的域名查找之后的时间
domainLookupStart, // 表示在浏览器立即开始资源的域名查找之前的时间
duration, // 返回一个timestamp，即 responseEnd 和 startTime 属性的差值
encodedBodySize, // 表示在删除任何应用的内容编码之前，从*有效内容主体*的请求（HTTP 或缓存）中接收到的大小（以八位字节为单位）
entryType, // 返回 "resource"
fetchStart, // 表示浏览器即将开始获取资源之前的时间
initiatorType, // 代表启动性能条目的资源的类型，如 PerformanceResourceTiming.initiatorType 中所指定
name, // 返回资源 URL
nextHopProtocol, // 代表用于获取资源的网络协议
redirectEnd, // 表示收到上一次重定向响应的发送最后一个字节时的时间
redirectStart, // 表示上一次重定向开始的时间
requestStart, // 表示浏览器开始向服务器请求资源之前的时间
responseEnd, // 表示在浏览器接收到资源的最后一个字节之后或在传输连接关闭之前（以先到者为准）的时间
responseStart, // 表示浏览器从服务器接收到响应的第一个字节后的时间
secureConnectionStart, // 表示浏览器即将开始握手过程以保护当前连接之前的时间
serverTiming, // 一个 PerformanceServerTiming 数组，包含服务器计时指标的PerformanceServerTiming 条目
startTime, // 表示资源获取开始的时间。该值等效于 PerformanceEntry.fetchStart
transferSize, // 代表所获取资源的大小（以八位字节为单位）。该大小包括响应标头字段以及响应有效内容主体
workerStart; // 如果服务 Worker 线程已经在运行，则返回在分派 FetchEvent 之前的时间戳，如果尚未运行，则返回在启动 Service Worker 线程之前的时间戳。如果服务 Worker 未拦截该资源，则该属性将始终返回 0。
}
获取资源加载时长为 duration 字段，即 responseEnd 与 startTime 的差值。获取加载资源列表:
function getResource() {
if (performance.getEntriesByType) {
const entries = performance.getEntriesByType('resource');
// 过滤掉非静态资源的 fetch、 xmlhttprequest、beacon
let list = entries.filter((entry) => {
return ['fetch', 'xmlhttprequest', 'beacon'].indexOf(entry.initiatorType) === -1;
});
if (list.length) {
list = JSON.parse(JSON.stringify(list));
list.forEach((entry) => {
entry.isCache = isCache(entry);
});
}
return list;
}
}
// 判断资料是否来自缓存
// transferSize为0，说明是从缓存中直接读取的（强制缓存）
// transferSize不为0，但是`encodedBodySize` 字段为 0，说明它走的是协商缓存（`encodedBodySize 表示请求响应数据 body 的大小`）
function isCache(entry) {
return entry.transferSize === 0 || (entry.transferSize !== 0 && entry.encodedBodySize === 0);
}
一个真实的页面中，资源加载大多数是逐步进行的，有些资源本身就做了延迟加载，有些是需要用户发生交互后才会去请求一些资源。如果我们只关注首页资源，可以在 window.onload 事件中去收集。如果要收集所有的资源，需要通过定时器反复地去收集，并且在一轮收集结束后，通过调用 clearResourceTimings 将 performance entries 里的信息清空，避免在下一轮收集时取到重复的资源