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. VirtualBox Guest Additions 下载地址以及简介

    下载者可将以下链接粘贴到浏览器上,根据Vbox的版本找到自己对应的增强. http://download.virtualbox.org/virtualbox/5.0.10/ 虚拟机安装VBoxAddi ...

  2. Maven 依赖机制

    概述 在 Maven 依赖机制的帮助下自动下载所有必需的依赖库,并保持版本升级.让我们看一个案例研究,以了解它是如何工作的.假设你想使用 Log4j 作为项目的日志.这里你要做什么? 传统方式 访问 ...

  3. Hive常用日期格式转换

    固定日期转换成时间戳 select unix_timestamp('2016-08-16','yyyy-MM-dd') --1471276800 select unix_timestamp('2016 ...

  4. e.next = nil // avoid memory leaks e.prev = nil // avoid memory leaks

    /Go/src/container/list/list.go:10

  5. hashlib，configparser，logging

    # hash: 算法, 结果是什么? 是内存地址, # print(hash('123')) # dic = {'name':'alex'} # print(hash('name')) # print ...

  6. C# 实现语音聊天

    一.语音聊天说专业点就是即时语音,是一种基于网络的快速传递语音信息的技术,普遍应用于各类社交软件中,优势主要有以下几点: (1)时效性:视频直播会因为带宽问题有时出现延迟高的问题,而语音直播相对来说会 ...

  7. 不会开发的你也能管理好企业漏洞，开源免费工具：洞察（insight II）

    前言 公司刚开始建设安全管理时,都是从一片混沌开始的,资源总是不够的,我们每个做安全的人员,又要会渗透,又要抓制度,还得管理各种漏洞.在管理楼栋是,我相信大家都遇到过以下几个问题: 漏洞提交太多,自己 ...

  8. Grafana+Prometheus通过node_exporter监控Linux服务器信息

    Grafana+Prometheus通过node_exporter监控Linux服务器信息 一.Grafana+Prometheus通过node_exporter监控Linux服务器信息 1.1nod ...

  9. RESTFul应用分析

    Restful API 近年来应用越来越广泛,各大互联网公司纷纷推出了自己的 Restful API 服务. 本文将从实际应用出发,从 REST 到 Restful 再到 Restful API ,逐 ...

  10. 深信服上网行为管理配置跨三层MAC识别

    1.在认证高级选项里点击新增 如果PC的IP和MAC存在于多个三层交换机,则需新增多个. 点击上图"查看服务器信息"测试能否从交换机获取PC的IP和MAC,有返回结果则能正常获取, ...