《高性能网站建设指南》规则10—精简javascript

规则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"）