search

JesseZhao1990 / blog

learing summary
MIT License
62 stars 7 forks source link

web页面的静态资源监控 #181

Open JesseZhao1990 opened 2 months ago

JesseZhao1990 commented 2 months ago

一、什么是静态资源

一般指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等方法获取的，怎么用一个通用的方式统计这部分资源的加载性能