PerformanceObserver自动获取首屏时间实现示例

目录
  • 介绍
    • 构造函数
    • 提供的方法
    • 重点我们看看observer.observe(options);
  • 实例
  • 实际使用

介绍

PerformanceObserver 可用于获取性能相关的数据,例如首帧fp首屏fcp首次有意义的绘制 fmp等等。

构造函数

PerformanceObserver() 创建并返回一个新的 PerformanceObserver 对象。

提供的方法

PerformanceObserver.observe()

当记录的性能指标在指定的 entryTypes 之中时,将调用性能观察器的回调函数。

PerformanceObserver.disconnect()

停止性能观察者回调接收到性能指标。

PerformanceObserver.takeRecords()

返回存储在性能观察器中的性能指标的列表,并将其清空。

重点我们看看observer.observe(options);

options

一个只装了单个键值对的对象,该键值对的键名规定为 entryTypes。entryTypes 的取值要求如下:

entryTypes 的值:一个放字符串的数组,字符串的有效值取值在性能条目类型 中有详细列出。如果其中的某个字符串取的值无效,浏览器会自动忽略它。

另:若未传入 options 实参,或传入的 options 实参为空数组,会抛出 TypeError。

实例

<script>
	const observer = new PerformanceObserver((list) => {
		for(const entry of list.getEntries()){
			console.groupCollapsed(entry.name);
			console.log(entry.entryType);
			console.log(entry.startTime);
			console.log(entry.duration);
			console.groupEnd(entry.name);
		}
	})
	observer.observe({entryTypes:['longtask','frame','navigation','resource','mark','measure','paint']});
</script>

获取结果

根据打印结果我们可以推测出来:

entryTypes里的值其实就是我们告诉PerformanceObserver,我们想要获取的某一方面的性能值。例如传入paint,就是说我们想要得到fcp和fp。

所以我们看打印,它打印出来了fp和fcp

这里有必要解释一下什么是fp,fcp,fpm

TTFB:Time To First Byte,首字节时间

FP:First Paint,首次绘制,绘制Body

FCP:First Contentful Paint,首次有内容的绘制,第一个dom元素绘制完成

FMP:First Meaningful Paint,首次有意义的绘制

TTI:Time To Interactive,可交互时间,整个内容渲染完成

不懂?看图!

FP仅有一个div根节点

FCP包含页面的基本框架,但没有数据内容

FMP包含页面的所有元素及数据

Wow!恍然大悟!

实际使用

好了,我们在实际项目中怎么取获取呢?可以看看我的实现参考一下下:

  // 使用 PerformanceObserver 监听 fcp
  if (!!PerformanceObserver){
    try {
      const type = 'paint';
      if ((PerformanceObserver.supportedEntryTypes || []).includes(type)) {
        observer = new PerformanceObserver((entryList)=&gt;{
          for(const entry of entryList.getEntriesByName('first-contentful-paint')){
            const { startTime } = entry;
            console.log('[assets-load-monitor] PerformanceObserver fcp:', startTime);
            // 上报startTime操作
          }
        });
        observer.observe({
          entryTypes: [type],
        });
        return;
      }
    } catch (e) {
      // ios 不支持这种entryTypes,会报错 https://caniuse.com/?search=PerformancePaintTiming
      console.warn('[assets-load-monitor] PerformanceObserver error:', (e || {}).message ? e.message : e);
    }
  }

这里用了判断是否可以使用PerformanceObserver,不能使用的话,我们是用其他方法的,例如MutationObserver,这个我们我们后面再讲。

参考:

https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceObserver/observe

https://www.jb51.net/article/95836.htm

以上就是PerformanceObserver获取首屏时间实现示例的详细内容,更多关于PerformanceObserver首屏时间的资料请关注我们其它相关文章!

(0)

