css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              

<html>
<head>
  <title>淘宝网 - 淘!我喜欢</title>
  <meta charset="utf-8">
  <style>
    .mover {
      background: url("https://www.html5rocks.com/en/tutorials/speed/rendering/particle.png");
      height: 100px;
      width: 100px;
      position: absolute;
    }
  </style>
  <script src="cpu.js"></script>
  <script>
var qqq = new cpu();
  </script>
</head>
<body>
<div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>
  <div class="mover"></div>

</div>

<script>
  // polyfill. See http://paulirish.com/2011/requestanimationframe-for-smart-animating/
  var rAF = (function(){
    return  window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function( callback ){
          window.setTimeout(callback, 1000 / 60);
        };
  })();

  // Set the heights for all these movers in simple CSS style.top
  var movers = document.querySelectorAll('.mover');
  (function init() {
    for(var m = 0; m < movers.length; m++) {
      movers[m].style.top = (m * 20) + 'px';
    }
  })();

  // animation loop
  function update(timestamp) {
    for(var m = 0; m < movers.length; m++) {
//      movers[m].style.left = ((Math.sin(movers[m].offsetTop + timestamp/1000)+1) * 500) + 'px';
      movers[m].style.left = ((Math.sin(m + timestamp/1000)+1) * 500) + 'px';
    }
    rAF(update);
  };
  rAF(update);

  var t = new Date();
  setInterval(function(){
    console.log(new Date() - t);
    t = new Date();
  }, 100);
</script>
</body>
</html>

            
          
