改善Dojo应用程序的初始下载时间

改善Dojo应用程序的初始下载时间2011-02-08 IBM Roland Barcia仅获取所需的数据

Asynchronous JavaScript and XML （Ajax）应用程序能够提高某些 Web 应用程序的性能。加载应用程序之后，获取较小的数据和内容片段可以帮助避免重新呈现整个页面的开销。不过，这样做得的代价是，应用程序的初始下载时间通常会比较长。

我现在已有多年的 Dojo 应用程序使用经验。IBM® WebSphere® Application Server Feature Pack for Web 2.0 和 Project Zero 现在都包括 Dojo Toolkit 的 IBM 分发版本，提供了一些增值扩展。由于 Dojo Toolkit 的模块化特性，初始加载可能会花费相当长的时间，因为使用的每个模块可能都需要下载一些 JavaScript™、HTML 和 CSS 文件。这会在网络上带来大量额外的 IO 操作，远远超过每个模块本身的大小。

通常，这个模块化特征是程序员所必需的，因为通过其可以方便地进行调试和编码，但编写了应用程序之后，此模块化特征就不再重要了——或不再需要了。您可以通过多种方法减少 Dojo 应用程序的初始下载时间。

使用 Dojo 构建和打包系统

Dojo Toolkit 提供了打包和压缩技术，用于将在应用程序中使用的 Dojo 代码打包为单个文件，然后使用名为 Dojo ShrinkSafe 的压缩技术将其压缩到最小尺寸。大部分 Dojo 应用程序都应该将此技术作为其部署的一部分使用，因为此技术将极大地提高应用程序的性能（特别是初始下载时间）。您只需要为应用程序创建概要，并在其中指定要使用哪个 Dojo 组件。清单 1 显示了一个示例。

清单 1. 示例概要

dependencies ={ 

  layers: [
    { 
    name: "example.js",
    dependencies: [

  "dojo.*",
  "dojo.parser",
  "dijit.dijit",
  "dijit.Declaration",
  "dijit.layout.LayoutContainer",
  "dojox.layout.ContentPane",
  "dijit.Toolbar",
  "dijit.layout.AccordionContainer",
  "my.widget.Super"
    ]
    }
  ],

  prefixes: [

 [ "dijit", "../dijit" ],
 [ "my", "/myWidgets"],
 [ "dojox", "../dojox" ]
  ]

};

然后您将运行命令行构建工具，使用各种选项传入概要。Dojo 构建然后将应用程序所需的所有代码（包括 JavaScript、HTML 和 CSS）放入单个文件中，并对其进行压缩。通过使用此方法，我发现在应用程序初始下载中，IO 调用的数量可能从 200 个以上减少到 2 个或 3 个。我还发现总体大小减少了约 60%。将很快推出关于使用 Dojo 构建和打包系统的 developerWorks 教程，不过在 Dojo 网站上提供了关于打包系统和自定义构建的更多信息。