HTMLCanvasElement渲染循环中if/else、状态变更与noop的性能对比

在基于HTMLCanvasElement的项目中，我定义了Object2d基类来存储rotation、debug这类影响渲染的状态选项，下面是三种不同的渲染实现方式：

实现方式1：条件判断控制上下文操作 #

public render(): void {
  const ctx: CanvasRenderingContext2D = this._canvas.getContext('2d');

  if (this.rotation !== 0) {
    ctx.rotate(this.rotation);
  } 
    
  this._drawObject(ctx);
    
  if (this.debug) {
    this._renderDebug(ctx);
  }
    
  if (this.rotation !== 0) {
    ctx.rotate(-this.rotation);
  }
}

实现方式2：无条件执行上下文旋转（即使rotation为0） #

public render(): void {
  const ctx: CanvasRenderingContext2D = this._canvas.getContext('2d');

  ctx.rotate(this.rotation);
    
  this._drawObject(ctx);
    
  if (this.debug) {
    this._renderDebug(ctx);
  }
    
  ctx.rotate(-this.rotation);
}

实现方式3：状态变更时切换函数引用（用空函数noop替代条件判断） #

private _beginRotation = noop; // 'noop' 是一个空函数，什么都不做
private _endRotation = noop;
private _renderDebug = noop;

// 仅在rotation值变更时执行
public set rotation(value: number) {
  this._rotation = value;

  if (this._rotation !== 0) {
    this._beginRotation = this.myBeginRotationActualMethod;
    this._endRotation = this.myEndRotationActualMethod;
  } else {
    this._beginRotation = noop;
    this._endRotation = noop;
  }
}

// 仅在debug值变更时执行
public set debug(value: boolean) {
  this._debug = value;
  this._renderDebug = this._debug ? this.myDebugActualMethod : noop;
}

public render(): void {
  const ctx: CanvasRenderingContext2D = this._canvas.getContext('2d');

  this._beginRotation(); // 要么调用空函数，要么执行实际的旋转操作
  this._drawObject(ctx);
  this._renderDebug();
  this._endRotation(); // 同理：空函数或恢复旋转状态
}

疑问： #

1. 调用空函数noop是否比执行if条件判断更快？
2. 传入0值调用ctx.rotate变更状态，是否比调用noop或执行if语句更快？

问题解答 #

1. 空函数noop vs if条件判断的性能对比 #

从JavaScript引擎的执行逻辑来看：

• 单次if判断开销极低，只是简单的数值/布尔比较，现代引擎（如V8）会对这类简单条件做优化，甚至可能在JIT编译阶段消除冗余判断。
• 调用noop本质是一次函数调用，涉及函数栈创建、上下文切换（哪怕是空函数），虽然开销也很小，但单次调用成本略高于简单的if判断。
• 但如果渲染循环中rotation或debug状态很少变化，用noop的方式可以把条件判断从高频渲染循环移到低频状态变更时机，整体能减少重复判断开销。比如1000次渲染循环里状态只变1次，noop方式仅做1次判断，而if方式要做1000次，这种场景下noop更划算。

2. 传入0的ctx.rotate vs noop/if的性能对比 #

首先明确：当传入0调用ctx.rotate(0)时，现代浏览器Canvas上下文会对这类无意义变换做内部优化，直接跳过矩阵计算，但依然存在API调用的基础开销。

• 和noop比：ctx.rotate(0)的开销肯定高于空函数调用，哪怕内部跳过变换，也有Canvas API的调用成本。
• 和if判断比：如果大部分场景下rotation为0，if (rotation !==0)的判断+跳过旋转的成本，低于每次调用ctx.rotate(0)+ctx.rotate(-0)的成本；但如果大部分场景下rotation不为0，省去if判断直接调用rotate的成本，反而比每次做判断更划算。

内容的提问来源于stack exchange，提问作者Benoît Lahoz