!
            
              !function(win){
  var Time_height = 20;
  /**
   * @class 这个是Time的类,用来创建Time对象
   * @param {String} label 一个简单的标识
   * @param {Number} x Time 被创建的横坐标
   * @param {String} color 自定义颜色
   * @param {String} detail Time 的详细信息
   *
   */
  function Time(label,x,color,detail){
    var p = this;
    /*if(Time_height>80+level_num*20){
     Time_height = 100;
     }*/
    if(!color){
      color = '#0f0';
    }
    if(!detail){
      detail = "";
    }
    p.item = document.createElement('div');
    p.item.style.cssText = 'z-index:100001;position:absolute;border-color:#0f0;top:-20px;left:'+x+'px;width:1px;height: '+Time_height+'px;background-color: '+color+';';
    p.labelItem = document.createElement('span');
    p.labelItem.style.cssText = 'position:absolute;top:0px;background-color:rgb(0,0,0);color:'+color+';border:0px 0px 0px 1px solid;border-color:'+color+';';
    p.item.appendChild(p.labelItem);
    p.item.style.left = x+'px';
    p.labelItem.innerHTML = label;
    p.labelItem.title = detail;
    p.left = x;
  }
  /**
   * 让Time跟随曲线运动起来
   */
  Time.prototype.updateTime = function(time){
    var p = this;
    if(!p.item){
      return;
    }
    p.item.time += time;
    var ot = p.item.innerHTML.replace("s","");
    console.log("^^^^^^^^^^^^^^^^^^^^time:"+ot);
    p.item.innerHTML = (Number(ot)+time)+"s";
  };
  //================
  var UI = {
    PANEL_WIDTH:200,//CPU曲线的画布宽度200px
    PANEL_HEIGHT:35,//CPU曲线的画布高度35px
    MAX_NUM:200,//最多在面板里面画多少个点
    //STEP_WIDTH:3,//点之间的x轴距离
    ZOOM:1,//放大多少
    CURRENT_X:0,//当前的x轴坐标
    LAST_X:0,//上一个点的x坐标
    LAST_Y:0,//上一个点的y坐标
    point_list:[],//记录各个点的坐标,最多记录只够画布填满的N个点
    point_line:[],//记录所有的点
    DELAY:100,//每隔100ms触发画点逻辑
    canvasDom:null,
    canvas:null,
    container:null,//CPU曲线主容器
    hasInit:false,//只初始化一遍
    debugMode :false,//是否为调试模式,是的画会显示cpu曲线
    isPause: false,//是不是被暂停了
    init:function(){
      var p = UI;
      p.debugMode = true;

      if(p.debugMode&&!p.canvas){
        //p.ZOOM = 2;//window.CPU_DEBUGGER_ZOOM;
        p.PANEL_WIDTH*=p.ZOOM;
        p.PANEL_HEIGHT*=p.ZOOM;
        p.STEP_WIDTH = p.PANEL_WIDTH/p.MAX_NUM;
        p.LAST_Y = p.PANEL_HEIGHT;
        p.initContainer();
      }



      if(p.hasInit){
        return;
      }

      p.hasInit = true;
    },
    draw:function(per){
      var p = UI;
      if(p.isPause){
        return;
      }
      if(p.debugMode){//可视化

        if(p.point_list.length==p.MAX_NUM){
          p.point_list=[];
          p.CURRENT_X = 0;
          p.LAST_X = 0;
          p.canvas.fillRect(0, 0, p.PANEL_WIDTH, p.PANEL_HEIGHT);
        }

        var y =p.PANEL_HEIGHT-(per*p.PANEL_HEIGHT),x = p.CURRENT_X+p.STEP_WIDTH;
        p.Drawer.PercentNum.show(Math.round(per*100));
        p.Drawer.drawPoint(x,y);
        p.point_list.push([x,y]);

      }
    },
    initContainer:function(){
      var c = document.createElement("DIV");
      c.id = "cpu_container";
      document.body.appendChild(c);
      c.style.cssText = "position:fixed;left:0px;top:0px;z-index:99999;cursor:pointer;opacity:0.8;";
      var c1 = document.createElement("DIV");
      c1.id = "cpujs_monitor_ui_accessory_container";
      c.appendChild(c1);
      UI.container = c1;
    },
    Drawer:{
      initCanvas:function(){
        var p =UI;
        p.canvasDom = document.createElement("CANVAS");
        if(p.canvasDom&&typeof(p.canvasDom.getContext)=="function"){
          p.canvasDom.id = "cpujs_monitor_ui_canvas";
          p.canvasDom.width = p.PANEL_WIDTH;
          p.canvasDom.height = p.PANEL_HEIGHT;
          p.container.appendChild(p.canvasDom);
          p.canvas = p.canvasDom.getContext("2d");
          var c = p.canvas;
          c.fillStyle = "rgb(0,0,0)";
          c.lineWidth = p.ZOOM;
          c.lineCap = "round";
          c.lineJoin = "round";
          c.fillRect(0, 0, p.PANEL_WIDTH, p.PANEL_HEIGHT);
          c.beginPath();
          c.strokeStyle = "rgb(0,255,0)";
          c.stroke();
          p.Drawer.PercentNum.init();
          return true;
        }
        return false;
      },
      /**
       * 从上一个点把线连到一个新的点(x,y)是这个点的坐标
       */
      drawPoint:function(x,y){
        var p = UI,c = p.canvas;
        var g = c.createLinearGradient(0,0,0,p.PANEL_HEIGHT);
        g.addColorStop(0,'rgb(255,0,0)');
        g.addColorStop(0.6, "#FFFF00");
        g.addColorStop(1,'rgb(0,255,0)');
        c.strokeStyle = g;
        c.beginPath();
        c.moveTo(p.LAST_X,p.LAST_Y);
        c.lineTo(x,y);
        p.CURRENT_X =x;
        p.LAST_X = x;
        p.LAST_Y = y;
        c.stroke();
      },
      /**
       * 一次性将所有的线给绘制出来,方便实现曲线的平移
       */
      drawLine:function(){
        var p = UI,po;
        p.canvas.fillRect(0, 0, p.PANEL_WIDTH, p.PANEL_HEIGHT);
        for(var i=0,len=p.point_list.length;i<len;i++){
          po = p.point_list[i];
          UI.Drawer.drawPoint(po[0],po[1]);
          po[0]-=p.STEP_WIDTH;
        }
      },
      /**
       * cpu曲线的百分比数字
       */
      PercentNum:{
        PANEL_WIDTH:68,
        PANEL_HEIGHT:35,
        canvasDom:null,
        canvas:null,
        init:function(){
          var p = UI.Drawer.PercentNum;
          p.PANEL_WIDTH*=UI.ZOOM;
          p.PANEL_HEIGHT*=UI.ZOOM;
          p.canvasDom = document.createElement("CANVAS");
          if(p.canvasDom&&typeof(p.canvasDom.getContext)=="function"){
            p.canvasDom.id = "cpujs_monitor_ui_canvas_per_num";
            p.canvasDom.style.cssText = "left:"+UI.PANEL_WIDTH+"px;top:0px;";
            p.canvasDom.width = p.PANEL_WIDTH;
            p.canvasDom.height = p.PANEL_HEIGHT;
            UI.container.appendChild(p.canvasDom);
            p.canvas = p.canvasDom.getContext("2d");
            var c = p.canvas;
            c.fillStyle = "rgb(0,0,0)";
            c.lineWidth = p.ZOOM;
            c.lineCap = "round";
            c.lineJoin = "round";
            c.fillRect(0, 0, p.PANEL_WIDTH, p.PANEL_HEIGHT);
            c.beginPath();
            c.stroke();
            var fontSize = "32",
              fontWeight = "normal",
              fontStyle = "normal",
              fontFace="arial";
            c.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;
            c.fillStyle = "#ff0000";
            c.textBaseLine = "middle";
            c.textAlign = "center";
            //c.fillText("abc",0,0);
            return true;
          }
          return false;
        },
        clear:function(){
          var p = UI.Drawer.PercentNum;
          p.canvas.fillStyle = "rgb(0,0,0)";
          p.canvas.fillRect(0, 0, p.PANEL_WIDTH, p.PANEL_HEIGHT);
        },
        show:function(num){
          var p = UI.Drawer.PercentNum;
          p.clear();
          p.canvas.fillStyle = "#00ff00";
          if(num>25){
            p.canvas.fillStyle = "#FFFF00";
          }
          if(num>50){
            p.canvas.fillStyle = "#FF6600";
          }
          if(num>80){
            p.canvas.fillStyle = "#FF0000";
          }
          p.canvas.fillText(num+"%",p.PANEL_WIDTH/2,p.PANEL_HEIGHT/2+10);
        }
      }
    },
    bootstrap: function(){
      UI.init();
      UI.Drawer.initCanvas();
    }
  };
  //=============
  function cpu(){
    this.conf = {
      log: false,
      consoleUI: false,
      delay: 100,
      stat: true,
      ui: true
    };


    this.log('start'); //log

    this.run();//Monitor开始工作
    this._lastTime = this.now();
    this.data = {
      timeArray: [],
      per_line: [],//记录每个点对应的cpu开销
      time_line: [],//没个点的时间坐标记录下来
      size_line: [],//记录每个店对应的cpu开销面积
      averageTime: this.conf.delay,//如果cpu一直是0%,那就是200ms打一个点
      totalSize: 0,//从启动到现在累计的总开销
      dataArray: [],
      timeArray: []
    };

    this.log('end'); //log
  }


  cpu.prototype.run = function() {
    var per;
    var self = this;


    if(self.conf.ui) {
      self._ui = UI;
      self._ui.bootstrap();
    }

    window.addEventListener && window.addEventListener("touchmove", function(){
      self.resumeFlag = true;
    }, false);

    window.addEventListener && window.addEventListener("blur", function(){
      console.log('blur');
      self.resumeFlag = true;
    }, false);

    this._timerID = setTimeout(function() {
      console.log('blur2');
      if (self.isPause) {
        return;
      }
      self.currentTime = self.now();
      per = ((self.currentTime - self._lastTime) - self.conf.delay - 0) / self.conf.delay;
      if (per < 0) {
        per = 0;
      }
      if (per > 1) {
        per = 1;
      }
      self._lastTime = self.currentTime;
      var stepPer = self.getStepPer(self.now(), per);
      var n = Math.floor(stepPer / 0.5) + 1;
      n = n > 200 ? 200 : n;
      //避免长时间的暂停跟真正的卡住搞混,所以要打一个标记
      if (self.resumeFlag) {
        self.resumeFlag = false;
      } else {
        //0.5是因为CPU开销达到50%时从时间延时上来看是CPU0%时的1.5倍
        for (var i = 0; i < n; i++) {//当出现卡的时候会根据实际延时来考虑一次性多打几个点,这里只是假设每次实际超过100%时它前一个点都是100%,这样来适当补画多几个100%的点,来避免实际面积误差太大。但这里的算法只是采取粗略的拟补,目的是为了cpu曲线画起来点之间的步长一致,总体看起来更协调,而减少了这里的精度。
          self.logPercent(per);//打点
        }
      }

      self._timerID = setTimeout(arguments.callee, self.conf.delay);
    }, self.conf.delay);
  };
  //获取当前时间
  cpu.prototype.now = function(){
    if(performance && performance.now){
      return performance.now();
    }
    if (Date && "function" == typeof(Date.now)) {
      return Date.now();//这个接口ie9及以上的浏览器才有,效率是new Date()3.5倍多
    } else {
      return function() {
        return new Date();
      }
    }
  };
  cpu.prototype.log = function(s) {
    if (!this.conf.log) {
      return;
    }
    if (win.console && win.console.log) {
      win.console.log("### CPU Log:" + s);
    }
  };
  /**
   * 计算当前的实际百分比,然后限制在最高100%的时候需要补画多少个点,确保面积不受影响
   * @param {Number} time 当前这个点的时间
   * @param {Number} per  当前的CPU百分比
   */
  cpu.prototype.getStepPer = function(time, per){
    var p = this.data;
    p.time_line.push(time);
    var cd;
    p.per_line.push(per);
    var len = p.time_line.length;
    if (p.time_line.length == 1) {
      cd = p.averageTime;
    } else {
      cd = time - p.time_line[len - 2];
    }
    if (cd < p.averageTime) {
      cd = p.averageTime;
    }
    var _stepPer = (cd - p.averageTime) / p.averageTime;
    if (len >= 2) {
      p.totalSize += ((p.per_line[len - 1] + p.per_line[len - 2]) * (p.time_line[len - 1] - p.time_line[len - 2]) / 2);
      p.size_line.push(p.totalSize);
    } else {
      p.size_line.push(0);
    }
    if (p.per_line.length > 2) {//省内存,最多保存两个值
      p.per_line.shift();
      p.time_line.shift();
    }
    return _stepPer;
  };
  cpu.prototype.drawUIByConsole = function(per) {
    var n = Math.round(per * 10), s = "▆";
    for (var i = n; i--;) {
      s += "▆";
    }
    s += Math.round(per * 100);
    this.log(s);
  };
  cpu.prototype.pause = function() {
    clearTimeout(this._timerID);
    this.isPause = true;
    this.log("###########################PAUSE!!!!!!!!!");
  };
  cpu.prototype.resume = function() {
    if (this.isPause != null && !this.isPause) {
      return;
    }
    //避免长时间的暂停跟真正的卡住搞混,所以每次重启的时候都加上一个0的数值。
    this._lastTime = this.now() + 10000;//上一个点的绝对时间
    this.isPause = false;
    this.resumeFlag = true;
    this.log("###########################RESUME!!!!!!!!!");
    this.run();
  };
  cpu.prototype.logPercent = function(per) {
    if (this.conf.stat) {//只有打开stat功能的时候才会收集数据
      this.logStat(per);//统计
    }

    if(this.conf.ui) {
      this._ui.draw(per);//画cpu曲线
    }
    if (this.conf.consoleUI) {//如果打开console UI就会在console里面画CPU曲线
      this.drawUIByConsole(per);
    }
  };
  cpu.prototype.logStat = function(per) {
    var p = this.data;//
    p.dataArray.push(per);
    p.timeArray.push(this.now());
    //this.log("CURRENT PER:"+per);
  };
  cpu.prototype.getCurrentCPU = function() {
    //取最近的3个cpu点做平均
    var p = this.data,
      a = p.dataArray, c = 0, len = a.length, sum = 0;
    for (var i = len - 1; i >= 0; i--) {
      sum += a[i];
      c++;
      if (c >= 3) {
        break;
      }
    }
    if (c == 0) {
      return 0;
    }
    return sum / c;
  };

  /**
   * 返回指定时间的下标,确定要统计的点的时间范围
   * @param {Number} time 从0开始的毫秒数
   * @param {Boolean} isEndTime 是否结束时间
   * @return {Number} 对应时间的下标
   */
  cpu.prototype.getTimeIndex = function(time, isEndTime) {
    var p = this.data.timeArray;
    for (var i = 0; i < p.length; i++) {
      if (!isEndTime) {
        if (p[i] - p[0] >= time) {
          return i;
        }
      } else {
        if (p[i] - p[0] > time) {
          return i - 1;
        }
      }
    }
    return p.length;

  };
  /**
   * 获取一定时间段之内的超过某一定百分比值的点的数量
   * @param {Number} per 百分比基准值
   * @param {Number} beginTime 起始时间,从0开始,单位毫秒
   * @param {Number} endTime 结束时间,单位毫秒
   */
  cpu.prototype.getOverPerAmount = function(per, beginTime, endTime) {
    var p = this.data,
      begin = this.getTimeIndex(beginTime),//Math.round(beginTime/d),
      end = this.getTimeIndex(endTime, 1),//Math.round(endTime/d),
      da = p.dataArray, sum = 0;
    for (var i = begin; i < end; i++) {
      if (typeof(da[i]) != "undefined" && da[i] >= per) {
        sum++;
      }
    }
    return sum;
  };

  /**
   * 返回一定时间段的cpu开销面积
   * @param {Number} beginTime
   * @param {Number} endTime
   */
  cpu.prototype.getTotalSize = function(beginTime, endTime) {
    var p = this.data;
    var  begin = this.getTimeIndex(beginTime);
    var end = this.getTimeIndex(endTime, true);
    var _e = p.size_line[end];
    if (!_e) {
      _e = p.size_line[p.size_line.length - 1];
    }
    var totalSize = _e - p.size_line[begin];
    return totalSize;
  };
  win.cpu = cpu;
}(window);

var qqq = new cpu();

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console