- 浏览: 1432565 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
1.Ext.lib.Ajax
应该是从 YUI 借鉴过来的,没有看过 YUI 源码,它的工作方式确实比较独特,没有采用常见的判断 readystatechange ,而是自己定时轮训查看状态
好处:可以随时终止,只要不轮训就可以了么(例如超时判断),否则 readystatechange 的话,超时就比较麻烦,回调函数仍然会被调用,只有在回调函数中判断了是否超时了。
ps:这种情况也可采取直接将
readystatechange=null 即可。
坏处:可能不是事件发生的同时处理,有点滞后,不过50ms的轮训事件已经很短了。
2.Ext.util.TaskRunner
这个有存在的必要么?原先可以多个 interval 处理的东西 ,由 taskrunner 管理的话,集中由一个 很短的interval 管理,有什么好处?
3.Ext.lib.AnimBase
Anim 一块非常复杂,Ext 将各个功能解耦:
Ext.lib.AnimBase : 框架每个想要动画的元素父类
Ext.lib.AnimBase的子类:表示元素具体要哪方面的动画
Ext.lib.ColorAnim:颜色渐变等
Ext.lib.Motion:平滑移动等
Ext.lib.Scroll:平滑滚动等
runtimeAttributes = {} : 记录动画属性 在动画过程中的具体变化
Ext.lib.Easing 由 Ext.lib.AnimBase 调用,元素从一个位置变到下一个位置的值,很多计算方式
Ext.lib.AnimMgr 调度Ext.lib.AnimBase的集合,各个动画 统一 interval 调度
由于每个setTimeout会由浏览器新开一个线程来处理,那么当settimeout很多时,浏览器就会不可思议的慢。( Efficient Javascript )
让我们看看John Resig 是怎么评价的 :
(From Secrets of the JavaScript Ninja)
对计时器进行中央控制的好处:
1.一个页面可以同时只有一个计时器在运行
2.你可以随时暂停或继续所有计时器
3.很容易移除回调函数
增加并发的计时器很可能导致浏览器的垃圾回收行为,认识到这一点很重要,垃圾回收简单地说就是浏览器解开节的过程
(删除无用的变量,对象等等),因为计时器脱离正常的javascript引擎控制的流程(通过其他线程),
有些浏览器很擅长处理这种情况,但是有些浏览器就会导致很长的垃圾回收周期,你可能遇到过这种情况,在一个浏览器中
流畅进行的动画在另一个浏览器就变得拖拖拉拉,或者刚开始就结束。所以减少并发的计时器非常有必要(这就是为什么现代的
动画引擎都是只有一个全局控制计时器)
例子:如何把不同属性的动画设置过程用一个计时器来实现
<div id="box" style="position:absolute;">Hello!</div> <script type="text/javascript"> var timers = { timerID: 0, timers: [], start: function(){ if (this.timerID ) return; (function(){ for ( var i = 0; i < timers.timers.length; i++ ) { if ( timers.timers[i]() === false ) { timers.timers.splice(i, 1); i--; } } timers.timerID = setTimeout( arguments.callee, 0 ); })(); }, stop: function(){ clearTimeout( this.timerID ); this.timerID = 0; }, add: function(fn){ this.timers.push( fn ); this.start(); } }; var box = document.getElementById("box"), left = 0, top = 20; timers.add(function(){ box.style.left = left + "px"; if ( ++left > 50 ) return false; }); timers.add(function(){ box.style.top = top + "px"; top += 2; if ( top > 120 ) return false; }); </script>
这样我们创造了一个中央计时器结构,我们可以随时添加回调函数,并且可以开始停止
这个中央计时器,并且每个回调函数可以返回false来随时终止他们的运行,这比
调用clearTimeout的方式简单多了。
代码详解:
所有的回调函数被保存在一个中央队列(timers.timers),还有中央计时器(timers.timeID),
真正能够开始函数是start(),我们首先检查中央计时器是否已经运行,没有的话就是它运行。
中央处理器遍历所有的回调函数,依次执行。如果回调函数返回值是false,那么
该回调函数从当前队列中移除,这是一种比传统模式简单的停止方法。
另外一点需要注意的是:这种形势下回调函数会以他们添加的次序被执行,
传统的定时器并不能保证这点(浏览器有时会神智会乱 :()
这种定时器的管理方法对于大型应用或者任何形式的动画引擎都非常重要,并且对于
项目后期扩展以及跨浏览器的应用非常有帮助。
4.Ext.Template
大量的利用了 String 的 replace 这个函数
compile 非常精巧,利用 javascript 语言特性动态产生特定模板函数 ,对于一个模版固定,数据经常变化的场合提高系统效率,否则每次正则查找确实很低效。
ps:传统技术中也有类似的应用,例如 "即时代码生成 "技术, 函数可以在运行时查看各参数值,然后为它的函数体生成更加高效的,直接针对特定参数值执行的代码,然后跳到这些代码去运行。
特定的模版函数可以产生特定模板汇合不同数据而产生结果字符串,细节,ie 用了 数组join提高效率,ff 则不用了直接用 + ,可见 ff 对字符串concat优化了,不用我们特殊考虑。
09-09-08 note:
关于 string 的 加操作,Nicholas C. Zakas 在even faster websites 中也有提到:
从firefox1.0开始,对string的+操作进行了优化,使得直接+操作在任何情况下都要比比array join要快,其他浏览器如chrome,safari,opera,ie8都做了上述优化,而ie8以下的版本则没有优化.
当string长度增长(20+)以及+操作次数增大(1000+)时,ie8以下版本array join方法比+方法越来越快,firefox,safari则两种方法性能越来越接近,当然+操作仍然稍快点,而chome和opera则+方法无论如何都比array join方法会很多.
总结:
所以你可以象ext一样区分浏览器对待,但是一般情况下用+即可.
发表评论
-
模块化高扩展性的前端框架 KISSY
2013-03-14 14:58 8542模块化高扩展性的前端框架 KISSY 注:本文为 2 ... -
构建前端 DSL
2012-10-11 22:10 5282目前在传统的软件开 ... -
KISSY kisses bootstrap navbar
2012-08-03 01:12 5952看了下 bootstrap 的导航菜单,立刻非常喜欢,注意是浅 ... -
promise api 与应用场景
2012-02-07 17:34 7281promise 是 commonjs 社区中提出的异步规范,其 ... -
unified event model
2011-10-14 23:02 1744为了处理原生事件在各 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2784简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2786场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2198分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6932作为前端开放的基础安全保证,caja 是目前比较合 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2409这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
just another event model
2011-06-08 20:47 2125事件模型也算是客户端兼容性的一个长期问题,早期 jquery ... -
框架 build 系统介绍
2010-07-11 01:29 1587一个复杂的类库通常都包括很多子模块( jquery@git ... -
querySelectorAll 探讨
2010-07-01 22:35 4395随着css selector engine在越来越多的java ... -
再谈 attribute
2010-06-22 11:37 2563@slideshare 原生: ... -
事件机制探讨
2010-06-21 13:54 2176由于浏览器事件机制的不兼容性,譬如最常见的注册事件差异 ... -
利用Attribute重构:业务与UI分离
2010-06-08 16:54 1537很简单的一个应用 通过按钮来限制输入范围 ,这样的话再 ... -
yui3 loader的串行加载特性
2010-06-04 12:30 1767yui3 的沙箱机制可以在 ... -
yui3下的load事件触发
2010-06-01 13:31 3158以前的一些总结:页面l ... -
理解YUI3 extension:Base.create
2010-05-31 03:01 1956YUI3中为了避免不必要的类继承层次,以及摆脱利用原型链模拟的 ... -
google WebFont Loader 源码阅读
2010-05-22 01:04 2711资料: 关于新发 ...
相关推荐
ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0
ext-core-3.0.0ext-core-3.0.0ext-core-3.0.0ext-core-3.0.0
spketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-...
ext-ms-win-gdi-desktop-l1-1-0.dll 用于解决这个dll文件丢失问题,下载后将此文件放置在相关文件根目录下,即可解决丢失问题
包括了ext-air-3.1.0和ext-core-3.1.0
Ext-Core 3.1.0 简体中文手册Ext-Core 3.1.0 简体中文手册Ext-Core 3.1.0 简体中文手册Ext-Core 3.1.0 简体中文手册Ext-Core 3.1.0 简体中文手册
bcprov-ext-jdk15on-1.68.jar
前端开源库-style-ext-html-webpack-pluginStyleExtHTML Webpack插件,通过启用内嵌样式增强HTML Webpack插件功能。
1.下载 bcprov-ext-jdk15on-160.jar,复制到jdk_home\jre\lib\ext 2.配置bcprov,在 jdk_home\jre\lib\security\目录中找到 java.security 在内容增加一行 security.provider.11=org.bouncycastle.jce.provider....
ext 是 ExtJs 的简称,是一个强大的js 类库。本资源主要包括三个大的文件ext-all.css,ext-base.js,ext-al.js。在引用ext 类库的时候,这三个文件必不可少。另外我还提供了ext2的一个简单例子,以便大家学习交流。
ext-7.0.0-gpl.zip
bcprov-ext-jdk16-1.45.jar资源包 ,在进行JAVA的ECC椭圆算法调用时,需要用到的jar包
1.bcprov-ext-jdk15on-1.54.jar 2.bcprov-jdk15on-1.54.jar 下载地址在:http://download.csdn.net/detail/cw_hello1/9557049 2.将下载的两个JAR文件复制到:JDK安装目录\jre\lib\ext下,例如我的就是D:\Program ...
Gwt-ext学习笔记,Gwt-ext学习笔记,Gwt-ext学习笔记
ext-3.3.1ext-3.3.1ext-3.3.1ext-3.3.1ext-3.3.1ext-3.3.1
从spket IDE 官网下载。 文件名: ext-4.2.1.883.jsb2 对应版本ext-4.2.*版本。spket自动提示ExtJs4,需要ext4.2.1.jsp2文件。
ext-4.2.1-gpl.7z
bcprov-ext-jdk15on-1.54.jar和bcprov-jdk15on-1.54.jar压缩文件
ext-js-4.2框架ext-js-4.2框架ext-js-4.2框架ext-js-4.2框架
bcprov-ext-jdk15on-164.jar:支持java5-11。将jar包放置在%java_home%/jre/lib/ext目录。