构建小型 GUI 引擎：可见与 addChild/removeChild

Question

目前，我正在试验一个非常简单的 GUI 绘图……“引擎”（我猜你可以这么称呼它）。要点：

1. 有一个 FrontController 被用户请求击中；每个请求都有一个uid
2. 每个 uid（读作“页面”）都有其上存在的组件（“模块”）的声明
3. 组件是 Sprite 子类，本质上是独一无二的

当然，我需要一种隐藏/显示这些精灵的方法。目前，我拥有它就像 Flex 默认拥有它一样 - 方式是“如果我们在一个 comp 可见的地方，创建它、缓存它并在每次它再次可见时重用它”。

问题是 - 通过addChild/removeChild 或切换visible，哪种方式更合适、更有效地隐藏和显示。

我的看法是这样的：

• visible 又快又脏（在第一次测试中）
• visible 不会创建像 Event.ADDED 或 Event.REMOVED 这样的冒泡事件链
• 不可见的组件不会获得鼠标事件

所以removeChild 将是我确定时调用的东西，该组件将不再需要在屏幕上（或者缓存太大，例如）

stackoverflow'ers / AS3-crazy 的人是怎么想的？

更新： 这是good read（忘了谷歌）。

我会坚持visible；它似乎更适合我的任务； Adobe 的手册“优化 FLASH 平台的性能”，第 15 页。 69给了我更多的信心。

这是我为感兴趣的人测试的代码 sn-p：

package 
{
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import flash.utils.getTimer;

/**
 * Simple benchmark to test alternatives for hiding and showing
 * DisplayObject.
 * 
 * Use:
 * <code>
 * new DisplayBM(stage);
 * </code>
 * 
 * Hit:
 * - "1" to addChild (note that hitting it 2 times is expensive; i think
 * this is because the player has to check whether or not the comp is
 * used elsewhere)
 * - "q" to removeChild (2 times in a row will throw an exception) 
 * - "2" to set visible to true
 * - "w" to set visible to false
 * 
 * @author Vasi Grigorash
 */    
public class DisplayBM{
    public function DisplayBM(stage:Stage){
        super();

        var insts:uint = 5000;
        var v:Vector.<Sprite> = new Vector.<Sprite>(insts);
        var i:Number = v.length, s:Sprite
        while (i--){
            s = new Sprite;
            s.graphics.beginFill(Math.random() * 0xFFFFFF);
            s.graphics.drawRect(
                Math.random() * stage.stageWidth, 
                Math.random() * stage.stageHeight,
                10, 
                10
            );
            s.graphics.endFill();
            v[i] = s;
        }

        var store:Object = {};
        store[Event.ADDED] = null;
        store[Event.REMOVED] = null;
        var count:Function = function(e:Event):void{
            store[e.type]++;
        }
        var keydown:Function = function (e:KeyboardEvent):void{
            var key:String
            //clear event counts from last run
            for (key in store){
                store[key] = 0;
            }

            stage.addEventListener(Event.ADDED, count);
            stage.addEventListener(Event.REMOVED, count);

            var s0:uint = getTimer(), op:String;
            var i:Number = v.length;
            if (e.keyCode === Keyboard.NUMBER_1){
                op = 'addChild';
                while (i--){
                    stage.addChild(v[i]);
                }
            }
            if (e.keyCode === Keyboard.Q){
                op = 'removeChild';
                while (i--){
                    stage.removeChild(v[i]);
                }
            }
            if (e.keyCode === Keyboard.NUMBER_2){
                op = 'visibile';
                while (i--){
                    v[i].visible = true;
                }
            }
            if (e.keyCode === Keyboard.W){
                op = 'invisibile';
                while (i--){
                    v[i].visible = false;
                }
            }
            if (op){
                //format events
                var events:Array = [];
                for (key in store){
                    events.push(key + ' : ' + store[key])
                }

                trace(op + ' took ' + (getTimer() - s0) + ' ' + events.join(','));
            }

            stage.removeEventListener(Event.ADDED, count);
            stage.removeEventListener(Event.REMOVED, count);
        }

        //autodispatch
        stage.addEventListener(KeyboardEvent.KEY_DOWN, keydown);
    }
}
}

Answer 1

以下是 Moock 关于该主题的一些硬数据： http://www.developria.com/2008/11/visible-false-versus-removechi.html

                  Children on the                     Single-frame 
                  Display List    .visible   .alpha   Elapsed Time (ms)
No Children       0               --         --       4
Non-visible       1000            false      1        4
Zero Alpha        1000            true       0        85
Fully Visible     1000            true       1        1498
90% Transparent   1000            true       .1       1997

Answer 2

Visible 对我来说更有意义（因为移除一个孩子就意味着一个终结），并且是我在自己的项目中显示/隐藏时倾向于使用的。

我还假设 addChild 的性能稍差，但我没有做过任何测试。

编辑：我刚刚看到这篇 Adob​​e 文章 http://help.adobe.com/en_US/as3/mobile/WS5d37564e2b3bb78e5247b9e212ea639b4d7-8000.html，它指定在使用 GPU 渲染模式时，仅设置 visible = false 会影响性能，因为绘制重叠对象是有成本的（即使它们不可见） .相反，建议完全移除孩子：

尽可能避免过度绘制。过度绘制是分层多个 图形元素，使它们彼此模糊。使用软件 渲染器，每个像素只绘制一次。因此，对于软件 渲染，应用程序不会招致性能损失，无论 有多少图形元素在该像素处相互覆盖 地点。相比之下，硬件渲染器为每个像素绘制每个像素 元素是否其他元素遮盖了该区域。如果两个 矩形相互重叠，硬件渲染器绘制 软件渲染器绘制区域时重叠区域两次 只有一次。

因此，在使用软件渲染器的桌面上，您 通常不会注意到透支对性能的影响。然而， 许多重叠的形状会对设备的性能产生不利影响 使用 GPU 渲染。最佳做法是从 显示列表而不是隐藏它们。

Answer 3

删除孩子最好减少实例，事件并从您的Flash电影中释放内存，您可能会发现精灵可能会在一段时间后相互影响。从它们的绘制方式或那里的listneres来看，垃圾收集通常会在以下情况下发挥作用此方法已实现，最终可以与您的应用程序混在一起

Visible 仍然在内存中有精灵，它只是当前没有绘制。你也可以保存精灵然后删除它，然后在需要时重新加载它，这将是所有解决方案的理想选择。 使用数组存储数据是另一种解决方案，也取决于您的应用程序是如何实现的，很难说，因为我们不知道，lol

我想说添加孩子的表演压力更小，因为它仍然是唯一添加的项目与隐藏的倍数。此外，在这些隐藏的孩子中，属性与听众一起存储在内存中。