【性能监控】如何有效监测网页静态资源大小？

前言

作为前端人员肯定经常遇到这样的场景：需求刚上线，产品拿着手机来找你，为什么页面打开这么慢呀，心想自己开发的时候也有注意性能问题呀，不可能会这么夸张。那没办法只能排查下是哪一块影响了页面的整体性能，打开浏览器控制台一看，页面上的这些配图每张都非常大，心想这些配图都这么大，页面怎么快，那么我们有没有办法监测页面上的这些静态资源大小，从而避免这种情况的发生。

Performance

Performance 接口可以获取到当前页面中与性能相关的信息。

该对象提供许多属性及方法可以用来测量页面性能，这里介绍几个用来获取PerformanceEntry的方法：

getEntries

该方法获取一组当前页面已经加载的资源PerformanceEntry对象。接收一个可选的参数options进行过滤，options支持的属性有name，entryType，initiatorType。

const entries = window.performance.getEntries();

getEntriesByName

该方法返回一个给定名称和 name 和 type 属性的PerformanceEntry对象数组，name的取值对应到资源数据中的name字段，type取值对应到资源数据中的entryType字段。

const entries = window.performance.getEntriesByName(name, type);

getEntriesByType

该方法返回当前存在于给定类型的性能时间线中的对象PerformanceEntry对象数组。type取值对应到资源数据中的entryType字段。

const entries = window.performance.getEntriesByType(type);

尝试获取静态资源数据

使用getEntriesByType获取指定类型的性能数据，performance entryType中有一个值为resource，用来获取文档中资源的计时信息。该类型包括有：script、link、img、css、xmlhttprequest、beacon、fetch、other等。

const resource = performance.getEntriesByType('resource')
console.log('resource', resource)

这样可以获取到非常多关于资源加载的数据：

为了方便查看，我们来稍微处理下数据

const resourceList = []
const resource = performance.getEntriesByType('resource')
console.log('resource', resource)
resource.forEach((item) => {
  resourceList.push({
    type: item.initiatorType, // 资源类型
    name: item.name, // 资源名称
    loadTime: `${(item.duration / 1000).toFixed(3)}s`, // 资源加载时间
    size: `${(item.transferSize / 1024).toFixed(0)}kb`, // 资源大小
  })
})

这样对于每个资源的类型、名称、加载时长以及大小，都非常清晰

但是有些资源的大小为什么会是0呢？以及还有很多页面上的资源貌似没有统计到，这是为啥呢？