如何在chrome调试器中计算性能时间？

Question

我先加载页面，然后用Chrome浏览器进行10秒钟的性能录制。

然后我转到“源”选项卡，谷歌已将ms计数添加到某些行。干净！

奇怪的是，只有在页面加载时才执行该行代码。 （在页面加载期间未记录性能），我通过在该行上放置一个断点来验证了这一点（请参见绿色箭头）。

我确实在几个地方引用了那条线。

class Boid {
  constructor() {
    this.position = createVector(random(canvasOffset, width - canvasOffset), random(canvasOffset, height- canvasOffset));
    //this.position = createVector(100,100)
    this.velocity = p5.Vector.random2D();
    this.acceleration = createVector();
    this.maxForce = 1;
    this.maxSpeed = 4;
    this.perceptionRadius = 70;
    this.color = 255;
    this.cell = false;
  }

  flockingForce(func) {
    let steering = createVector();
    //add up all forces of nearby boids
    this.nearby.forEach((nearby) => {
      let diff = func(nearby)
      steering.add(diff)
    });
    //average them
    steering.div(this.nearby.length?this.nearby.length:1);
    //normalize
    return this.steer(steering)
  }

  steer(steering){
    if (steering.mag() > 0) {
      steering.setMag(this.maxSpeed);
      steering.sub(this.velocity);
      steering.limit(this.maxForce);
    }
    return steering
  }

  distances(boids) {
    this.nearby = []
    if(Math.random() > .7){
      boids.forEach( other =>{
        let d = dist(this.position.x, this.position.y, other.position.x, other.position.y)
        if(other != this && d < this.perceptionRadius){
          this.nearby.push({
            d: d,
            velocity: other.velocity,
            position:  p5.Vector.sub(other.position, this.position)
          }) 
        }
      })
    }
  }
  setNearby(grid) {
    let col = Math.floor(this.position.x / grid.dimensions.width),
        row = Math.floor(this.position.y / grid.dimensions.height),
        offset = [-1, 0, 1];
   
   this.cell = grid.grid[row][col]


    offset.forEach((rowOffset) => {
      offset.forEach((colOffset)=>{
        grid.grid[row + rowOffset][col + colOffset].push(this)
      })
    })
}

  align() {
    let func = (x) => p5.Vector.add(x.velocity, 0);
    return this.flockingForce(func);
  }
  separation() {
    let func = (x) => {
      let force = p5.Vector.mult(x.position, -1);
      if(x.d > 0){ force.div((x.d*x.d))}
      return force
    }
    return this.flockingForce(func)
  }
  cohesion() {
    let func = (x) => x.position;
    return this.flockingForce(func)
  }
  dodge() {
    let x = this.position.x;
    let y = this.position.y;
    let vx = this.force(0, x)-this.force(x, width);
    let vy = this.force(0, y)-this.force(y, height);

    return createVector(vx, vy)
  }
  force(a, b){
    if(b-a > 100){
      return 0
    }
    return ((a-b)*(a-b))
  }

  flock() {
    if(this.nearby.length){
      let alignment = this.align();
      let cohesion = this.cohesion();
      let separation = this.separation();


      alignment.mult(1);
      cohesion.mult(1);
      separation.mult(1);


      this.acceleration.add(alignment);
      this.acceleration.add(cohesion);
      this.acceleration.add(separation);
    }
    let dodge = this.dodge();
    dodge.mult(1000)
    this.acceleration.add(dodge);
  }

  update() {
    this.position.add(this.velocity);
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.maxSpeed);
    this.acceleration.mult(0);
  }

  show() {
    strokeWeight(2);
    stroke('white');
    point(this.position.x, this.position.y);
  }
}

const flock = [];

let alignSlider, cohesionSlider, separationSlider, cols, rows, grid;
let canvasOffset = 150

function setup() {
  createCanvas(windowWidth+canvasOffset*2, windowHeight+canvasOffset*2);
  for (let i = 0; i < 400; i++) {
    flock.push(new Boid());
  }
  cols = Math.floor(width / 35)
  rows = Math.floor(height / 35)
}


function draw() {
  background(51);
  grid = {
    grid: Array.from(Array(rows), _ => Array.from(Array(cols), _ => [])),
    dimensions: {
      height: (height / rows ),
      width: (width / cols)
    }
  }


  //store snapshot in grid
  flock.forEach((boid)=>{
    boid.setNearby(grid)
  })
  //calculate forces
  flock.forEach((boid)=>{
    boid.distances(boid.cell)

    boid.flock(flock);
    boid.update();
    boid.show();
  })
  //noLoop() 

}

      html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      canvas {
        display: block;
          position: absolute;
          left: -150px;
          top: -150px;
      }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>flocking</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
  </head>
  <body></body>
</html>