FLEX性能优化

此文转载：

对于Flex性能我想是很多真正打算用它的人最关心的问题，也是我用了这么久之后体会比较深刻的问题，
目前我做过的系统性能也是一个大问题，在这里我总结了一些在技术上提高性能的方法。

1.避免容器的深层嵌套(因为每个容器都会对其子容器进行计算和调整，一般建议HBox,VBox最好不要超过3层，但对于复杂系统这个很难避免)
2.对于容器和空间的位置和尺寸尽量采用绝对坐标和硬编码。(减少Flash Player深层次的嵌套计算)
3.合理恰当的使用Grid容器，对于能用普通容器如HBox，VBox实现的尽量不要采用Grid(Grid嵌套层次深)
4.避免使用重复、冗余的容器嵌套，如：
1) 在Panel，Application中添加一层VBox，Panel,Application本来就是继承于VBox的，添加无谓的VBox只能降低你系统的性能。
2) 对于自定义的容器减少重复多余的父容器，比如：
  <mx:VBox backgroundColor=" #FFCCCC" borderStyle=" solid">
   <myComponent xmlns=" *" />
  </mx:VBox>
你完全可以采用下面的写法，对于myComponents可能它本身就是VBox
  <myComponent xmlns=" *" backgroundColor=" #FFCCCC" borderStyle="solid" />
5.延迟实例化导航类容器(Deferred Instantiation Navigator Containers)
   如ViewStack, Accordion, TabNavigator等，本身就提供了延迟实例化的功能，你只需要修改其creationPolicy='auto'即可，它将只实例化第一个要显示的子控件，其余的将在需要的时候实例化。
6.对于flex的效果(Effects)要做到尽量平滑(Smoothly)，比如延长它的持续时间(duration)，避免使用bmp格式的图片作背景。
7.对于DataGrid的复杂ItemRenderer，尽量用Canvas而不是VBox or HBox，这个和Flex 1.5中是不同的。
8.如果DataGrid的ItemRenderer是ComboBox等，尽量用ItemEditor而不是ItemRenderer，只有当选中的cell才会显示其Renderer(避免一次性把所有的cell Renderer都画出来)
9.记得随时Remove 没有用的Listener或采用弱引用，这个我在事件机制中提到过(URL...); null不用的变量和数组。
10.对于大批量的数据采用需要的时候去取或者分页
11.提前声明频繁使用的变量,如:
var l:int=list.length;
var w:int = stage.stageWidth;
for(var i : int=0; i < l; i++){
list[i].x = w -100;
}
12.这样也能提高Flex的性能，可能很多人都会不屑，但至少对于Flex来讲它能减少不必要的计算，改善性能，我想这个编程习惯问题要改还真是不容易，至少我写了1年多直到最近才注意到这个问题。
另外和代码组织有关的建议，如：
1) 系统性的常量写在一个常量类里头并用const关键字，一些ItemRenderer代码尽量独立成一个文件而不是直接到处都写
2) 不要在界面元素中引用一大串的parent.parent.parent...，一旦界面重新组织将给你带来很大麻烦。如果你用Cairngorm框架，那么就应该用ViewHelper，尽量的松耦合你的代码。
13.修改 production-mode 属性为true，2.01在文件flex-webtier-config.xml中。它一般是产品发布的时候要设置的，你可以理解为c++的 Release和Debug版本之间的差异。
14.如果你用FDS，那么尽量用Remote Object 而不是Http Service or Web Service，因为前者的效率最高
15.对你的系统进行压力测试，Adobe有一个测试工具，叫Flex Stress Testing Framework
(rul:http://labs.adobe.com/wiki/index.php/Flex_Stress_Testing_Framework).
它能提供对RPC中的RTMP， AMF，HTTP测试，一般的商业测试软件不支持前两者的测试，


简单的理解Flex的工作原理
        我通过简单的对比，让大家很快的了解它的工作原理。先回想一下jsp的工作原理，它首先被预编译成 servlet，也就是我们熟悉的java类，然后再编译成jvm所能执行的class字节码。而mxml文件的这个工作原理与jsp很相似的，mxml首先也被预编译成as中间文件，在编译成Adobe Flash Player 能执行的swf字节码。Adobe Flash Player 就像java虚拟机一样。但它们有一点不同的是，jsp的字节码执行是在服务器端执行的，而Flex的swf字节码是有服务器发送到客户端（浏览器）的Adobe Flash   Player 上执行的。这一点的差别，大家可能就可以看出flex的优点了，起码可以减轻服务器的压力了。
        更形象的我们可以把mxml比作jsp,而as看成servlet(java)来理解可能更简单了。上面是从工作原理上比喻是非常接近的。如果我们但从表现的比喻的话，可以把mxml看成是html，而把as看成javascript。这样大家可能会更好的理解，mxml(html)主要用来显示的，而as(javascript)主要用来控制一些编程逻辑和用户交互的需求。

  
    如果你正在IE8下使用BlazeDS的HTTP Streaming功能，默认条件下，这个功能是不能正常工作的。这个Bug已经被记录在http://bugs.adobe.com/jira/browse/BLZ-378 中。

HTTP Streaming 是一种介于Socket连接和HTTP Poll之间的方式。其应用方面主要是及时应用需求较高的地方，比如聊天，在线多人互动游戏，白板。他同步数据的实时性介于Socket连接和Http poll。

对于Socket连接，他的优点在于防火墙穿透性非常好，由于其实现是使用HTTP线程，因此，如果给大型企业开发应用时，遇到比较严格的企业防火墙机制，HTTP Streaming是比Socket连接更好的选择。

而对于Http poll来说，由于HTTP Steaming采用一个HTTP线程监听，一个HTTP线程取数据，自然延迟要比HTTP Poll小很多，效率也要高出N多倍。

这里，Adobe 的Bug追踪系统给出了暂时在IE8下的解决方案：在服务器上，配置services-config.xml （一般在WEB-INF/flex/下）对max-streaming-clients 这个属性进行配置。

评论

1 楼 xiao_feng68 2010-08-04  

非常感谢，受教了！