本文共 3608 字,大约阅读时间需要 12 分钟。
Asynchronous JavaScript. and XML (Ajax) 应用程序能够提高某些 Web 应用程序的性能。加载应用程序之后,获取较小的数据和内容片段可以帮助避免重新呈现整个页面的开销。不过,这样做得的代价是,应用程序的初始下载时间通常会比较长。
我现在已有多年的 Dojo 应用程序使用经验。 和 现在都包括 的 IBM 分发版本,提供了一些增值扩展。由于 Dojo Toolkit 的模块化特性,初始加载可能会花费相当长的时间,因为使用的每个模块可能都需要下载一些 JavaScript™、HTML 和 CSS 文件。这会在网络上带来大量额外的 IO 操作,远远超过每个模块本身的大小。
通常,这个模块化特征是程序员所必需的,因为通过其可以方便地进行调试和编码,但编写了应用程序之后,此模块化特征就不再重要了——或不再需要了。您可以通过多种方法减少 Dojo 应用程序的初始下载时间。
Dojo Toolkit 提供了打包和压缩技术,用于将在应用程序中使用的 Dojo 代码打包为单个文件,然后使用名为 Dojo ShrinkSafe 的压缩技术将其压缩到最小尺寸。大部分 Dojo 应用程序都应该将此技术作为其部署的一部分使用,因为此技术将极大地提高应用程序的性能(特别是初始下载时间)。您只需要为应用程序创建概要,并在其中指定要使用哪个 Dojo 组件。清单 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 教程,不过在 上提供了关于打包系统和自定义构建的更多信息。
可以极大减少初始下载大小的另一个方法是,对页面的内容部分进行延迟加载,并在加载之后对其进行缓存。有时候,这样的做法会更好:不在首次访问应用程序时就加载所需的所有东西,而仅在这个时候加载应用程序的部分内容。用户完全可能会在访问站点时从来不会访问 Web 应用程序的某些特定部分,因此下载这些不会接触的部分所消耗的时间都浪费掉了。所以,您并不需要下载应用程序中可能不会使用的部分。而且,第一印象极为重要:如果不能快速显示初始主页,可能会让用户更快放弃使用您的程序。
通常,您会希望加载包含初始菜单的布局,然后在加载之后获取主页内容。常见 Dojo 应用程序通常由一些布局元素组成。请看清单 2:
|
通过清单 2 可以了解一些事项。我创建了一个简单的方法来将 HTML 片段加载到特定的内容中。我还使用 dojox.layout.ContentPane 替代了缺省 dijit。扩展的内容窗格允许在加载区域时执行 JavaScript。通过这样,不仅可以延迟加载 HTML 内容,还可以采用延迟加载方式加载关联的逻辑。清单 3 显示了我所编写的实用方法的实现。
var loaded = new dojox.collections.Dictionary();function hideAll(){ console.debug("Hiding other content"); var ids = loaded.getKeyList(); console.debug("Getting ID -> " + ids); console.debug("List is Array"); for (var id in ids) { console.debug("Getting section -> " + ids[id]); var section = dijit.byId(ids[id]); console.debug("Got Section -> " + section); if (section) { console.debug("setting DOM"); section.domNode.style.display = "none"; } } console.debug("Content is hid");}function showItem(key,template){ hideAll(); console.debug("Show Item -> " + key); var item = dijit.byId(key); console.debug(item); if (item) { if(!loaded.contains(key)) { item.setHref(template); item.refresh(); loaded.add(key,template); } item.domNode.style.display ="block"; }}/** * Load Default page */dojo.addOnLoad(function loadDefault(){ console.debug("Loading initial state"); showItem('productList','product/product.html');}); |
在清单 3 中调用 showItem 时,我隐藏了在主体中可能可见的任何内容。我然后进行检查,确定是否加载了 HTML。如果未加载,将下载模板,然后将其缓存在 Dojo 词典中。下次请求此页面时,将会直接显示该区域。我还使用 dojo.addOnLoad 方法加载缺省页面。
在清单 3 中调用 showItem 时,我隐藏了在主体中可能可见的任何内容。我然后进行检查,确定是否加载了 HTML。如果未加载,将下载模板,然后将其缓存在 Dojo 词典中。下次请求此页面时,将会直接显示该区域。我还使用 dojo.addOnLoad 方法加载缺省页面。
我们很可能喜欢为主要应用程序组件创建 dijit(Dojo 小部件)。例如,在清单 4 中,可以看到将应用程序处理为 Dojo dijit 的示例。
|
在清单 4 中,我将每个应用程序组件都包装在 dijit 中。反过来,每个 dijit 都由子 dijit 组成。甚至可以将加载整个应用程序视为超 dijit:
问题是,您忽略了延迟加载内容(或太过复杂而不能考虑这个选项),特别在构建中包括所有小部件的情况下。我发现,最好为 UI 组件(Data Grid、专用组合框、特殊文本区)创建 dijit,然后加载使用 dijit 的普通 HTML 模板。
通过遵循一些指导原则和实践,可以很容易地减少下载应用程序的时间,而且仍然能够获得 Dojo 具有的一些性能优势。
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/14789789/viewspace-410134/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/14789789/viewspace-410134/