008 Web Assembly之性能分析

0 介绍

视频地址:www.bilibili.com/video/BV1eg411g7c...
相关源码:github.com/anonymousGiga/Rust-and-...

本节我们将改进实现的生命游戏的性能,我们将利用时间分析来指导我们的工作。

1 使用window.performance.now函数创建FPS timer

FPS(Frames Per Second)Timer在我们分析康威游戏的渲染速度时非常有用。

我们首先添加fps对象到wasm-game-of-life/www/index.js中:

const fps = new class {
  constructor() {
    this.fps = document.getElementById("fps");
    this.frames = [];
    this.lastFrameTimeStamp = performance.now();
  }

  render() {
    // Convert the delta time since the last frame render into a measure
    // of frames per second.
    const now = performance.now();
    const delta = now - this.lastFrameTimeStamp;
    this.lastFrameTimeStamp = now;
    const fps = 1 / delta * 1000;

    // Save only the latest 100 timings.
    this.frames.push(fps);
    if (this.frames.length > 100) {
      this.frames.shift();
    }

    // Find the max, min, and mean of our 100 latest timings.
    let min = Infinity;
    let max = -Infinity;
    let sum = 0;
    for (let i = 0; i < this.frames.length; i++) {
      sum += this.frames[i];
      min = Math.min(this.frames[i], min);
      max = Math.max(this.frames[i], max);
    }
    let mean = sum / this.frames.length;

    // Render the statistics.
    this.fps.textContent = `
Frames per Second:
         latest = ${Math.round(fps)}
avg of last 100 = ${Math.round(mean)}
min of last 100 = ${Math.round(min)}
max of last 100 = ${Math.round(max)}
`.trim();
  }
};

再添加调用的代码:

const renderLoop = () => {
    fps.render(); //new

    universe.tick();
    drawGrid();
    drawCells();

    animationId = requestAnimationFrame(renderLoop);
};

在index.html中添加标签和响应的css代码,整个文件如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>game-of-life-canvas</title>
    <style>
          body {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }
        #fps {
            white-space: pre;
            font-family: monospace;
        }
    </style>
  </head>
  <body>
    <button id="play-pause"></button>
    <div id="fps"></div>
    <!--canvas标签是表示图像或图表-->
    <canvas id="game-of-life-canvas"></canvas>
    <script src="./bootstrap.js"></script>
  </body>
</html>

输入127.0.0.1:8080可以看到已经可以在界面上显示帧率了。

2 分析每个tick的时间

我们使用web-sys中的console.time和console.timeEnd来分析Universe::tick。

我们在wasm-game-of-life/Cargo.toml中添加如下:

[dependencies.web-sys]
version = "0.3"
features = [
  "console",
]

为了方便调用,我们对console.timeEnd和console.time做如下封装:

use web_sys::console;

pub struct Timer<'a> {
    name: &'a str,
}

impl<'a> Timer<'a> {
    pub fn new(name: &'a str) -> Timer<'a> {
        console::time_with_label(name);
        Timer { name }
    }
}

impl<'a> Drop for Timer<'a> {
    fn drop(&mut self) {
        console::time_end_with_label(self.name);
    }
}

然后我们在对应的方法中添加如下代码:

//在tick函数的第一行添加如下代码
let _timer = Timer::new("Universe::tick");

编译后,我们可以使用F12查看相关的性能。

本作品采用《CC 协议》,转载必须注明作者和本文链接
令狐一冲
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!