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

相关文章
|
开发者 容器
ArkUI框架,Flex布局,基础组件及封装,父子组件的双向绑定
Flex组件用于创建弹性布局,开发者可以通过Flex的接口创建容器组件,进而对容器内的其他元素进行弹性布局,例如:使三个元素在容器内水平居中,垂直等间隔分散。 例如:如下的布局代码分别表示:(垂直排列,水平居中,垂直居中)
503 0
ArkUI框架,Flex布局,基础组件及封装,父子组件的双向绑定
|
3月前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
150 10
|
4月前
|
数据可视化 前端开发 搜索推荐
FLEX组件可视化设计器CSS3代码生成器
FLEX组件可视化设计器CSS3代码生成器
77 4
|
7月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
9月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
237 5
|
9月前
|
容器 API UED
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
336 0
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
|
容器
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
93 0
|
前端开发 Java 开发工具
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
361 0
好客租房116-flex布局组件导航菜单
好客租房116-flex布局组件导航菜单
123 0
好客租房116-flex布局组件导航菜单
|
开发框架 小程序 Android开发
列表组件list-view的使用、flex布局教程,以APICloud AVM框架为例
avm.js是 APICloud 推出的多端开发框架。使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App,且多端渲染效果统一;全新的 App 引擎 3.0 不依赖 webView,提供百分百的原生渲染,保障 App 性能和体验与原生 App 一致。
524 0