web页面的静态资源监控

[JesseZhao1990]

一、什么是静态资源

一般指JS、CSS、字体、图片、视频等资源文件 加载方式包括以下几种方式

1. 通过标签加载。比如script、img、video、link、audio、iframe等
2. 通过css的url()方法加载图片、字体等资源
3. 通过创建实例化的Image、Audio对象
4. 通过前端请求加载，包括 XMLHttpRequest、Fetch、navigator.sendBeacon 等方式

二、怎么监控静态资源的性能

静态资源性能可以通过 performance.getEntriesByType('resource') 方法获取。该方法记录了从页面加载到当前时间点所有静态资源的列表。我们可以从PerformanceResourceTiming对象上获取到所有的关于各阶段时间的信息

三、如果有部分的JS资源是通过Fetch等方法获取的，怎么用一个通用的方式统计这部分资源的加载性能