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. Linux系统中的Page cache和Buffer cache

    Linux系统中的Page cache和Buffer cache Linux中有两个很容易混淆的概念,pagecache和buffercache,首先简单将一些Linux系统下内存的分布,使用free ...

  2. CPU飙高，系统性能问题如何排查？

    CPU飙高,系统性能问题如何排查? 原创 雍雍 阿里技术 2020-09-29 https://mp.weixin.qq.com/s/fzLcAkYwKhj-9hgoVkTzaw  

  3. How Interfaces Work in Go

    research!rsc: Go Data Structures: Interfaces https://research.swtch.com/interfaces How Interfaces Wo ...

  4. Fody，告别烦人的INotifyPropertyChanged，最简方式实现通知！

    INotifyPropertyChanged 我不是针对谁,我是说在座的各位 相信所有学wpf的,都写过类似下面的代码: 实现INotifyPropertyChanged public class M ...

  5. P5686 和积和

    写在前面 数学题接触的少,卡了半下午,愣是没想到直接往前缀和上考虑,按元素强推莽了半下午 Description 直接跳转到题目去啊 Solution 记 \(A,B\) 的前缀和序列分别为 \(sA ...

  6. 系列trick - 随机

    系列trick - 随机 不断更新中,欢迎来提供idea 随机的字符串 出现次数 \(\ge 2\) 的子串期望长度是 \(\log n\) 两个随机串的期望LCP,LCSuf,LCSub长度是 \( ...

  7. CNN(Convolutional Neural Network)

    CNN(Convolutional Neural Network) 卷积神经网络(简称CNN)最早可以追溯到20世纪60年代,Hubel等人通过对猫视觉皮层细胞的研究表明,大脑对外界获取的信息由多层的 ...

  8. python基础三---- time模块，函数的定义和调用

    此处重点说明一下: 注意: 1.用例之间不要存在依赖关系,每个用例都可以单独运行 2.用例不要互相调用,需要调用的公共方法可以写成方法去调用 1.等待 (在脚本运行的时候,有些线程之间需要间隔时间,可 ...

  9. react空标签之The React Fragment

    如何使用React.Fragment创建不可见的HTML标签 在研究Ant Design Pro项目中,在登录模块中,有React.Fragment的实际应用 接下来先看一个小demo,将返回值包装在 ...

  10. Prometheus—告警altermanger

    Prometheus-告警altermanger 1.告警altermanger装配 2.告警Mysql 3.Prometheus针对nodes告警规则配置 相关内容原文地址链接: 51CTO:wfw ...