文档章节

Ext JS 5 简介, 对比Ext JS 4的改进

Big_BoBo
 Big_BoBo
发布于 2014/07/28 18:27
字数 1662
阅读 194
收藏 0

原文链接:http://www.bryntum.com/blog/a-first-look-at-ext-js-5/

    随着最近第一版Ext JS 5 Beta的发布,我们认为它拥有者非常cool的新东西,所以我们来记录下一位不时之需。自从我们成为了一个非常成熟的Ext JS团队之后,我们对于隐藏在表面之下的更新和技术详情非常感兴趣。我们将对比一下新旧版本间在内存占用,性能,差别的API的不同。同时---自从我们严重地依赖Grid控件后,我们也非常好奇它的变化,和它的性能基准。

第一眼

    我们注意到的第一件事是ext-all-debug.js文件看起来非常的小。并且它不是真正的ext-all-debug.js文件,你不能引入它来驱动你的应用。如果你的应用使用其中一个ext-all-XXX.js文件,你需要更新你的引入路径指向/build/ext-all-XXX.js。同样的所有的CSS文件,ext-all.css现在在路径 /packages/ext-theme-classic/build/resources/ext-theme-classic-all-debug.css中。现在我们知道如何去找到相关文件的位置后,让我们创建一个简单的例子和研究它的内存使用。

内存占用

在一个html页面中引入 ext-all.js 并用运行在MacBook Pro上的chrome中进行内存占用跟踪。

Ext JS 5.0.0.736

1
2
// Memory footprint
console . memory . usedJSHeapSize      // 27600000

Ext JS 4.2.2

1
2
// Memory footprint
console . memory . usedJSHeapSize      // 13400000


包含整个Ext JS类库的内存占用翻了一番。注意,这不像那些由Sencha Cmd帮助下可以由你自定义创建你的应用所需的最精简内存占用的的类库。


Grid 性能

    我们继续看grid的性能和调整其中一个locking grid的例子并在一个新的chrome中重新打开它。你可以看到在这个Sencha Fiddle的测试用例中,我们增加了1000条记录到store中来测量渲染时间。在渲染之后我们会检查当渲染这样一个大的grid时的元素创建的个数。Ext 5 Grid现在为每一行使用一个table,来消除布局和更新一个大的table时给浏览器的压力。这些‘开销’通常需要更多的DOM元素在下面的比较中。


Ext JS 5.0.0.736

1
2
3
4
5
// Initial render time
console . timeEnd ( 'render' ) // 620ms
 
// Checking total number of DOM elements
Ext . select ( '*' ) . getCount ( )        // 18101

Ext JS 4.2.2

1
2
3
4
5
// Initial render time
console . timeEnd ( 'render' ) // 650ms
 
// Checking total number of DOM elements
Ext . select ( '*' ) . getCount ( )        // 14113

    在这些元素的数目之上,渲染的时间有了轻微的提升。相对于在Ext JS 4.2.2中,新的grid控件渲染1000行同时缓冲渲染关闭的确是相当的快。为了快速的渲染,当使用deferInitialRefresh : true (default)时,似乎有一些前置处理在进行(在Ext JS或者是在浏览器布局时),这时grid不会在一到两秒内响应滚动。当设置这个标志为false时,grid会立即在渲染后响应。


    另一个重要的方面是grid在数据变化后的响应。我们增加一个按钮到我们的例子中,点击它会产生200条记录的更新。

buttons : [
    {
        text    : 'updates',
        handler : function () {
            console.time('update')
            for (var i = 0; i < 200; i++) {
                store.getAt(i).set('company', 'foo');
            };
            console.timeEnd('update')
        }
    }
]

    Ext JS 4.2.2花费了126秒来完成这个任务。在这期间浏览器完全被卡主并失去响应。当使用Ext JS 5时,这个更新花费了13秒。这个场景产生了10倍的速度提升。这当然是一个极限的场景,你不应该在DOM中渲染这么多行,而是使用Ext JS中的缓冲渲染(buffered rendering )。


向后兼容性

    另一个我们特别感兴趣的是在一个大版本升级下的向后兼容性。记得Ext JS 3 to 4升级时的麻烦,我们希望这次的升级可以干净和简单些。再一次,自从我们知道我们有一些重载的private 方法和使用了一些private 的属性后我们认识到我们需要跨界一些不兼容的障碍。为了更好的准备我们的升级,我们决定编写一个简单的差异对比工具来对比两个版本的Ext JS和高亮删除的类和属性。这使给我们产生一些有意思的信息变成了一个相当容易的任务,你可以在这里看到结果。



因为后面的对我不是特别重要,所以我就暂时留着不翻译了,大致就是说,一些不兼容的api,导致老版本会不能正常运行,待我有兴趣再补上吧···

The tool inspects all Ext JS JavaScript symbols, classes and prototypes to see what has changed. It makes no distinction between private and public properties, so most of the information it shows will be irrelevant to you. It will be interesting however, if you rely on some private Ext JS methods or properties, and such properties are removed or changed in Ext 5. This should not be considered a breaking change, Sencha refactoring private code is expected and your application code should naturally rely as little as possible on undocumented parts of the framework. The output from this tool should not be considered as the full truth, and may contain errors or missing changes. If you want to try it out yourself, you can find this tool on GitHub and hopefully it can help you find vulnerable parts in your code base before you start your upgrade process.

