《高性能网站建设指南》规则10—精简JavaScript
Posted 前端阅读室
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《高性能网站建设指南》规则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”）
以上是关于《高性能网站建设指南》规则10—精简JavaScript的主要内容，如果未能解决你的问题，请参考以下文章