Flash & Flex组件优化的杀手锏callLater

简介:

Flash & Flex组件优化的杀手锏callLater

最近使用flexlib,看源码的时候发现有大量的 calllater() 方法,搜了搜 原来如此:

原帖:http://www.colorhook.com/blog/?p=216

Flash的fl组件和Flex的mx组件都有一个受保护方法callLater,callLater可以说是优化组件执行效率的一个杀手锏,极其有用。

拿Flash的fl组件为例,fl组件有个重绘方法redraw(),如果改变组件的大小,焦点的获得和丢失都会是组件重绘来呈现不同的状态。而组件是复杂的,重绘的开销很大。如果假想一个按钮执行以下程式来更改外观,并且每次的更改都触发redraw()方法执行,那它将执行3次重绘,很显然是不须要的。

button.width=200;
button.height=28;
button.setStyle("textFormat",myTextFormat);

一个优化的方式是假设组件不会自动重绘,需要手动进行:

button.width=200;
button.height=28;
button.setStyle("textFormat",myTextFormat);
button.redraw();

这个方式不太友好,每次都要记得去重绘组件,幸运的是callLater解决了这个问题。

callLater把要执行的函数延迟到下一帧。所以对button的width更改后,它会记得在下一帧重绘自身,当然这一帧你还改变了height和样式,它也只是重复地记忆要在下一帧重绘自身。到了下一帧的时候,它执行一次redraw(),仅是一次。

Flex组件的基类UIComponent有110多个公开属性,90个公开方法,17个受保护方法,70多个事件,10多个样式,10多个效果,还有6个常量。一个基类都如此庞大,可想而知,优化是多么重要。
在Flex组件的callLater中,重绘被分割成了三个受保护的方法:

commitProperties()

measure()

updateDisplayList()

职责的分割更加提高了效率,这些延迟执行都是callLater实现的。把callLater实现的细节抽取下来写成一个单独的类:

package com.colorhook.tools{

/**
 *    @author colorhook
 * @copyright http://www.colorhook.com
 */

 import flash.display.DisplayObject;
 import flash.utils.Dictionary;
 import flash.events.Event;

public class FrameCallLater implements ICallLater{

    private var _target:DisplayObject;
    private var methods:Dictionary;
    private var inCallLaterPhase:Boolean=false;

    public function FrameCallLater(target:DisplayObject){
        this._target=target;
        methods=new Dictionary(true);
        super();
    }

    /**
     * defined by ICallLater, I write a class TimeCallLater to implement it also.
     */
    public function call(fun:Function):void{
        if (inCallLaterPhase||_target==null) { return; }

        methods[fun]=true;

        if (_target.stage != null) {
            _target.stage.addEventListener(Event.RENDER,callLaterDispatcher,false,0,true);
            _target.stage.invalidate();
        } else {
            _target.addEventListener(Event.ADDED_TO_STAGE,callLaterDispatcher,false,0,true);
        }
    }

    private function callLaterDispatcher(event:Event):void {
        if (event.type == Event.ADDED_TO_STAGE) {
            _target.removeEventListener(Event.ADDED_TO_STAGE,callLaterDispatcher);
            _target.stage.addEventListener(Event.RENDER,callLaterDispatcher,false,0,true);
            _target.stage.invalidate();
            return;
        } else {
            event.target.removeEventListener(Event.RENDER,callLaterDispatcher);
            if (_target.stage == null) {
                _target.addEventListener(Event.ADDED_TO_STAGE,callLaterDispatcher,false,0,true);
                return;
            }
        }

        inCallLaterPhase = true;

        for (var method:Object in methods) {
            method();
            delete(methods[method]);
        }
        inCallLaterPhase = false;
    }

    public function get target():DisplayObject{
        return _target;
    }

}

}
本文转自jiahuafu博客园博客,原文链接http://www.cnblogs.com/jiahuafu/archive/2010/02/26/1674325.html如需转载请自行联系原作者

jiahuafu

相关文章
|
2月前
|
前端开发 Android开发 iOS开发
移动端自适应解决方案vw(以react为例)
移动端自适应解决方案vw(以react为例)
52 0
|
4月前
Uniapp开发过程中解决的一个Flex布局问题
Uniapp开发过程中解决的一个Flex布局问题
38 0
|
10月前
|
前端开发 UED 容器
深入了解Flex布局:构建灵活响应式布局的利器
深入了解Flex布局:构建灵活响应式布局的利器
123 1
|
编解码 前端开发 JavaScript
移动端页面开发适配 rem布局原理
移动端页面开发适配 rem布局原理
|
Web App开发 缓存 JavaScript
利于前台开发的两大工具flex和vue
今次给大家安利的这两种工具,flex当为页面显示布局中很强大的一个属性,属于css范畴.而vue则属于一种js插件,其作用在于将页面显示与js数据近乎完美的完全区分开,而又使两者遥相控制(当然主要是js数据控制页面显示).
3037 0
|
Android开发
在安卓应用上支持从右到左(RTL)布局
世界上的大部分语言的书写方式都是从左到右,但是也有一些语言是从右到左(Right to Left,以下简称为 **RTL** )书写的,譬如阿拉伯语,希伯来语以及叙利亚语。虽然这些都是小语种,支持RTL能给当地用户更好的体验。 从 [Google 官网](https://android-developers.googleblog.com/2013/03/native-rtl-support-
1895 0