相关推荐

  • JS实现获取时间已经时间与时间戳转换

    目录 获取当前月的第一天 获前取n天日期 根据两个日期,判断相差天数 根据bai两个日期,判断相差月数 获取几个月前的输入日期 时间戳转换时间 时间戳转换时间-无时分秒 时间戳转换时间-无日期 获取当前日期 时间戳转换时间或获取日期工具类 获取当前月的第一天 function getCurrentMonthFirst=()=>{ var date=new Date(); date.setDate(1); return common.getdateNoTime(date); } 获前取n天日期 f

  • js获取最近一周一个月三个月时间的简单示例

    目录 获取近一周时间 获取近一个月时间 获取近三个月时间 New Date()与setDate()参数 总结 获取近一周时间 var end = new Date(); var year = end.getFullYear(); var month = end.getMonth() + 1;//0-11表示1-12月 var day = end.getDate(); var dateObj = {}; dateObj.end = year + '-' + month + '-' + day; i

  • High Performance JavaScript(高性能JavaScript)读书笔记分析

    第一章:加载和执行 浏览器的JavaScript的引擎是编译器层的优化: 当浏览器执行JavaScript代码时,不能同时做其他任何事情(单一进程),意味着<script>标签每次出现都霸道地让页面等带脚本的解析和执行(每个文件必须等到前一个文件下载并执行完成才会开始下载),所以头部的JS和CSS用来渲染页面,交互行为(几乎所有)的JS放在<body>底部: 主流浏览器都允许并行下载JS. 减少外链脚本数量将会改善性能(合并JS) 任何网站都可以使用一个把制定文件合并处理后的URL

  • PerformanceObserver自动获取首屏时间实现示例

    目录 介绍 构造函数 提供的方法 重点我们看看observer.observe(options); 实例 实际使用 介绍 PerformanceObserver 可用于获取性能相关的数据,例如首帧fp.首屏fcp.首次有意义的绘制 fmp等等. 构造函数 PerformanceObserver() 创建并返回一个新的 PerformanceObserver 对象. 提供的方法 PerformanceObserver.observe() 当记录的性能指标在指定的 entryTypes 之中时,将调

  • JS使用百度地图API自动获取地址和经纬度操作示例

    本文实例讲述了JS使用百度地图API自动获取地址和经纬度操作.分享给大家供大家参考,具体如下: 在实际工作中我们经常会遇到这样的问题,但是当我们去看百度API的时候往往又达不到我们的要求. 故此,本篇博文讲述如何使用百度地图API自动获取地址和经纬度: 1.HTML代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

  • JavaScript简单获取系统当前时间完整示例

    本文实例讲述了JavaScript简单获取系统当前时间的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  • Vue SPA首屏加载缓慢问题解决方案

    目录 首屏加载 关于计算首屏时间 加载慢的原因 解决方案 静态资源本地缓存 UI框架按需加载 组件重复打包 图片资源的压缩 开启GZip压缩 使用SSR 首屏加载 首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容 首屏加载可以说是用户体验中最重要的环节 关于计算首屏时间 利用performance.timing提供的数据: 通过DOMContentLoad或者pe

  • 详解如何在webpack中做预渲染降低首屏空白时间

    一.浏览器渲染过程 1.用户打开页面,空白屏,等待html的返回 2.html下载完毕,开始解析html,初始渲染 3.下载css.js等资源,执行js渲染虚拟DOM 4.发起请求.获取数据,渲染内容 下面我们主要是讨论一下如何通过预渲染的方式降低空白屏的时间 缩小首屏载时间是一个重要的优化项,总结来主要有以下几种方式: 1.尽可能的缩小webpack或者其他打包工具生成的包的大小 2.使用服务端渲染的方式 3.使用预渲染的方式 4.使用gzip减小网络传输的流量大小 5.按照页面或者组件分块懒

  • JS实现非首屏图片延迟加载的示例

    目标 减少资源加载可以明显的优化页面加载的速度,所以可以减少页面载入时立即下载的图片的数量,以提高页面加载速度,其他的图片在需要的时候再进行加载. 思路 想要实现以上的目标,有几个地方需要思考. 1.如何判断哪些图片需要立即加载,哪些可以晚些再加载? 2.如何控制图片在指定的时候加载? 对于第一个问题,页面打开就会被用户看到的图片肯定需要立即加载,其他的可以延后.即在视窗中的图片需要立即加载.那么如何判断图片是否在视窗内呢?getBoundingClientRect可以返回元素的大小及其相对于视

  • vue项目首屏加载时间优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目 vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax方案选用 axios,服务器使用Nginx .用到的这些技术都是现在用的比较广泛的,看到这篇文章,我估计你和我用的技术应该差不多. 第一步:webpack-bundle-analyzer 分析

  • Mybatis-plus实现主键自增和自动注入时间的示例代码

    mybatis-plus依赖导入 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.3.2</version> </dependency> 建议使用3.3.0后的版本. 导入mybatis-plus就不用导入mybatis了,冲突! 连接数据库 sp

  • c# 获取照片的经纬度和时间的示例代码

    public List<string> GetXYFromPic(String jpgPath) { List<string> sXY = new List<string>(); try { //载入图片 Image objImage = Image.FromFile(jpgPath); //取得所有的属性(以PropertyId做排序) var propertyItems = objImage.PropertyItems.OrderBy(x => x.Id);

  • react如何用懒加载减少首屏加载时间

    最近在写一个react-ant-admin的集成框架用于快速搭载中后台项目.其中遇到很多问题,最重要的应该是访问速度了.我就想 react 可不可以和 vue 一样用路由懒加载来减少首页渲染所花费的时间. 于是找到了一个很好用的轮子:@loadable/component 使用 安装 npm install @loadable/component -D # or use yarn yarn add @loadable/component -D 如何在路由中使用? 在src/router/inde

随机推荐