`
yr512656630
  • 浏览: 321103 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

ItemRenderer性能优化

阅读更多
http://rss.9ria.com/?p=3640

DataGrid和AdvancedDataGrid应该是Flex企业项目中最常用的组件了,今天开始写一些优化技巧,这些技巧直接影响DataGrid的渲染效率。

ItemRenderer优化。

ItemRenderer是我们在扩展DataGrid单元格功能时需要扩展开发最多的东西,网络上有很多ItemRenderer的例子,但是大部分来说都是从方便开发的角度来使用的ItemRenderer而忽略了效率问题。那么到底何种情况是看似没问题,但实际上却牺牲了效率的呢?比如:


1. 我们需要显示一个图片Icon,然后紧接着显示一个label。也许我们会使用下面这样的代码(摘自Adobe开发者博客2008年的一篇文章, http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html)

<mx:DataGrid x="29" y="303" width="694" height="190" dataProvider="{testData.book}" variableRowHeight="true">
    <mx:columns>
        <mx:DataGridColumn headerText="Pub Date" dataField="date" width="85" />
        <mx:DataGridColumn headerText="Author" dataField="author" width="125"/>
        <mx:DataGridColumn headerText="Title" dataField="title">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox paddingLeft="2">
                        <mx:Script>
                        <![CDATA[
                            override public function set data( value:Object ) : void {
                                super.data = value;
                                var today:Number = (new Date()).time;
                                var pubDate:Number = Date.parse(data.date);
                                if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
                                else setStyle("backgroundColor",0xffffff);
                            }
                        ]]>
                        </mx:Script>
                        <mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
                        <mx:Text width="100%" text="{data.title}" />
                    </mx:HBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid> 



这样写从正确与否的角度说完全没有问题,我们可以有两种写法,最简单的就是上面这样,在标签内直接写Itemrenderer。第二种的是创建一个新mxml文件继承于HBox取名叫XXXXRenderer,然后加入Image和Text控件,这种分离的写法也适合动态创建columns时使用。

但是不管是哪种,都已经忽略了效率问题 (咱们今天的重点)。在Itemrenderer里使用Container的子类是很消耗资源的做法,相反高效的做法是直接继承UIComponent,在UIComponent里加入Image和Text控件。效率问题在小数据量,只有几列Column的时候是不容易发现的。但是如果你需要一次显示千条甚至万条的数据的,多列column都包含复杂Itemrenderer的话,效率问题就不得不考虑的(你也可以考虑为每个客户购置牛逼的机器)。就这个例子使用UIComponent来说,你会感觉出来Flex在渲染Datagrid时“假死”的时间会缩短,如果你机器太好,感觉不是很明显的话,尝试滑动滚动条,滚动条的平滑程度很真实的反应了两种情况下grid每个Cell的创建时间。

下面是我用UIComponent创建同样ItemRenderer的代码

package renderer
{
	import mx.controls.Label;
	import mx.controls.Text;
	import mx.controls.dataGridClasses.DataGridListData;
	import mx.controls.listClasses.BaseListData;
	import mx.controls.listClasses.IDropInListItemRenderer;
	import mx.controls.listClasses.IListItemRenderer;
	import mx.core.IDataRenderer;
	import mx.core.UIComponent;
	import mx.core.UIComponentGlobals;
	import mx.events.FlexEvent;
	import mx.managers.ILayoutManagerClient;
	import mx.styles.IStyleClient;
 
	import spark.components.Image;
 
	public class DataGridExampleRenderer extends UIComponent implements IListItemRenderer,IDropInListItemRenderer
	{
 
 
		private var _listData:DataGridListData;
		private var _data:Object;
		private var text:Text;
		private var img:Image;
 
 
		public function DataGridExampleRenderer()
		{
			super();
		}
 
 
		override protected function createChildren():void{
			super.createChildren();
			text = new Text();
			img = new Image();
			this.addChild(text);
			this.addChild(img);
		}
 
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
			super.updateDisplayList(unscaledWidth,unscaledHeight);
			text.setActualSize(unscaledWidth/2,unscaledHeight);
			img.setActualSize(unscaledWidth/2,unscaledHeight);
			text.move(unscaledWidth/2,0);
		}
 
		override protected function commitProperties():void
		{
			super.commitProperties();
			if(listData){
				text.text = data[(listData as DataGridListData).dataField];
				img.source = data.img;
			}else{
				text.text = ""
			}
 
 
		}
 
		[Bindable("dataChange")]
		public function get data():Object
		{
			return _data;
 
		}
 
		public function set data(value:Object):void
		{
			_data = value;
			invalidateProperties();
			dispatchEvent(new FlexEvent("dataChange"));
		}
 
 
 
 
		public function get listData():BaseListData
		{
			return _listData;
		}
 
 
		public function set listData(value:BaseListData):void
		{
			_listData = DataGridListData(value);
 
		}
 
 
	}
} 



以上是第一种情况,咱们看第二种。

2. 习惯性的使用Label, Text, TextArea来作为ItemRenderer来方便改变样式,比如背景,HTML显示等。

比如这个例子http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/

非常正确的代码,但是却是影响效率的做法,不管是DataGridItemRenderer或者AdvancedDataGridItemRenderer. 它们是继承于UITextField. 相较于Label, Text或者TextArea来说。相当的轻量级,所以我们只需要继承于DataGridItemRenderer或者AdvancedDataGridItemRenderer,对它就行扩展同样可以实现样式改变,HTML显示的功能。

上面博客中是这么写的

package {
    import mx.controls.Label;
    import mx.controls.listClasses.*;
 
    public class PriceLabel extends Label {
 
        private const POSITIVE_COLOR:uint = 0x000000; // Black
        private const NEGATIVE_COLOR:uint = 0xFF0000; // Red
 
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
 
            /* Set the font color based on the item price. */
            setStyle("color", (parseFloat(data.@price) <= 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);
        }
    }
} 



而从优化效率的角度来说,可以有个简单的方法这么写,继承DataGridItemRenderer,覆盖validateProperties.(我没实际运行过,不过肯定是没问题的)

override public function validateProperties():void
	{
		super.validateProperties();
		if (listData)
		{
			var grid:DataGrid = DataGrid(listData.owner);
			var column:DataGridColumn = grid.columns[listData.columnIndex];
 
			htmlText = parseFloat(data.@price) <= 0? "<font color='#ff0000'>"+data[column.dataField]+"</font>":data[column.dataField];
		}
	} 



总结起来的话就简单的两句点

1. 不要使用Container做为ItemRenderer的父类,继承UIComponent. Container能做的,UIComponent也能做(多写一点代码)
2. 如果只作为数据显示效果而使用ItemRenderer。不必继承label, Text或者TextArea. 直接继承DataGridItemRenderer或AdvancedDataGridItemRenderer进行扩展。

下面的demo展示了我所说的第一种情况的AdvancedDataGrid的执行效率。左边是使用了UIComponent,右边使用了第一段代码的方式。为了使差别更明显,我在每个Renderer里放置了两张图片,并且显示了3列,1万条数据,虽然左边的滚动条滑动速度也不是很流畅,但是相对于右边来说差别已经很明显了。右键查看源代码

http://www.flextheworld.com/demo/grid-itemrenderer/Test.html (0)

<mx:DataGridColumn dataField="atc" headerText="攻击" itemRenderer="OurItemRenderer" />
分享到:
评论

相关推荐

    flex4做的itemrenderer呈现器

    7. **优化和性能**: 为了提高性能,ItemRenderer应尽可能轻量级。避免在ItemRenderer中包含复杂的布局或过多的计算,因为它们会影响列表滚动的平滑度。 通过以上步骤,我们可以创建一个基于Flex4的自定义...

    itemrenderer help

    性能优化建议** - **缓存计算结果**: 对于复杂的计算或数据处理,可以在ItemRenderer中缓存结果,减少不必要的重复计算。 - **避免不必要的更新**: 只有当数据真正发生变化时才更新ItemRenderer的内容,避免不必要...

    itemRenderer 提前加载问题

    总的来说,"itemRenderer提前加载问题"涉及到的是Flex或ActionScript应用的性能优化,特别是针对大数据量列表展示的优化。解决这个问题需要对UI组件的生命周期有深入理解,并可能需要调整项目的构建和配置,以实现更...

    内渲染器_ItemRenderer

    对于大量数据,优化内渲染器的性能至关重要。 总的来说,内渲染器是提升用户界面体验的关键工具,通过自定义每个列表项的显示,我们可以创造出更加吸引人的交互式界面。在实际项目中,熟练掌握内渲染器的使用可以...

    flex itemRenderer 渲染机制的概念和使用

    对于大量数据,我们需要考虑优化itemRenderer的性能。例如,减少不必要的计算和布局,或者利用虚拟化技术只渲染可视区域的item。 通过以上介绍,我们可以看出,Flex的itemRenderer机制为数据驱动的应用提供了强大...

    Flex项呈示器ItemRenderer

    4. **性能优化**:避免在`updateDisplayList()`方法中进行复杂的计算或网络请求,这可能导致性能问题。 总之,Flex项呈示器(ItemRenderer)是构建富交互界面的重要工具,通过自定义它可以实现灵活且个性化的数据...

    Flex中itemRenderer的使用简介

    5. **优化性能**: 为了提高性能,应确保ItemRenderer的复用性。Flex会重用ItemRenderers,所以需要在`set data()`方法中正确地更新UI,而不是在构造函数中。此外,避免在ItemRenderer中使用不必要的计算或重渲染...

    Flex ItemRenderer

    5. **调试和优化**: 在开发过程中,可能需要调试ItemRenderer,确保其正确渲染每个数据项。同时,为了性能考虑,应避免在`createChildren()`或`commitProperties()`方法中进行不必要的计算。 在提供的文件列表中,`...

    ItemRenderer的用法

    2. **性能优化**:避免在`ItemRenderer`中进行复杂的计算,因为它们可能影响列表的滚动性能。 3. **复用机制**:Flex的列表控件有渲染器复用机制,因此要注意渲染器的状态管理,确保新旧数据间的正确切换。 **示例...

    Flex 定制ItemRender详细解释

    5. **优化ItemRenderer性能**: - 避免在`render()`方法中进行计算或重绘操作,因为这会在每次渲染时执行。 - 使用数据绑定和皮肤状态减少运行时计算。 - 通过实现`IMeasure`接口优化ItemRenderer的测量性能,...

    ItemRanderer Examples

    7. **性能优化**:为了提高性能,应确保`ItemRenderer`尽可能轻便,避免在渲染器中使用复杂的布局和大量的计算。此外,复用机制意味着一个`ItemRenderer`实例可能会被多次使用,因此在`commitProperties`方法中处理...

    Flex中如何根据每行内容设置不同底色

    6. **优化性能** 为了提高性能,避免不必要的重绘,可以在`itemRenderer`中使用`commitProperties()`方法来检查是否真的需要更新颜色。另外,确保数据提供者的变化不会导致所有行都重新渲染,而只更新发生变化的行...

    ItemRendererTutorial.zip

    8. 优化性能:由于ItemRenderer会被多次实例化,应避免在`initialize()`或`commitProperties()`方法中执行昂贵的操作。尽量使用`updateDisplayList()`来布局和绘制,以提高性能。 通过以上步骤,我们可以创建一个...

    flex DataGrid改变指定行的背景颜色

    当DataGrid包含大量数据时,频繁改变ItemRenderer的颜色可能会对性能造成影响。为了优化,可以考虑使用虚拟布局(VirtualLayout),只渲染可视区域的行,从而减少不必要的渲染。 通过以上步骤,我们就可以在Flex的...

    Flex DataGrid 插入子组件

    在Flex开发中,DataGrid控件是一个非常常用的数据展示组件,它允许开发者以表格的形式展示大量结构化的数据。本文将深入探讨如何在Flex的DataGrid中插入子组件,以...在实际开发中,务必注意性能优化和用户体验设计。

    Flex4.x 构建可编辑的List【带序号排列】

    8. **性能优化**:由于List组件可能会包含大量数据,所以在处理大数据集时需要注意性能优化。例如,使用虚拟布局(VirtualLayout)只渲染可视区域的数据项,减少内存消耗和渲染开销。 通过以上步骤,我们可以成功地...

    从头开发Flex树遇到的问题

    在从头开发Flex树的过程中,开发者可能会面临各种问题,包括但不限于数据绑定、组件设计、事件处理以及性能优化等。 首先,Flex Tree组件是展示层次数据的常用方式,通常用于显示文件系统或组织结构。开发自定义...

    flex 中datagrid 动态攺变行颜色

    在Flex开发中,Datagrid是一种常用的组件,用于展示数据表格。在特定场景下,我们可能需要根据数据的状态或用户交互动态地改变Datagrid中...记得在实际项目中根据具体需求进行调整和优化,以保证最佳的性能和用户体验。

    SingleClickCellEditor

    在Flex 4.5版本中,`DataGrid`已经得到了进一步的优化,支持更多的自定义和性能提升。在这个案例中,`SingleClickCellEditor`通过`itemRenderer`实现了单元格的快速编辑。`itemRenderer`是一个自定义组件,它可以为`...

    DataGridCombox下拉列

    5. **性能优化**: 如果`DataGrid` 中的数据量很大,为了提高性能,我们可能需要在`ComboBox` 中实现虚拟化,只加载可视范围内的选项,而不是一次性加载所有数据。此外,合理的缓存策略也能帮助减少不必要的计算和...

Global site tag (gtag.js) - Google Analytics