PixiJS 源码深入解读：用于循环渲染的 Ticker 模块

大家好，我是前端西瓜哥。这次来看看 PixiJS 的 Ticker 模块源码。

Ticker 的作用是 在下一帧绘制前调用监听器，PixiJS 使用它来不断对画面进行重绘。

版本为 7.2.4。

使用

在我们 实例化 PIXI.Application 时，PIXI.Application 内部注册的插件之一的 TickerPlugin 会被初始化：

Application._plugins.forEach((plugin) => {
  plugin.init.call(this, options);
});

将 Application 的渲染器 renderer 的 render 方法注册进去，然后每帧都会会被调用。

ticker = options.sharedTicker ? Ticker.shared : new Ticker();
ticker.add(this.render, this, UPDATE_PRIORITY.LOW);

也可以直接使用：

const ticker = new PIXI.Ticker();
// ticker.autoStart = true;

ticker.add(() => {
  console.log("前端西瓜哥");
});

ticker.add(() => {
  console.log("fe_watermelon");
});

ticker.start();

目录结构

Ticker 的代码都在 packages/ticker 目录下。

构造函数

看一下 Ticker 的构造函数：

class Ticker {
  constructor() {
    this._head = new TickerListener(null, null, Infinity);
    this.deltaMS = 1 / Ticker.targetFPMS;
    this.elapsedMS = 1 / Ticker.targetFPMS;

    this._tick = (time: number): void => {
      this._requestId = null;

      if (this.started) {
        // Invoke listeners now
        this.update(time);
        // Listener side effects may have modified ticker state.
        if (this.started && this._requestId === null && this._head.next) {
          this._requestId = requestAnimationFrame(this._tick);
        }
      }
    };
  }
}

做了哪些事情：

（1）初始化一个空的监听器函数

this._head = new TickerListener(null, null, Infinity);

使用了链表来管理多个监听器函数，所以这个空的 this._head 就是这个链表的头部 哨兵节点（虚节点）。

哨兵节点是一个链表编程技巧，目的是让真正的头部节点能和其他普通节点有一致的实现，不需要老是判断 head 是否为 null，对头节点做特殊处理，达到降低实现难度的目的。

监听器函数会被封装成一个 TickerListener 的类，提供 priority（优先级）、once（只执行一次） 等特性。其中的 next 指向下一个监听函数，确保监听器函数能够按照注册顺序依次执行。

不过 TickerListener 有个 优先级的概念，监听器在加入的时候，会插入合适的位置，最终保证优先级是从高往低的。优先级类型在 UPDATE_PRIORITY 这个枚举变量中。

顺带一提，application 的 render 方法优先级是 UPDATE_PRIORITY.LOW，哨兵节点则是突破天际的 Infinity。

关于监听器函数链表的维护相关代码，其实就是双向链表的一些常规操作，本文不会过多叙述。

（2）执行监听器函数

this.update(time);

这里是执行所有监听器函数的地方。

其下的核心代码为：

while (listener)
{
  listener = listener.emit(this.deltaTime);
}

listener.emit() 方法会执行当前的 listener 方法，并返回它的 next。不断循环，直到 next 为 null 结束。

（3）循环调用 this._tick 方法

this._requestId = requestAnimationFrame(this._tick);

这里用了浏览器提供的 requestAnimationFrame 方法，实现循环调用 this._tick 方法。为了方便描述，通常简写为 raf。

this.head.next 表示有注册的监听函数。

结尾

Ticker 模块并不复杂的，是对 requestAnimationFrame 的一层封装，并使用链表做监听器函数的维护。

我是前端西瓜哥，欢迎关注我，学习更多前端知识。