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. c 越界 数组越界

    int main(int argc, char* argv[]){ int i = 0; int arr[3] = {0}; for(; i<=3; i++){ arr[i] = 0; prin ...

  2. 变量隐藏Accidental Variable Shadowing

    6.5 - Variable shadowing (name hiding) | Learn C++ https://www.learncpp.com/cpp-tutorial/variable-sh ...

  3. 【LinuxShell】wget 命令详解

    参数 待补充 返回值 code means  0  No problems occurred  1  Generic error code  2  Parse error - for instance ...

  4. 【LinuxShell】free 命令详解

    前言 free命令用来显示Linux中的内存使用信息,包括空闲的.已用的物理内存,swap内存,及被内核使用的buffer.在Linux系统监控的工具中,free命令是最经常使用的命令之一. 命令格式 ...

  5. Python学习【第3篇】：列表魔法

    ##########################深灰魔法-list类中提供的方法###################list 类,列表list = [1,12,9,"age" ...

  6. Spring boot 自定义注解标签记录系统访问日志

    package io.renren.common.annotation; import java.lang.annotation.Documented; import java.lang.annota ...

  7. UML——状态图

    状态图(Statechart Diagram),主要用于描述对象在其生命周期中基于事件的动态行为,显示了对象如何根据当前的状态对不同的事件(Events)作出反应(Action).一般我们用状态机来对 ...

  8. IPSec 专题----转自华为文档

    参考链接:https://support.huawei.com/enterprise/zh/doc/EDOC1000122878?section=j004 IPSec 特性全景 1.介绍 由于IP报文 ...

  9. WPF 一种带有多个子集的类ComBox 解决方法

    在最近的工作中遇到很多,类似这种layUI风格的Combox: 因为WPF原本的控件,并不具备这种功能,尝试重写Combox的模板,发现无从下手. 于是尝试从多个控件组合来实现这个功能. 这里使用了P ...

  10. 安装superset

    1.首先去Anaconda官网下载安装脚本 Anaconda3-2019.07-Linux-x86_64.sh 2.上传Anaconda3-2019.07-Linux-x86_64.sh 将Anaco ...