第16章构建和部署

最新推荐文章于 2024-09-22 11:17:00 发布

blinkstar824

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量462

点赞数

分类专栏： JavaScript框架高级编程文章标签： javascript yui autocomplete yahoo 服务器浏览器

JavaScript框架高级编程专栏收录该内容

16 篇文章 0 订阅

订阅专栏

JavaScript 是一种非编译语言，它以明文形式通过网络传送给接收端中的浏览器进行解释和执行。以编写形式存在的代码 (保留所有空白符、注释和缩排格式) 对于需要阅读它们的开发人员而言非常便利。但对于计算机而言，这些代码却会减慢它们的运行速度。空白符和注释对于浏览器而言完全无用，它们可能占据 JavaScript 文件规模的 60% 。这可能就是造成在处理比较大的库文件时计算机性能低下的原因。

YUI 提供了几个解决方案来处理 JavaScript 的规模和传送问题。

本章内容简介：

如何使用来自 Yahoo! 的共享 YUI 文件
如何减少和优化加载时间

16.1 来自 Yahoo! 的共享 YUI 文件

缓存文件一直以来都是浏览器用来改进页面加载时间的一种有效技术。尽管缓存一个文件并不能帮助提高第一次加载该文件的时间，但是一旦该文件进入浏览器的缓存，那么访问它的速度就会得到极大的提高。这基本上是一种缩短距离的措施；将资源带到距离浏览器更近的地方，从而减少加载它们所需的时间。 除了从主机托管服务器 (hosting server) 上传送文件之外，我们还可以从在地理位置上距离访问者更近的服务器那里将这些文件传送给访问者。 这类服务器网络称为内容分发网络 (Content Delivery Network, CDN) 。作为一家大型公司，Yahoo! 拥有自己的 CDN 。在 2007 年2月随着 YUI 2.2.0 的发布，该公司选择在 CDN 上托管 YUI 文件。顺便提及一下，Google 也将 YUI 文件以及其他各种库放在自己公司的服务器中进行托管 (更多信息请参见 http://code.google.com/apis/ajaxlibs/documentation#AjaxLibraries) 。Yahoo! 的 CDN 与 Google 的 CDN 之间的主要差别在于，Yahoo! 支持组合处理 (combo-handling)，而 Google 支持 SSL 。

在 Yahoo! CDN 上托管的文件不仅距离访问者更近，而且它们的访问速度也要比一般服务器提供的服务速度快得多。这是因为 CDN 服务器专门配置用于传送静态的缓存文件，它们针对该需求进行了优化。与处理大量服务器端脚本且可能访问数据库的网站相比，简化的 CDN 服务器的速度要快很多。

通过使用托管 YUI 文件获得的另一个性能方面的好处是，如果访问者已经位于某个使用托管 YUI 文件的网站，那么该文件已经在他的计算机中 (因为文件的签名取决于它的 URL ，而该 URL 来自同一个来源)。换言之，访问者已经将该文件下载到自己的计算机上，因此他们不需要再次下载它。

使用 YUI 托管文件的最简单方式是访问 YUI Dependacy Configurator (http://developer.yahoo.com/yui/articles/hosting/) 。利用这个页面上的工具，通过一组易于使用的按钮，可以选择所有必要的依赖项，并且这个页面已经将必要的代码准备好，可供复制和粘帖到自己的页面中。使用这个配置器带来的一个好处就是，它能够感知特定库组件所需的依赖项。例如，单击 "AutoComplete Control" 按钮将生成代码来加载 autocomplete.css、yahoo-dom-event.js、datasource-min.js 和 autocomplete-min.js 。还可以调整配置器输出的最小化文件。通过单击另一个按钮，可以选择输出最小化的、原始的或调试版本文件。

下面是一个快速示例，演示如何加载核心 Yahoo、 Dom 和事件文件。确保所有的 src=表达式都在一行中声明。

"http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script>

"http://yui.yahooapis.com/2.7.0/build/dom/dom-min.js"></script>

"http://yui.yahooapis.com/2.7.0/build/yahoo/event-min.js"></script>

还可以像下面这样从汇总文件 yahoo-dom-event.js 中加载所有 3 个文件：

"http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

托管文件带有版本号 (在这里它们属于 2.7.0 版本)，因此不可能出现不小心修改它们的情况。新版本的库只会放在新版本号的文件夹下面托管。与可下载库一样，托管文件也有3种风格：最小化、调试和原始。可以简单地修改请求 URL 中的文件名，向基于文件名中添加 -min 或 -debug，或者不添加任何内容，就可以访问这些风格的文件。下面是采用3种不同方式加载 yahoo.js 文件的示例：

最小化

"http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script>

调试

"http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-debug.js"></script>

原始

"http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo.js"></script>

组合文件

尽管通过 CDN 来提供文件服务可以提高浏览器访问这些文件的速度，但是这需要建立多个请求来下载文件，从而产生另一个性能瓶颈。每个 HTTP 请求都要建立到服务器的请求并等待响应，这会造成时间损失。更糟糕的是浏览器在任一时刻最多只能建立两个到同一台服务器的 HTTP 连接，因此会有多个调用必须等待这些连接可用。此外，额外的 HTTP 报头数据以及文件头数据 (以图像为例) 也增加了需要往返传送的有效负载。

解决方案就是将所需的文件合并到聚合文件中，这样就可以尽可能减少 HTTP 请求数量。对于图像而言，这意味着创建子图形。对于 JavaScript 和 CSS 文件而言，所需的工作就是把这些文件连接成一个大型的 JavaScript 或 CSS 文件。YUI 已经有这样的文件，它的 yahoo-dom-event.js 文件就是由 yahoo.js 、dom.js 和 event.js 文件组合成的聚合文件。但是，其他的依赖项应该如何处理呢？为此，YUI 引入了组合处理程序，可用来动态地完成 YUI 文件的连接。下面就是使用组合处理程序加载 AutoComplete 脚本时的 JavaScript 代码。

"http://yui.yahoo.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/datasource/datasource-min.js&2.7.0/build/

autocomplete/autocomplete.js"></script>

尽管组合处理程序建立的 URL 比较长，但是最终结果只有一个 HTTP 请求。对于 CSS 文件也可以进行同样的处理。下面的示例演示如何通过组合处理程序同时加载 AutoComplete 控件和 Button 控件的 CSS 文件：

"http://yui.yahooapis.com/combo?2.7.0/build/autocomplete/assets/skins/sam/autocomplete.css&2.7.0/build/button/assets/skins/sam/button.css" />

16.2 减少和优化加载时间

除了 CDN 和文件连接，还可以把减小传输文件的大小作为另一项性能优化措施。JavaScript 或 CSS 文件大小的 40%-60% 来自于空白符、注释和冗长的变量名。

虽然并不属于 YUI 分发文件，但 YUI Compressor 是YUI 用来解决 JavaScript 和 CSS 文件大小问题的解决方案。它之所以不属于可分发文件，是因为分发文件本身已经是最小化文件，但是任何希望利用 YUI 优化自己代码的人都可以使用这个工具。在 YUI Library 首页上可以找到该压缩器的连接。

YUI Compressor 将 JavaScript 和 CSS 文件中的所有注释和不必要的空白符去除。对于 JavaScript ，它甚至还能将局部变量重命名成单字母名称，从而进一步减小文件大小 (之所以只重命名局部变量，是因为这不会让代码的实际 API 变得含糊不清，进而无意中引入程序错误)。

运行 YUI Compressor 需要 Java 。它使用 Java 分析 JavaScript 文件。下面的示例演示如何运行该工具 (x.y.z 代表 Compressor 的版本号)：

java -jar yuicompressor-x.yz.jar myfile.js -o myfile-min.js