dojo dragon main logo

效率和性能

高效的渲染

动态网站内容(即包含 JavaScript)成为 web 的一部分已经有很多年了。长期以来,站点就可以包含一些脚本来操作 DOM,进行添加、更新或删除内容。但是,Web 的起源(至今仍然是它的一大关键特征)是以静态页面为基础的。随着时间的推移,浏览器的 DOM 实现得到了优化,以便尽可能高效地、快速地向最终用户渲染静态内容。

近年来,随着 web 应用程序越来越复杂,浏览器已通过 DOM 性能优化做出了回应,针对动态内容作了优化。然而,为了渲染用户界面,web 应用程序仍然需要与一套几十年不变的命令式 API 交互。围绕响应式数据传播而设计的现代 web 应用程序需要一种更高效的方式,将用户界面转换为网页的 DOM。

Dojo 将 DOM 从应用程序中抽象出来,推荐使用响应式状态流来最小化应用程序的样板文件,同时提高了渲染性能。部件会在渲染函数中输出虚拟节点,这些渲染函数使用虚拟 DOM 描述部件的结构层级。然后,框架以尽可能高效的方式处理 VDOM 的渲染,只会影响实际需要修改的 DOM 元素。

需要从 DOM 中获取具体信息来实现其需求的应用程序,Dojo 通过中间件系统提供了另一种 DOM 抽象层。Dojo 中间件以一致的方式解决了这些问题,并仍然支持横跨应用程序的响应式数据流。

应用程序的交付——分层和包

随着 web 应用程序规模的增长,当一个任务只需要访问一部分资源时,却必须加载应用程序的所有资源,这样效率就会越来越低。每一个应用程序资源都有一个与大小相关的成本:内存空间需求和网络上的数据传输;所有这些都会影响到用户开始工作之前需要的等待时间。让应用程序只在需要的时候加载所需的内容,从而将此成本保持在最低水平,这符合用户的最大利益。

获取应用程序的资源时,在 HTTP 资源协商方面会产生额外的开销。客户端需要请求数据,然后客户端必须等待服务器发送完资源的最后一个字节。更严重的情况下,开销还包括 DNS 解析、TCP 连接重建和 TLS 密码/证书协商。

浏览器可以有效地减少这一开销,但是浏览器不能完全消除这一开销——应用程序也有责任来减少资源传输的开销。与资源的大小相比,获取一个应用程序资源的开销是相对不变的。获取 1KB 文件的开销与获取 100KB 文件的开销类似。

因此可以通过两种方式降低开销:减少资源总数和增加单个资源的大小。web 应用程序可以通过分层和将相关的资源打包来实现这两种方式。

单个层中应该包含应用程序中特定功能相关的资源集。当用户访问该功能时,层中的所有资源可能同时加载。然后一个层包含的所有内容都可以打包到一个文件中,以便更高效地传送给用户。

自动分层

当使用 Dojo 的路由系统时,应用程序可以从自动分层和打包中获益。应用程序中的每个顶级路由都成为一个单独的层,Dojo 的构建系统会自动打包每层内容。这样就可以对层分离,以及打包资源,而不需要配置额外的工具链。这种自动化方案有一处折衷,即在每个包中都内联和复制了跨多个层的公共依赖项。

声明分层

复杂的应用程序可能需要对层或包的定义做更细粒度的控制。例如,如果应用程序有一组横跨多个路由的公共依赖项,不要在每个包中内联或复制这些依赖,则需要将公共依赖提取到自己的包中,然后在第一次引用时延迟加载。

Dojo 的构建管道允许在应用程序的 .dojorc 构建配置文件中指定资源,然后能自动将横跨多个包的模块依赖项转换为延迟加载的引用。