javascript 优化和缩小与 gzipping

Question

我注意到 minifier 在原型 javascript 中表现不佳，因为如果它们以此开头，它们不会替换任何方法或属性。例如：

// unoptimized 182 bytes
myClass.prototype.myFunction = function(){
    this.myElementDom.style.backgroundColor='#000';
    this.myElementDom.style.color='#FFF';
    this.myElementDom.style.borderColor='#DDD';
}

// 168 bytes = 92% of unoptimized, YUI compressed
myClass.prototype.myFunction=function(){this.myElementDom.style.backgroundColor="#000";this.myElementDom.style.color="#FFF";this.myElementDom.style.borderColor="#DDD"};

// optimized 214 bytes
// set a replaceable local scope variable and reduce 2 variable 
// lookups at the same time
// file-size in the development version doesn't matter, so we can even increase it 
// to preserve readability
myClass.prototype.myFunction = function(){
    var myElementDomStyle = this.myElementDom.style
    myElementDomStyle.backgroundColor='#000';
    myElementDomStyle.color='#FFF';
    myElementDomStyle.borderColor='#DDD';
}

// 132 bytes = 72.53% of unoptimized, YUI compressed
myClass.prototype.myFunction=function(){var a=this.myElementDom.style;a.backgroundColor="#000";a.color="#FFF";a.borderColor="#DDD"};

万岁，节省了 19.47%...不是...在启用 gzip 的情况下发布脚本时，未优化的 YUI 压缩版本加载 130 字节（=未优化的 71.42%），显然比优化后的 YUI 节省更多具有 134 字节的压缩版本（= 73.63% 未优化）......在考虑了压缩的工作原理之后可能很明显，但是现在要走的路是什么？首先进行这种微优化和较小的压缩来证明使用 gzip 更大的文件大小是合理的......因为通过这种优化，您可以轻松地降低代码的可读性和可维护性。

所有信息根据http://refresh-sf.com/yui/

Answer 1

不应该考虑代码可读性 - 您应该只在生产服务器上缩小并在未缩小的代码上进行开发。不要微优化你的变量和函数名称，你几乎肯定会牺牲代码的可读性来获得几乎为零的可用性 - 你说的是一个几 KB 的文件，它将被下载一次并缓存。

至于是缩小和 gzip 还是仅 gzip - 以产生较小的整体文件大小为准。

Answer 2

无论如何，182 字节的代码不会压缩太多。缩小通过消除空格（在您的五行代码中只有 16 个字节）和缩短函数、变量和属性名称来工作，在这种情况下由于范围的原因它不能这样做。压缩的工作原理是找到重复的序列并消除它们。您的五行代码中根本没有足够的文本，无法找到很多重复。

尝试压缩和压缩 50 或 100 或更多行代码，您会看到更引人注目的结果。而且，正如@rgvcorley 建议的那样，您应该专注于使您的代码在您的开发环境中具有可读性和可维护性，并将文件大小的较小细节留给您的构建过程和 Web 服务器。

Answer 3

一件事不排除另一件事：您可以对 JS 文件进行最小化和 gzip 压缩（gzip 压缩通常发生在网络服务器级别）。我认为它将提供最好的结果。 最小化和压缩在较大的文件上效果更好。

除了让 JS 更小，我还会看看：

1. 将 JS 文件合并为一个压缩文件以减少 HTTP 请求数
2. 优化 HTTP 缓存设置
3. 将JS放入CDN以减少下载时间
4. 为一些常见的 JS 库使用公共 CDN，例如jQuery，所以它更有可能从用户的本地缓存中获取
5. 添加JS文件和HTML页面结束

使用http://www.webpagetest.org/ 检查您的网站，以获取其他可以改进的地方的报告

要了解更多信息，我建议阅读High Performance Web Sites 书。它涵盖了任何场景，即使是一些简单的更改也可以显着改善页面加载时间