antvis / G

💥 A flexible rendering engine for visualization.
https://g.antv.antgroup.com/
1.07k stars 198 forks source link

[g]即使动画都停掉,requestAnimationFrame的调用不会停止 #1626

Closed coredesign1234 closed 6 months ago

coredesign1234 commented 8 months ago

单独在界面上使用canvas,或者做一次canvas的appendChild动作,requestAnimationFrame会不停止地被调用。定位代码如下:

Canvas.prototype.run = function () {
        var _this = this;
        var tick = function () {
            _this.render();
            _this.frameId = _this.requestAnimationFrame(tick);
        };
        tick();
    };

即使界面上什么元素都没有,这个函数也会不停调用

coredesign1234 commented 8 months ago

请协助优化一下,这个循环的调用会增加系统整体功耗

xiaoiver commented 6 months ago

rAF 中的 render 方法内部会进行脏检查,如果画布中的图形未发生改变,是不会调用底层绘制方法的。

至于 rAF 循环的调用,Three.js 中也是这样使用的(参考文档中 Rendering the scene 一节): https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

最后如果实在想手动调用 render 方法,可以覆盖掉 run 这个方法,然后在合适的时机手动调用。