PerformanceObserver API All In One

性能监控

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/PerformanceObserver

const observer = new PerformanceObserver(callback);

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/observe

observer.observe(options);

See the Pen PerformanceObserver API by xgqfrms
(@xgqfrms) on CodePen.

https://codepen.io/xgqfrms/pen/yLJJEWJ?editors=1011

<html>

<head>

  <script>

    var observer = new PerformanceObserver(list => {

      list.getEntries().forEach(entry => {

        // Display each reported measurement on console

        if (console) {

          console.log("Name: "       + entry.name      +

                      ", Type: "     + entry.entryType +

                      ", Start: "    + entry.startTime +

                      ", Duration: " + entry.duration  + "\n");

        }

      })

    });

    observer.observe({entryTypes: ['resource', 'mark', 'measure']});

    performance.mark('registered-observer');

    function clicked(elem) {

      performance.measure('button clicked');

    }

  </script>

</head>

<body>

  <button onclick="clicked(this)">Measure</button>

</body>

</html>

demo

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar



if ("function" === typeof (PerformanceObserver)) {

  var LongTaskObserver = new PerformanceObserver(function(c) {

    var b = c.getEntries();

    for (var a = 0; a < b.length; a++) {

      var d = b[a];

      LUX_al.push(d)

    }

  }

  );

  try {

    LongTaskObserver.observe({

      entryTypes: ["longtask"],

      buffered: true

    })

  } catch (e) {}

}




<script src="https://cdn.speedcurve.com/js/lux.js?id=108906238" async defer crossorigin="anonymous"></script>

<script>

  window.fetch || document.write('<script src="/static/build/js/fetch-polyfill.63fdc379c7eb.js"><\/script>');

</script>

<script>

  // Only include the fat polyfill for browsers that seem to not have

  // certain JS features. E.g. Firefox 38.

  Array.prototype.includes || document.write('<script src="/static/build/js/js-polyfill.6f2e22100487.js"><\/script>');

</script>

performance monitor

性能监控

https://cdn.speedcurve.com/

https://www.xgqfrms.xyz/

<script>

LUX=(function(){var a=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMarks)?LUX.gaMarks:[]);var d=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMeasures)?LUX.gaMeasures:[]);var j="LUX_start";var k=window.performance;var l=("undefined"!==typeof(LUX)&&LUX.ns?LUX.ns:(Date.now?Date.now():+(new Date())));if(k&&k.timing&&k.timing.navigationStart){l=k.timing.navigationStart}function f(){if(k&&k.now){return k.now()}var o=Date.now?Date.now():+(new Date());return o-l}function b(n){if(k){if(k.mark){return k.mark(n)}else{if(k.webkitMark){return k.webkitMark(n)}}}a.push({name:n,entryType:"mark",startTime:f(),duration:0});return}function m(p,t,n){if("undefined"===typeof(t)&&h(j)){t=j}if(k){if(k.measure){if(t){if(n){return k.measure(p,t,n)}else{return k.measure(p,t)}}else{return k.measure(p)}}else{if(k.webkitMeasure){return k.webkitMeasure(p,t,n)}}}var r=0,o=f();if(t){var s=h(t);if(s){r=s.startTime}else{if(k&&k.timing&&k.timing[t]){r=k.timing[t]-k.timing.navigationStart}else{return}}}if(n){var q=h(n);if(q){o=q.startTime}else{if(k&&k.timing&&k.timing[n]){o=k.timing[n]-k.timing.navigationStart}else{return}}}d.push({name:p,entryType:"measure",startTime:r,duration:(o-r)});return}function h(n){return c(n,g())}function c(p,o){for(i=o.length-1;i>=0;i--){var n=o[i];if(p===n.name){return n}}return undefined}function g(){if(k){if(k.getEntriesByType){return k.getEntriesByType("mark")}else{if(k.webkitGetEntriesByType){return k.webkitGetEntriesByType("mark")}}}return a}return{mark:b,measure:m,gaMarks:a,gaMeasures:d}})();LUX.ns=(Date.now?Date.now():+(new Date()));LUX.ac=[];LUX.cmd=function(a){LUX.ac.push(a)};LUX.init=function(){LUX.cmd(["init"])};LUX.send=function(){LUX.cmd(["send"])};LUX.addData=function(a,b){LUX.cmd(["addData",a,b])};LUX_ae=[];window.addEventListener("error",function(a){LUX_ae.push(a)});LUX_al=[];if("function"===typeof(PerformanceObserver)&&"function"===typeof(PerformanceLongTaskTiming)){var LongTaskObserver=new PerformanceObserver(function(c){var b=c.getEntries();for(var a=0;a<b.length;a++){var d=b[a];LUX_al.push(d)}});try{LongTaskObserver.observe({type:["longtask"]})}catch(e){}};

</script>

<script src="https://cdn.speedcurve.com/js/lux.js?id=609659513" async defer crossorigin="anonymous"></script>

