文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何有效监测网页静态资源大小?

2024-11-29 23:35

关注

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呢?以及还有很多页面上的资源貌似没有统计到,这是为啥呢?

这是因为页面上的资源请求并不是一次性加载完的,比如一些资源的懒加载,这里就有可能会统计不到,或者资源大小统计会有问题,所以我们需要监听资源的动态加载。

监听资源加载

以上介绍的3个API都无法做到对资源动态加载的监听,这里就需要用到PerformanceObserver来处理动态加载的资源了

PerformanceObserver

PerformanceObserver 主要用于监测性能度量事件,在浏览器的性能时间轴记录新的 performanceEntry 时会被通知。

通过使用 PerformanceObserver() 构造函数我们可以创建并返回一个新的 PerformanceObserver 对象,从而进行性能的监测。

用法

PerformanceObserver 与其它几个 Observer 类似,使用前需要先进行实例化,然后使用 observe 监听相应的事件。

function perf_observer(list, observer) {
  // ...
}
var observer = new PerformanceObserver(perf_observer);
observer.observe({ entryTypes: ["resource"] });

它主要有以下实例方法:

尝试获取页面图片加载信息

new PerformanceObserver((list) => {
  list
    .getEntries()
    .filter(
    (entry) =>
    entry.initiatorType === 'img' || entry.initiatorType === 'css',
  )
    .forEach((entry) => {
    resourceList.push({
      name: entry.name, // 资源名称
      loadTime: `${(entry.duration / 1000).toFixed(3)}s`, // 资源加载时间
      type: entry.initiatorType, // 资源类型
      size: `${(entry.transferSize / 1024).toFixed(0)}kb`, // 资源大小
    })
    console.log('--', resourceList)
  })
}).observe({ entryTypes: ['resource'] })

这里需要注意的是,获取类型除了img还得加上css,因为CSS中可能会有通过url()加载的背景图。

这样,页面上的图片大小以及加载时长一目了然了

通知

我们自己是知道问题了,但是还需要将这些信息推送给产品及运营,这个可以通过企业微信提供的API来进行操作,不满足条件的资源将进行推送通知:

setTimeout(() => {
  axios.get('http://127.0.0.1:3000/jjapi/user/pushMessage', {
    params: {
      msgtype: 'markdown',
      markdown: {
        content: `
          H5项目资源加载异常,请注意查看
          类型:图片资源大小超出限制
          异常数量:${resourceList.length}例 
          异常列表:${resourceList.map(
            (item) => item.name,
          )}`,
      },
    },
  })
}, 8000)

通知如下:

这里为了避免跨域,使用nest自己包了一层,这样就能够及时发现线上配置资源是否有问题,并且这个脚本也不需要所有用户都执行,因为大家的资源都是一样的,只需要配置特定白名单(比如开发、测试、产品),在页面上线后,在进行线上回归的同时执行该脚本去监测上线配置资源是否都合理...

来源:前端南玖内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