ext.get和ext.fly的区别.docVIP

从一开始接触Ext就看到有Ext.fly这个函数，当时觉得这个跟Ext.get没什么区别，加之当时对JS性能相关问题认识肤浅，也一直没有在意其区别，今日看learning extjs一书，看到了有专门对Ext.fly特别强调的一处： This isnt exactly a speed tip, but is more about conserving memory by using something called a flyweight to perform simple tasks, which results in higher speed by not clogging up the browsers memory 大概意思也就是Ext.Fly采用flyweight模式使所有fly出来的元素共享内存，可以提高程序执行速度，减少内存占用。 这段话激起了我对这个函数的兴趣，毕竟近段时间一直在搞JS性能优化相关问题，对“内存”这个字眼非常敏感。大概看了下Ext源码对get和fly实现的部分，然后在网上查看了一些资料，终于对他们之间的异同有了个比较深入的认识。Ext的官方开发人员给出了如下的解释： Ext.Element wraps a lot of functionality around DOM element/node, for example functions like hide, show, all animation stuff, dimensions getting and setting function and a lot more. Ext.Element keeps reference to DOM element it is wrapped around in dom property. Once you have an Ext.Element (e.g. you call Ext.get(some-d) it is an instance of Element class and you can work with it as such. Now, imagine that you need to hide 1000 DOM nodes, you call 1000 times Ext.get(some-one-of-1000-id).hide() so you create 1000 instances of Element just to call one function: hide. Ext.fly is one instance of Ext.Element with replaceable DOM node it is wrapped around. If you call 1000 times Ext.fly(some-one-of-1000-id).hide() you 1000 times replace dom property of one instance of Ext.Element. Result: higher performance, lower memory usage. You only need to keep in mind that you cannot keep Element returned by Ext.fly for later use as its dom will sooner or later gets replaced by another one. 这段话中，大致的意思如下： Ext.Element是Ext对Dom元素的一个强有力封装，它封装了很多方便对dom操作的接口(并通过Element的dom属性引用对应的dom元素)，因此每创建一个Element元素都将消耗不少的内存(主要是大量的操作接口消耗)，因此如果创建过多的Element元素必然导致内存占用的剧增和系统性能的下降。 Ext.get和Ext.fly返回的都是一个Element对象，但是Ext.get返回的是一个独立的Element，拥有自己独立的操作接口封装，可以将其返回值保存到变量中，以便以后调用操作等，这样为重用带来了方便。但是它的一个很大缺点就是内存消耗问题，假如调用Ext.get(id)1000次，则会在内存中创建1000个独立Element，其内存占用可想而知。但是很多时候我们可能仅仅只是对该dom元素执行一次很简单的操作，如隐藏(hide)，这样如果每次都创建一个独立Element放在内存中，实在是对内存的巨大浪费，因此当我们在只需要执行一次操作或者一个很简单的操作时，采用E