refs

https://developers.google.com/web/updates/2016/06/performance-observer

https://www.w3.org/TR/performance-timeline-2/

https://web.dev/custom-metrics/

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

PerformanceObserver API All In One的更多相关文章

  1. IntersectionObserver API

    温馨提示:本文目前仅适用于在 Chrome 51 及以上中浏览. 2016.11.1 追加,Firefox 52 也已经实现. 2016.11.29 追加,Firefox 的人担心目前规范不够稳定,未 ...

  2. Web API 接口-JavaScript全部api接口文档

    当使用JavaScript编写网页代码时,有很多API可以使用.以下是所有对象.类型等接口的列表,你在开发网页应用程序或站点时使用它们. API文档地址:https://developer.mozil ...

  3. 干货来袭-整套完整安全的API接口解决方案

    在各种手机APP泛滥的现在,背后都有同样泛滥的API接口在支撑,其中鱼龙混杂,直接裸奔的WEB API大量存在,安全性令人堪优 在以前WEB API概念没有很普及的时候,都采用自已定义的接口和结构,对 ...

  4. 12306官方火车票Api接口

    2017,现在已进入春运期间,真的是一票难求,深有体会.各种购票抢票软件应运而生,也有购买加速包提高抢票几率,可以理解为变相的黄牛.对于技术人员,虽然写一个抢票软件还是比较难的,但是还是简单看看123 ...

  5. 几个有趣的WEB设备API（二）

    浏览器和设备之间还有很多有趣的接口, 1.屏幕朝向接口 浏览器有两种方法来监听屏幕朝向,看是横屏还是竖屏. (1)使用css媒体查询的方法 /* 竖屏 */ @media screen and (or ...

  6. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  7. JavaScript 对数据处理的5个API

    JavaScript对数据处理包括向上取整.向下取整.四舍五入.固定精度和固定长度5种方式,分别对应ceil,floor,round,toFixed,toPrecision等5个API,本文将对这5个 ...

  8. ES5对Array增强的9个API

    为了更方便的对Array进行操作,ES5规范在Array的原型上新增了9个方法,分别是forEach.filter.map.reduce.reduceRight.some.every.indexOf ...

  9. javascript的api设计原则

    前言 本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块.系卤煮自己总结的一些经验和教训.本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来.很难做到 ...

随机推荐

  1. 时序数据库 Apache-IoTDB 源码解析之元数据索引块（六）

    上一章聊到 TsFile 索引块的详细介绍,以及一个查询所经过的步骤.详情请见: 时序数据库 Apache-IoTDB 源码解析之文件索引块(五) 打一波广告,欢迎大家访问 IoTDB 仓库,求一波 ...

  2. XA Transactions

    XA Transactions XA is a two-phase commit protocol that is natively supported by many databases and t ...

  3. Connection reset by peer的常见原因及解决办法 RST 大文件上传

    Connection reset by peer的常见原因及解决办法 Connection reset by peer的常见原因 - 简书 https://www.jianshu.com/p/263e ...

  4. 【进阶】ZooKeeper 相关概念总结

    1. 开卷有益 学习是一种习惯,只有把这种习惯保持下来,每天不学习一点就感觉浑身不自在,达到这样的境界,那么你成为大佬也就不远了买,正如我们标题所写的"开卷有益".人生匆匆,要想过 ...

  5. mysql8.0.19忘记密码

    1.管理员打开cmd窗口 2.输入net stop mysql,停止mysql服务 3.开启跳过验证密码的mysql服务 用记事本打开 输入skip-grant-tables ,保存 4.管理员打开新 ...

  6. 济南学习D1T1_haha

    [问题描述] 栈是一种强大的数据结构,它的一种特殊功能是对数组进行排序.例如,借助一个栈,依次将数组1,3,2按顺序入栈或出栈,可对其从大到小排序: 1入栈:3入栈:3出栈:2入栈:2出栈:1出栈. ...

  7. 深入理解Java虚拟机读书笔记 -- Java内存区域

    Graal VM: Run Programs Faster Anywhere. 跨语言全栈虚拟机,可以作为"任何语言"的运行平台使用. Java内存结构 程序计数器:线程私有,较小 ...

  8. Python初学者随笔（一）_ 用Python写的第一个游戏“猜数字”

    如标题所写,这篇随笔主要记录下学习Python过程中用Python写的第一个游戏--"猜数字"_跟着"小甲鱼"学Python,链接: https://b23.t ...

  9. PTA 乙 1002

    1002 写出这个数 题目描述 读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式 每个测试输入包含 1 个测试用例,即给出自然数 n 的值.这里保证 n 小于 10^1 ...

  10. CentOS环境下搭建青岛大学OJ

    1.安装必要的依赖sudo yum updatesudo yum -y install epel-releasesudo yum -y install python-pipsudo yum clean ...