zoukankan      html  css  js  c++  java
  • xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

    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);
    
    

    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  + "
    ");
            }
          })
        });
        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 发布文章使用:只允许注册用户才可以访问!


  • 相关阅读:
    POJ 3114 Tarjan+Dijkstra
    278. First Bad Version
    209. Minimum Size Subarray Sum
    154. Find Minimum in Rotated Sorted Array II
    153. Find Minimum in Rotated Sorted Array
    710. Random Pick with Blacklist
    767. Reorganize String
    524. Longest Word in Dictionary through Deleting
    349. Intersection of Two Arrays
    350. Intersection of Two Arrays II
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/13840517.html
Copyright © 2011-2022 走看看