1

我注意到 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/

4

3 回答 3

1

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

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

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

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

有关更多信息，我建议阅读《高性能网站》一书。它涵盖了任何场景，即使是简单的更改也可以显着改善页面加载时间

于 2012-04-15T23:15:03.743 回答
1

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

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

于 2012-04-15T23:00:48.727 回答
1

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

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

于 2012-04-15T23:12:28.007 回答