让Web应用程序飞起来的秘诀

古城微笑少年丶 2022-06-15 05:54 178阅读 0赞

**导读：**通过提高Web资源的性能，让它们变得更小，使得网站的访问者将可以更快地加载较小的源文件，而且将可以节省网站所用的带宽。本文介绍了如何通过对CSS和JavaScript文件——两种易于优化的常见资源，使用社区中提供的工具即可完成优化——优化空间使用来实现更高的性能。然而，在继续之前，有一点是很重要的，压缩CSS和JavaScript文件只是为了让Web应用程序“轻巧”的诸多操作其中的两个技术。关于优化其他资源（比如，HTML和图像）的技术，可以从其他书籍或网络资源等参考资料中获取更多信息。本文内容由CSDN编辑节选并整理了IBM developerworks而来。

**问题：空白内容**

当开发人员使用CSS或JavaScript文件工作时，空白内容通常是一件好事。空白内容包括缩进文件所使用的字符，增强可读性的间距、以及为了在文章的不同部分添加一个可视间隔而插入的额外空行。空白内容使文件易于阅读和维护。如果CSS文件中有适当数量的空白内容（和注释），将有助于开发人员理解CSS代码的意图。

从这一点上来说，将文件变得更小作为问题的一个长期解决方案是不可行的，因为文件很有可能在将来会被修改。如果将空白内容和注册全部删除，CSS和 JavaScript代码就很难阅读。

问题是逐渐增加的空白导致文件不断增大。每个空白行、缩进和括号之间的空格至少占用一个额外字符，这对于CSS或JavaScript代码的正确解析来说实际上并不需要。首先，一两个空白没有什么大不了的，但是小数量乘以一个很大倍数时就变成很大的数量了。

考虑这样一个文件，其中额外空白总计5KB。如果网站每天的点击率是1000，每天节省5KB每个月就可以节约大约146 MB（(5K \* 1000 \* 30) / 1024作为粗略估计）。就这而言，该文件的点击量还是相对保守的估计，实际空白成本可能还会增加。

此外，下载文件的用户必须等待文件的下载。尽管许多用户在他们第一次访问网站后可能就有缓存的CSS或JavaScrip文件，性能仍然会对他们的第一次访问造成负面影响。如果可以减少CSS和JavaScript文件，即使每次1KB，都可以减少数千字节的浏览器必须加载的数据。

**解决方案：压缩**

要解决问题并从小资源获益，一个显而易见的解决方案是从CSS和JavaScript文件删除额外元素，比如注释和空白。但是，由于在开发过程中从文件删除注释和空白不可行，一个较好的解决方案是 “分级” 的网站资源、优化它们、然后将其发布。

编写一个删除空白字符的定制脚本最初听起来是一个可行的解决方案，但是在CSS和JavaScript文件中本身都有很重要的空白。因此任何删除空白和压缩文件的工具必须是足够智能，可以区别哪些语言中哪些空白是重要的。

幸运的是，在社区中已经可以找到这种工具了，它们已经经过资源（比如 CSS 和 JavaScrip 文件）压缩测试了。其中一个工具就是 YUI Compressor，一个来自Yahoo! Developer Network的可用工具。

**YUI Compressor**

YUI压缩器是一个使用Java编写的程序，拥有Berkeley Software Distribution许可证。YUI Compressor可以缩小（压缩）CSS和JavaScript代码，这样无需自己编写工具就可以享受小资源带来的益处了。首先，可以下载YUI Compressor，然后提取文件，放置到一个容易访问的位置。归档文件包括完整源代码和一个用于构建YUI Compressor的Apache Ant 脚本（build.xml）。在原文中，作者以代码实例诠释了如何CSS和JavaScript文件[(您可以点击这里查看更多代码实例)][Link 1]。

通过YUI，以下优化将在JavaScript文件中执行：

*  删除空白。从JavaScript代码中删除所有不重要的空白，包括新行。
 *  删除注释。从 JavaScript文件中删除所有注释，除了这些C风格的注释，以 /\*! 序列开始的。如果公司版权或者其他信息必须保留在文件中，务必使用该序列包含注释内容。
 *  重命名 Method-scoped 变量。除非使用YUI Compressor 命令的 --nomunge选项，否则YUI Compressor将自动缩短JavaScript文件中的变量名。（将变量声明单独留在函数外，假设它们可能会用于其他地方）。由于JavaScript语言中的变量名仅需至少一个字符，就能为JavaScript文件节省相当多字符。替换变量稍微混淆JavaScript代码，但是由于不需要修改代码版本，应该问题不大。
 *  删除分号。像压缩CSS一样，一些不重要的分号（;）将被从JavaScript代码中删除。

其他选择。--line-break 选项对于分离文件可能是重要的，因此这一行不能太长。（优化时 YUI Compressor会删除换行符。）

**看看优势**

要想查看压缩的优势，可以使用不同的工具，其中两个是构建在浏览器中，这使得使用它们比使用分析工具方便得多：Google Chrome Web浏览器的开发人员工具和Mozilla Firefox的Firebug插件。这两个工具都展示了下载的附加资源以及文件大小和下载它们浏览器所用的时间。

图 1 是一个Chrome开发人员工具分析一个页面的示例。（要访问这些工具，在您的浏览器中单击 Tools > Developer Tools。）

图 1. Chrome 浏览器附带的开发人员工具

![被分析的页面截图][212012M03-0.jpg]

图 2 展示了 Firefox 中的 Firebug 插件分析同一页面 。

图 2. Firebug 插件

![使用 Firebug 插件分析页面的截图][Firebug]

如果使用一个自动工具，就可轻松地获取一个使用旧文件的URL和另一个包含压缩文件的URL（例如，http://localhost/orig 和 http://localhsot/minified）。开发者可以使用这些工具来对Web应用程序进行基本的分析，就会知道压缩CSS和JavaScript文件会有多大的不同。刚开始差异可能很小，但做一些数学运算，就能明白执行优化比起置之不理，长期效果是多么的明显。

此外，作者还分析了如何使用自动化和集成工具去压缩CSS和JavaScript代码([可点击此处查看][Link 1])。

**结束语**

YUI Compressor是一个可以用来优化CSS和JavaScript源文件的工具，使它们变得更小。小的原文件会带来了许多好处，节省了带宽、为访问提供更快的加载时间。尽管对于一个文件节约似乎微不足道，但是如果大量使用，累计起来相当可观。如果添加到分段步骤中，YUI Compressor将可以在不影响文件开发和维护的情况下优化CSS和JavaScript文件。必须强调的是，压缩CSS和JavaScript文件只是优化资源，使Web应用程序更轻巧的整体工作中的两个技术。

[Link 1]: http://www.ibm.com/developerworks/cn/web/wa-improve/
[212012M03-0.jpg]: /images/20220615/bb3c400e3b334678a68fe69f35188621.png
[Firebug]: /images/20220615/ff740ce087604cc5885c4c91c585bf47.png