pixi.js持續渲染頁面

Pixi是一個超快的2D渲染引擎，經過Javascript和Html技術建立動畫或管理交互式圖像，從而製做遊戲或應用。

項目地址：https://github.com/pixijs/pixi.js
API 地址：https://pixijs.download/dev/docs/index.html
中文教程地址：https://github.com/Zainking/learningPixi

問題

一個簡單的demo，主要是經過pixi.js繪製一張圖片並展現在頁面中。經過觀察任務管理器->性能->GPU模塊能夠發現，頁面一直在渲染，致使GPU持續被佔用。原本的目的只是想展現一張靜態圖片便可，並不要求實時刷新。換句話說，就是如何實現pixi.js只在須要的時候進行渲染。

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
<script type="text/javascript">
    let Application = PIXI.Application,
        loader = PIXI.loader,
        resources = PIXI.loader.resources,
        Sprite = PIXI.Sprite;

    //Create a Pixi Application
    let app = new Application({
        width: 1000,
        height: 800,
    });

    document.body.appendChild(app.view);
    loader.add("img/wall5.jpg").load(setup);
    function setup() {
        let img = new Sprite(resources["img/wall5.jpg"].texture);
        app.stage.addChild(img);
    }

</script>

解決方案

在查看了pixi.js的源碼後發現，它的持續渲染仍是經過requestAnimationFrame實現的。下面簡單分析下實現過程。

1. 在Application的構造函數中，循環調用全部plugin的init函數，並將構造參數
   傳遞下去(https://pixijs.download/dev/docs/packages_app_src_Application.ts.html#line95)

2. 在TickerPlugin中執行init函數(默認autoStart參數爲true)，構建定時器Ticker。(https://pixijs.download/dev/docs/packages_ticker_src_TickerPlugin.ts.html#line101)

if (options.autoStart)
{
   this._ticker.start();
}

3. 在Ticker中初始化_tick方法，調用requestAnimationFrame(MDN)，實現持續渲染。(https://pixijs.download/dev/docs/packages_ticker_src_Ticker.ts.html#line171)

this._tick = (time: number): void =>
{
    this._requestId = null;
    if (this.started)
    {
         // Invoke listeners now
        this.update(time);
        if (this.started && this._requestId === null && this._head.next)
        {
            this._requestId = requestAnimationFrame(this._tick);
        }
    }
};

綜上所述，要實現只渲染一次的目標，只要不去啓動_ticker，再在須要渲染的時候執行render便可。

---

1. 關閉app的自動啓動

new PIXI.Application (options)
options.autoStart: Automatically starts the rendering after the construction
(在構造結束後就自動開始渲染)

ps:該屬性的設置只能在構造時傳入，後續修改無效

2. 在須要的時候主動調用渲染app.render();

修改後代碼:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
<script type="text/javascript">
    let Application = PIXI.Application,
        loader = PIXI.loader,
        resources = PIXI.loader.resources,
        Sprite = PIXI.Sprite;

    //Create a Pixi Application
    let app = new Application({
        width: 1000,
        height: 800,
        autoStart: false
    });

    document.body.appendChild(app.view);
    loader.add("img/wall5.jpg").load(setup);
    function setup() {
        let img = new Sprite(resources["img/wall5.jpg"].texture);
        app.stage.addChild(img);
        app.render();
    }
</script>

如今再觀察GPU能夠發現只有一個小小的起伏後就歸0了。爲了效果明顯一點，我先執行一些耗性能的操做後再繪製圖片。能夠看到GPU利用率在一個高峯後就迅速回落了。

總結

請注意不一樣版本pixi.js API之間的區別，以官方API文檔爲主。