Breaking Changes In Ext JS 5

We have mainly looked at issues we found when trying our own upgrade. Mainly we have inspected the GridPanel class, its related classes and the data package so far, so this list is most likely incomplete. Here are a few things to look out for if you want to try to upgrade to the Ext JS 5.0.0.736 build.

Ext.data.Model – fields. This property has changed from being a MixedCollection and is now a native Array.

Ext.data.Model – modified. This property has changed its default value, from being {}and is now undefined. If you check this modified object in your codebase, you now first need to check for its existence.

Ext.grid.View – itemSelector. Grid rows used to be rendered as a simple TR node, this property is now “.x-grid-item” and if you have CSS styling relying on this selector you need to update your CSS.

Ext.fly(el).on. In Ext 5, you cannot use a FlyWeight element to attach event listeners. You now need to use Ext.get instead.

Unique Model Names. In Ext 5, you cannot currently have two models in different namespaces with the same suffix. Example: Defining Foo.bar.Model and laterFoo.other.Model will throw an exception in the current Ext JS 5 beta. This has been reported here.

Ext.util.Observable – addEvent. addEvents has been deprecated and will lead to an exception if called. Calls to addEvents can be safely removed (even in Ext 4.x).

Conclusion

Overall, the Ext JS 5 package looks solid. New great looking themes, new features and only a few glitches detected so far. We were actually able to get the Scheduler component rendered and working within a few hours which is very promising – screenshot below.

Screen Shot 2014-04-04 at 16.34.01

We’ll continue to monitor the coming Ext 5 betas and update our tool to show the latest changes in the framework. If you have any feedback of how we can improve the diff tool or if you have found any other breaking change we should know about, please post in our comments or forums.




© 著作权归作者所有

共有 人打赏支持
Big_BoBo
粉丝 54
博文 54
码字总数 22137
作品 0
杭州
高级程序员
私信 提问
Ext JS 4.1 正式版发布,性能提升 30-100%

今天 Ext JS 发布了 4.1 正式版,该版本显著的提升了 Ext JS 4 的性能,同时还包括不少新特性和其他方面的改进。在此之前经过了3个beta版以及3个rc版的测试,非常感谢社区对 ExtJS 的大力支持...

红薯
2012/04/25
8.2K
31
Ext JS 4即将正式发布,值得期待

Ext JS是一个针对Web的UI库。它是市场上的轻量级工具,它通过抽象,支持开发人员不必强制性地编写HTML的源代码,而且允许开发人员灵活的扩展组件库或者通过简单强大的插件架构创建真实的插件...

张金富
2011/11/04
0
2
ExtJS 3.0以上版本在eclipse中使用spket插件设置自动提示的方法

网上很多关于安装Ext JS自动提示插件的方法,但是发现在Ext JS3.0以上的版本中没有提示。 在eclipse中安装spket的方法: 1、下载spket-1.6.4.1.zip压缩包,解压把压缩包中eclipse下两个文件夹...

Neil_
2013/10/23
0
0
eclipse+spket+Extjs4.2.1开发环境搭建

一、开发工具配置 1、http://www.eclipse.org/downloads/下载Eclipse,解压。 2、http://spket.com/download.html下载Plugin,解压后覆盖到Eclipse的目录。 3、启动Eclipse,选择window→pro...

南風
2014/08/20
0
0
运用 Ext JS 4 的 MVC 架构

Ext JS 4 简介 Ext JS 4 目前是 Sencha 的产品,4.x 的正式版本号是 4.0.7。Ext JS 4 提供商业版本,但如果您的项目是开源的,则可以免费使用 Ext JS 4。Ext JS 的论坛目前非常活跃;Ext JS ...

IBMdW
2012/10/16
853
3

没有更多内容

加载失败,请刷新页面

加载更多

Httpd 整合 Tomcat 步骤

环境:Tomcat8 + Httpd2.4 工作原理:借助于Tomcat的AJP连接器实现Apache与Tomcat的通信 配置步骤: 1. 配置httpd.conf 新增: Include conf/extra/mod_jk.conf 修改:添加 index.jsp <IfM...

ZeroneLove
昨天
1
0
Docker笔记3——容器命令(未写完,明天整理接着写)

未写完,明天整理接着写 新建并启动容器 docker run docker run [OPTIONS] IMAGE [COMMEND] [ARG...] OPTIONS: --name=[容器新名字] :为容器指定一个名称 -d:后台运行容器,并返回容器ID,...

HappyBKs
昨天
1
0
2018个人年终总结

感谢领导的信任和指导,新的一年获得了很多成长和提高,改掉了很多不好的习惯。 在这一年里,我在领导的帮助下,主要完成了以下功能: 1、完成上海银行版本投资营销相关功能的开发。 2、完成车...

万山红遍
昨天
10
0
保密工作与linux系统的发展

保密工作从性质上可以分成商业方面的保密和国家安全方面的保密。由于自己从事的是IT方面的工作,工作中必然会接触涉及到计算机信息方面的相关文件。加上单位已近通过武器装备科研生产单位二级...

linux-tao
昨天
3
0
Spark共享变量

概述 Spark程序的大部分操作都是RDD操作,通过传入函数给RDD操作函数来计算。这些函数在不同的节点上并发执行,但每个内部的变量有不同的作用域,不能相互访问,所以有时会不太方便,Spark提...

仟昭
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部