1 原文信息

原文标题: Sencha Con 2013: Ext JS Performance tips

原文地址: [http://edspencer.net/2013/07/19/sencha-con-2013-ext-js-performance-tips/]

2 extjs 优化小建议

在和 Jacky 谈话之前,我还没计划发布一个独立的文章来分享在 extjs 编程的小建议,但这个内容实在非常好,并且我后来也记下了很多根据他原始空间中的笔记。为了让我们我自己从刚开始时学习遇到阻碍,我想给分析下 extjs 优化方面一些建议会给大家带来很多帮助。

extjs 随着每一次发布新版本,变得越来越灵活强大了。你现在可以通过它来做很多之前必须由你亲自来做的事情,但是,在使用 extjs 时需要考虑效率的一个问题。在很多情况下,这些低效率是由于不恰当使用框架时所造成的,而不是框架本身的问题。

有很多方式,可以用来加速你正不满意应用程序的效率,Nige在一个美丽的早晨,向我们介绍了这些方法。这也是这次我记下来的内容。

2.1 使效率降低的操作

Nige 总结了3个最经常出现的,使得程序效率低下的原因,我们接下来将一个一个的进行介绍

1. 网络因素

2. javascript执行效果

3. 层的活动性

2.1.1 网络因素

网络很差的情况下,会造成非常不友好的用户体验——使得应用程序启动时呈现一段空白的屏幕

使用 sencha 命令行编译工具来编译项目,将得到一个单一、被压缩的文件,将会得到这样的好效果:4810ms vs 352ms = 动态加载 vs 编译后

2.1.2 javascript 执行率

1. 避免减慢 javascript 引擎的操作(他是带着苦笑说的)

2.  优化重复的代码——例如,循环体内应该是非常紧凑的代码,缓冲变量尽量在循环体外被定义;不要在将对象附加到DOM元素时,进行其他的任何操作

3. 减少函数调用次数

4. 延迟加载实例化的对象

5. 使用网页分析工具(在extjs sdk 的示例文件夹中)来规范地分析你的应用程序

在启动 chrome 浏览器时,打开 –enable-benchmarking 标准属性,来得到在浏览器中执行时精确的运行时间信息

2.1.3 层

在增加或移除很多记录时,需要暂停 store 的事件。否则的话,我们将会在每一条记录被修改时,在全部层中传递修改的事件。

grid.store.suspendEvents();

//do lots of updating

grid.store.resumeEvents();

grid.view.refresh()

* 树控件中重复的东西(他们与表格属于同一类的) 

  尽可能地合并多个层。如果你正在一个简单的操作中添加或删除一串的组件,可以像这样来做:

  

  Ext.suspendLayouts();

  //do a bunch of UI updates

  Ext.resumeLayouts(true);

  

  容器类(Container)中的 add 方法接受数据项为数组的参数,这种方式的效率比通过迭代来一个个添加的方式快很多。尽可能低避免层之间的相互约束——在盒子层中,设置对齐方式为:‘stretchmax’是非常低效的。因为它不得不做在多个层中运行。尽快能地避免设置最小高度、最大高度、最小宽度、最大宽度等。

  

* 在启动时 

  如果可能的话,尽可能在静态代码中完成数据初始化的工作——避免在初始需要数据的层中设置通过 ajax 请求来获取数据

  不要一次发送多个 ajax 请求,并且使用空闲的事件名(idle)在响应数据中构建层对象。

  

* 使用空闲事件 

  与动态排队的方式非常相似

  

  Ext.globalEvents.on(‘idle’, myFunction) – 将会在很耗时的层操作/重绘等完成后,被调用

  

  使用空闲事件监听通常比 setTimeout(myFunction, 1) 操作更好,因为它在同等的重绘循环中是一个异步操作。这 setTimeout 过程意味着重绘发生了,然后你的代码被调用。如果你代码自身就要求一次重绘,那么意味着你将在 setTimeOut 方式中有两次重绘,而在空闲事件方式中,只会有一次重绘工作

  

* 减少层的深度 

  

  最大的问题——过多的嵌套。通常大家很喜欢对表格做这样的操作:

  

  {

      xtype: 'tabpanel',

      items: [

          {

              title: 'Results',

              items: {

                  xtype: 'grid'

              }

          }

      ]

  }

  

  更好的方式应该是这样的:

  

  {

      xtype: 'tabpanel',

      items: {

          title: 'Results',

          xtype: 'grid'

      }

  }

  

  这是非常重要的,因为多余的组件将会消耗CPU和内存。现在每一件事都是一个组件,不管是面板的标题、小图标等等。比你预计中构建了更多的组件。越强大可扩展性,久越容易造成滥用。

  

  延迟实例化操作,新的插件可以在以下链接中找到。 [https://gist.github.com/ExtAnimal/c93148f5194f2a232464]

  

  {

      xtype: 'tabpanel',

      ptype: 'lazyitems',

      items: {

          title: 'Results',

          xtype: 'grid'

      }

  }

  

* Overall impact 

  在实际操作中,通过 sencha 客户贡献的庞大示例可以得到如下结论:

  

  差的代码: 5187ms (IE8)

  好的代码: 1813ms (IE8)

  

  同样的示例代码,在Chrome浏览器中,差的代码与好的代码之间的时间比是:1300ms vs 550ms

2.2 总结

这现在只是理论上的探讨,你将在实际项目中看到它们的效果。这仅仅是课程内容的一小部分,而且是在一个经验不丰富的开发者我的口中(the horse's mouth 真有意思,不知道翻译得对不对)说出来的。Nige在分享这些建议时做得非常棒,并且提醒我们优化操作是开发者和框架共同的责任——这框架正随着时间发展而变得越来越快,但我们这些开发者也应该做好自己的事情,来确保使用这个框架时,仍然能继续保持高的效率。

3 译者的感想

从这篇文章中,学习到了一些新的词,动态排队(AnimationQueue)、空闲事件(idle event),我想这些技术应该是非常好的方向,是需要掌握的。

我们总说项目时间太紧,因此而放弃对代码的效率的提升,这是非常不推荐的,只要利用好了这些工具,提高了代码的效率,才能让我们更加自信地面对客户朝令夕改的需求变更,才能让我们这些程序员提高自身的竞争力!

extjs 优化小建议的更多相关文章

  1. redis优化小建议

    1.优化的一些小建议 1.尽量使用短的key 当然在精简的同时,不要为了key的"见名知意".对于value有些也可精简,比如性别使用0.1. 2.每个redis设置合理内存 每个 ...

  2. MySQL优化小建议

    背景 "那啥,你过来一下!" "怎么了?我代码都单元测试了的,没出问题啊!"我一脸懵逼跑到运维大佬旁边. "你看看!你看看!多少条报警,赶快优化一下! ...

  3. MySQL数据库优化小建议

    背景 “那啥,你过来一下!” “怎么了?我代码都单元测试了的,没出问题啊!”我一脸懵逼跑到运维大佬旁边. “你看看!你看看!多少条报警,赶快优化一下!”运维大佬短信列表里面好多MySQL CPU 10 ...

  4. IOS 性能优化的建议和技巧

    IOS 性能优化的建议和技巧 本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.marcelo ...

  5. JavaScript性能优化小窍门汇总(含实例)

    在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛.在web应用项目中,需要大量JavaScript的代码,将来也会越来越多.但是由于J ...

  6. 嵌入式C语言优化小技巧

    嵌入式C语言优化小技巧 1 概述 嵌入式系统是指完成一种或几种特定功能的计算机系统,具有自动化程度高,响应速度快等优点,目前已广泛应用于消费电子,工业控制等领域.嵌入式系统受其使用的硬件以及运行环境的 ...

  7. .NET性能优化小技巧

    .NET 性能优化小技巧 Intro 之前做了短信发送速度的提升,在大师的指导下,发送短信的速度有了极大的提升,学到了一些提升 .NET 性能的一些小技巧 HttpClient 优化 关于使用 Htt ...

  8. 有用的JavaScript开发小建议

    这篇文章将向你分享一些不为人知的但很有用的JavaScript小建议,对那些刚涉及使用JavaScript编程语言的初级开发者应该有很大的帮助. 1. 用数组长度截取数组 我们都知道,对象都是通过使用 ...

  9. 在JAVA中记录日志的十个小建议

    JAVA日志管理既是一门科学,又是一门艺术.科学的部分是指了解写日志的工具以及其API,而选择日志的格式,消息的格式,日志记录的内容,哪种消息对应于哪一种日志级别,则完全是基于经验.从过去的实践证明, ...

随机推荐

  1. sp_makewebtask

      Transact-SQL 参考 sp_makewebtask 创建一项生成 HTML 文档的任务,该文档包含执行过的查询返回的数据. 说明  所有 Web 作业在企业管理器的"作业分类& ...

  2. spring MVC中文乱码相关总结

    总结几种方式,都使用的话能解决大多数乱码的情况 1.所有页面使用 <%@page language="java" pageEncoding="UTF-8" ...

  3. Mac下搭建SVN服务器

    1.检查机器上是否安装svnserve zhangdeqiangdeiMac:Downloads hengjiang$ svnserve --version svnserve, version (r1 ...

  4. NSFileManager的应用

    单例,是在 一个文件中只创建一次就能够全部一起共享,多创建的地址是相同的 NSFileManager *manager=[NSFileManager defaultManager]; 是一个单例   ...

  5. strstr 的使用

    Problem E: Automatic Editing Source file: autoedit.{c, cpp, java, pas} Input file: autoedit.in Outpu ...

  6. 微信开发_微信教程__微信通讯框架V1.0

    做个广告先, PHP千人群(6848027) C++群 (1414577) 看雪汇编&反汇编群(15375777) 看雪汇编&反汇编2群(4915800) 转载不一定注明出处,只要推荐 ...

  7. C#使用系统的“显示桌面”功能(Shell.Application)

    原文 C#使用系统的“显示桌面”功能(Shell.Application) 在 Windows 系统的 任务栏 上的 快速启动栏 里,通常有一个图标  ,点击这个图标,就会切换到桌面.这个图标实际是一 ...

  8. JSP中的相对路径和绝对路径(转)

    1.首先明确两个概念: 服务器路径:形如:http://192.168.0.1/的路径 Web应用路径:形如:http://192.168.0.1/yourwebapp的路径 2.关于相对路径与绝对路 ...

  9. Sicily-1028

    一.        题意: 算出汉诺塔移动序列中对应位置的号码,数据规模很大,所以不能单纯递归,而是要找出汉诺塔序列的规律. 二.        汉诺塔数列 为了得出最少的移动步数,当n为偶数时,最上 ...

  10. Convert Sorted List to Binary Search Tree ------C++ 递归创建平衡二叉查找树

    有序链表 0->1->2->3->4->5 转换为一个二叉排序树.我们在此创建一个平衡二叉排序树 1.先找链表到中间的节点 2.中间节点的val创建一个新的树节点Tree ...