关闭

【译文】ExtJS 4.1性能预览

3380人阅读 评论(6) 收藏 举报

原文:http://www.sencha.com/blog/ext-js-4-1-developer-preview/


      很高兴,今天发布了一个ExtJS 4.1的性能改善的预览版。在过去几个月,我们一直在努力地改善加载时间、渲染和整个框架内布局的性能,一直使用自己的例子和你们的应用程序做跨浏览器的基准测试和性能优化,并取得了一些显著的改进。

      今天,我们将开放当前的生成包,让你的应用可以感受一下速度的提高。我们希望你们用该版本测试你们的应用陈旭,但要注意此版本的只是前期性质的版本,这只是一个预测试的性能预览版本且某些组件存问题。我们不建议在生产环境中使用,但我们很乐意听到在应用中有关加载、渲染和布局性能等方面的响应。

      在此下载

      怎样让Web应用程序更快

      我们注意到在Web应用程序中的处理时间,主要有以下三大类:

      ■ 初始化:初始化所有类定义和准备运行。

      ■ 渲染:创建所有组件的标记并绑定到DOM。

      ■ 布局:在页面读取CSS信息、调整组件的大小和位置。

      了解这三方面的相互影响对优化非常重要。我们将使用SDK中主题查看器示例来作为本文的演示数据,经过我们不断的测试,其它例子的结果与此相同。

      主题查看器相当的笨重。它包含超过300个组件,在启动的时候会全部渲染到页面。它比大多数的启动页面,即使是最大的应用程序,更为复杂,所以我们认为它对应高度复杂的用户界面是相当好的一个示例。

      这里展示的数据都是消费档次的硬件上运行的IE8上测试出来的(在我们测试过的浏览器和示例中,我们认为这个很有代表性)。在我们在初始化主题查看器的基准测试的时候,发现该页面需要4.5秒才能完成加载。显然,我们要实现减少一半加载时间的宏伟目标。

      如何让它更快

      显然,布满组件的页面,布局的处理是相当昂贵的,但也可通过渲染和初始化来改善。我们依次进行处理,并获得实质性的改善:

      布局

      在4.0,布局是迄今为止最耗应用时间的组件。布局要做诸如找出页面中每个组件的大小和位置,应用边距、填充或边界等样式,将其写入DOM等许多工作。通过改变操作顺序,我们已经能够大幅提高性能。

      优化浏览器DOM读取和写入数据块的操作。因为通过回溯(reflows)、重绘和无效缓存进行太多的读写操作会导致性能降低。当很多组件布局在一起时,4.0只针对单独组件进行优化,效果并不好。

     在4.1,我们开发了一个在读写周期内批处理DOM读写的机制,这大大降低了浏览器回溯(reflows)和重绘操作。这有点戏剧性,在4.0大约有20多个回溯(reflows)。


     批量渲染

      越过布局,我们现在讨论渲染。一次性渲染300个组件对浏览器来说是相当费力的,但正如布局一样,可以通过批处理DOM写入一起写入页面。鉴于之前每个组件都是分开渲染的,在4.1,在Viewport下整个组件树将一次渲染到页面。

      该方法还大大减少了启动时间。在4.0,渲染主题查看器的300个组件,需要1100微秒,在4.1只需要350微秒,几乎是1微秒渲染一个组件,是4.0.7的3倍速度。

      初始化

      最后,我们讨论一下框架的底层和通过MixedCollection这类功能优化类系统的功能。这些改善措施的累积效果是从4.0.7的730微秒提高到4.1的300微秒,速度提供大于2倍。

      结果

      所有这些都提高了。在4.0.7,渲染这样一个填满组件的大页面,需要4.5秒,而在4.1,只需要2.2秒。在IE8上运行这个复杂的示例,有2倍速度的提高。

      主题示例不是唯一一个变得约来约快的示例,我们所有的示例在所有的浏览器都有显著的性能改善。我们为SDK中每一个示例都做了基准测试,我们将对比了示例的总加载时间,我们发现速度显著的获得改善:

      这些数字只是初步数字,因而与你期望最终版本会有些波动。然而,通过我们的测试与一组优先测试人员的实际的验证,我们已经实现了大幅度的性能提升。

      海王星预览

      虽然这个版本的焦点是性能,但它不是唯一的东西。在去年的SenchaCon,我们展示了令人兴奋的称为海王星的主题。虽然只是幻灯片上的一个截图,但引起了不少的轰动,并从那时候开始,已成为必需的功能之一。

      自从海王星的那一瞥开始,就一直被疯狂的追逐着。我们经过测试,你可以通过各种方式把组件放在一起,确保所有的颜色、边距和边界从上网本投影到屏幕看上去很棒。虽然我们还没完成,但今天很高兴能把它和ExtJS 4。1开发者预览版一起发布。

      在当前预览版,我们的目标是Chrome、Safari和Firefox这些现代浏览器,开发人员基本都使用这些浏览器(我们咨询到在这个群体内几乎每个人),这样你从一开始就可以使用海王星。我们会基于你对海王星的反馈,最终确定推出较旧浏览器的支持,直到IE6。

      警告:预览代码

      虽然我们对4.1已经获得性能改善感到很高兴,但我们还是要说明一下该版本的发布原因。我们希望尽快将4.1送到你手上,以便能验证你的应用程序的性能改善和测试新的主题。目前,我们预计你的应用程序会出现视觉瑕疵,怪异的行为,甚至JS错误等问题,因而,我们强烈建议你不要试图使用该版本作为生产版本。该版本只是用于收集性能和海王星的反馈。

      我们估计一些应用需要通过这个预览版做些修改迁移到4.1,尤其是有自定义布局和组件的。这是因为我们修改了布局引擎的底层架构,它对框架的高级应用会有一定的影响。我们会努力为你解决这些问题,我们已经建立一个专门的论坛来收集你迁移中遇到任何迁移问题,以便提高越来越近的4.1 beta版的体验。

      我们希望你喜欢以上看到的东西,并把你的应用转到ExtJS 4.1性能预览版。我们迫不及待的希望看到你在评论中的反应。

