【译文】ExtJS 4.1性能预览

原文：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.