规则 10——精简 javascript

精简

精简是从代码中移除不必要的字符以减少其大小，进而改善加载时间的实践。在代码被精简后，所有的注释以及不必要的空白字符（空格、换行和制表符）都将被移除。

这里，我需要谈一下另外一种更具挑战性的精简方式——混淆。

混淆

混淆和精简一样，它也会移除注释和空白，同时它还会改写代码。作为改写的一部分，函数和变量的名字将被转换为更短的字符串，这时的代码更加精炼，也更加难以阅读。通常这样做是为了增加对代码进行反向工程的难度，但这对提高性能也有帮助，因为这比精简更能减小代码的大小。

精简是一个安全并且相当简单的过程，而混淆则更为复杂一些。混淆有三个主要的缺点——

缺陷 混淆过程本身很有可能引入错误
维护 由于混淆会改变 javascript 符号，因此需要对任何不能改变的符号（例如 API 函数）进行标记，防止混淆器修改它们。
调试 经过混淆的代码很难阅读。这使得在产品环境中调试问题更加困难。

我的建议是使用精简而不是混淆。最终的决定需要考虑混淆能够带来的额外的代码大小减少量。

节省

这里使用 JSMin 和 Dojo Compressor（已改名 ShrinkSafe）精简 javascript 代码。

我们精简来自 YUI 库的 event.js。

经过 JSMin 的处理后，所有不必要的空白将被移除

Dojo Compressor 移除了大部分的空白，同时还缩短了变量名。

混淆相比精简可以进一步减小代码尺寸，结合了 gzip 压缩后，之间的差别将会减小。

锦上添花

内联脚本也可以精简

精简 css

精简 css 能够带来的节省通常要小于精简 javascript，因为通常 css 中的注释和空白比 javsscript 少。最大的潜在节省来自于优化 css- 合并相同的类、移除不使用的类等。css 的依赖顺序的本质决定了这将是一个复杂的问题。这个领域还需要进一步研究和工具开发。最佳的解决方案还是移除注释和空白，并进行一些直观的优化，比如使用缩写（”#606″ 代替 ”#660066″）和移除不必要的字符串（”0″ 代替 ”0px”）