作者:Ed Spencer
Ed Spencer leads the development of Ext JS and Sencha Touch. An expert with Ext JS and JavaScript in general and with several years experience with traditional server side frameworks, he has broad experience in API design and delivery. His passion is in crafting beautiful code that supports the world-class Sencha product line.

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

ExtJS之图片浏览器(转载推荐)

1、效果图 2、此实例是在  http://yourgame.iteye.com/blog/477600 基础上进行改进并修改。    3、 js代码   Js代码   var...
  • DynastyTing
  • DynastyTing
  • 2016-11-17 16:56
  • 765

extjs上传图片预览

EXTJS图片上传预览(含本地上传前预览和服务器图片预览) 创建EXTJS组件 1 //生成messagePanel 2 createMessagePanel:functi...
  • zljjava
  • zljjava
  • 2014-05-09 18:23
  • 10255

ExtJs4实战(二) 搭建主页面

页面预览
  • u014677625
  • u014677625
  • 2014-06-20 19:50
  • 887

关于ExtJS3.1与ExtJS4.2的区别

1.可以使用alias来为组件添加别名,类似以前的Ext.reg,不过alias会用不同的类别区分开来,例如,widget.xxxxx和feature.xxxxx是不一样的,虽然它们都是用alias来...
  • qq_34639706
  • qq_34639706
  • 2017-07-04 13:58
  • 166

EXT+struts2实现文件的预览和下载

jsp实现寥寥几句代码 :a标签嵌个流,点击便可实现。那么extjs的下载又是怎个样子呢?没有了a标签,我们如何定位流路径呢?如何根据文件类型找到并生成相应流? 如何配置定义格式,使我们下载的文...
  • qiyuexuel
  • qiyuexuel
  • 2014-03-31 09:58
  • 2130

Ext 图片上传及预览,兼容多中浏览器

1、说明x-form-el-browseImage可以通过开发人员工具在html代码中查得//创建表单面板 var buildFormPanel = function(){formPanel = ...
  • NFA_YY
  • NFA_YY
  • 2017-06-23 09:33
  • 297

优化基于ExtJS 4.1的应用

虽然Sencha在Ext JS 4.1提高了性能,但基于Ext JS的应用性能优化仍然是奋斗目标。要优化应用性能,通常需要根据Ext JS的增强优势对修改代码。 本文将介绍如何实现优化,还将介绍...
  • xiaobai51509660
  • xiaobai51509660
  • 2013-12-30 13:53
  • 400

ExtJS 性能优化注意要点

1. 不要过度定义panel2. 尽可能延迟HTMLElement创建示例:renderTo的不必要使用var window=new Ext.window({ renderTo:document...
  • xundh
  • xundh
  • 2015-11-06 13:04
  • 1306

Extjs4框架的搭建

头部、菜单、内容区及底部则完全分离成4个JS文件,我们将先实现这几个文件的基础功能,由于使用的是Extjs4,所以我们一定要使用Extjs4 动态加载功能。来动态加载这些文件。 本文内容已经重新更新...
  • jcy472578
  • jcy472578
  • 2013-11-23 13:45
  • 956

Extjs MVC开发模式详解

在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序...
  • luckypeng
  • luckypeng
  • 2015-01-16 16:15
  • 4057
    个人资料
    • 访问:1570361次
    • 积分:17816
    • 等级:
    • 排名:第620名
    • 原创:164篇
    • 转载:28篇
    • 译文:101篇
    • 评论:2192条
    交流QQ群
    391747779
    193238033
    博客专栏
    《Ext JS 6.2实战》
    《Ext JS权威指南》
    《Sencha Touch实战》
    《Ext JS 4.2 实战》
    文章分类
    最新评论