锁定老帖子 主题:让Web应用程序飞起来的秘诀
精华帖 (5) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (4)
|
|
---|---|
作者 | 正文 |
发表时间:2012-03-07
问题:空白内容 当开发人员使用CSS或JavaScript文件工作时,空白内容通常是一件好事。空白内容包括缩进文件所使用的字符,增强可读性的间距、以及为了在文章的不同部分添加一个可视间隔而插入的额外空行。空白内容使文件易于阅读和维护。如果CSS文件中有适当数量的空白内容(和注释),将有助于开发人员理解CSS代码的意图。 从这一点上来说,将文件变得更小作为问题的一个长期解决方案是不可行的,因为文件很有可能在将来会被修改。如果将空白内容和注册全部删除,CSS和 JavaScript代码就很难阅读。 问题是逐渐增加的空白导致文件不断增大。每个空白行、缩进和括号之间的空格至少占用一个额外字符,这对于CSS或JavaScript代码的正确解析来说实际上并不需要。首先,一两个空白没有什么大不了的,但是小数量乘以一个很大倍数时就变成很大的数量了。 考虑这样一个文件,其中额外空白总计5KB。如果网站每天的点击率是1000,每天节省5KB每个月就可以节约大约146 MB((5K * 1000 * 30) / 1024作为粗略估计)。就这而言,该文件的点击量还是相对保守的估计,实际空白成本可能还会增加。 此外,下载文件的用户必须等待文件的下载。尽管许多用户在他们第一次访问网站后可能就有缓存的CSS或JavaScrip文件,性能仍然会对他们的第一次访问造成负面影响。如果可以减少CSS和JavaScript文件,即使每次1KB,都可以减少数千字节的浏览器必须加载的数据。 解决方案:压缩 要解决问题并从小资源获益,一个显而易见的解决方案是从CSS和JavaScript文件删除额外元素,比如注释和空白。但是,由于在开发过程中从文件删除注释和空白不可行,一个较好的解决方案是 “分级” 的网站资源、优化它们、然后将其发布。 编写一个删除空白字符的定制脚本最初听起来是一个可行的解决方案,但是在CSS和JavaScript文件中本身都有很重要的空白。因此任何删除空白和压缩文件的工具必须是足够智能,可以区别哪些语言中哪些空白是重要的。 幸运的是,在社区中已经可以找到这种工具了,它们已经经过资源(比如 CSS 和 JavaScrip 文件)压缩测试了。其中一个工具就是 YUI Compressor,一个来自Yahoo! Developer Network的可用工具。 YUI Compressor YUI压缩器是一个使用Java编写的程序,拥有Berkeley Software Distribution许可证。YUI Compressor可以缩小(压缩)CSS和JavaScript代码,这样无需自己编写工具就可以享受小资源带来的益处了。首先,可以下载YUI Compressor,然后提取文件,放置到一个容易访问的位置。归档文件包括完整源代码和一个用于构建YUI Compressor的Apache Ant 脚本(build.xml)。在原文中,作者以代码实例诠释了如何CSS和JavaScript文件(您可以点击这里查看更多代码实例)。 通过YUI,以下优化将在JavaScript文件中执行: 其他选择。--line-break 选项对于分离文件可能是重要的,因此这一行不能太长。(优化时 YUI Compressor会删除换行符。) 看看优势 要想查看压缩的优势,可以使用不同的工具,其中两个是构建在浏览器中,这使得使用它们比使用分析工具方便得多:Google Chrome Web浏览器的开发人员工具和Mozilla Firefox的Firebug插件。这两个工具都展示了下载的附加资源以及文件大小和下载它们浏览器所用的时间。 图 1 是一个Chrome开发人员工具分析一个页面的示例。(要访问这些工具,在您的浏览器中单击 Tools > Developer Tools。) 图 1. Chrome 浏览器附带的开发人员工具 图 2 展示了 Firefox 中的 Firebug 插件分析同一页面 。 图 2. Firebug 插件 如果使用一个自动工具,就可轻松地获取一个使用旧文件的URL和另一个包含压缩文件的URL(例如,http://localhost/orig 和 http://localhsot/minified)。开发者可以使用这些工具来对Web应用程序进行基本的分析,就会知道压缩CSS和JavaScript文件会有多大的不同。刚开始差异可能很小,但做一些数学运算,就能明白执行优化比起置之不理,长期效果是多么的明显。 此外,作者还分析了如何使用自动化和集成工具去压缩CSS和JavaScript代码(可点击此处查看)。 结束语 YUI Compressor是一个可以用来优化CSS和JavaScript源文件的工具,使它们变得更小。小的原文件会带来了许多好处,节省了带宽、为访问提供更快的加载时间。尽管对于一个文件节约似乎微不足道,但是如果大量使用,累计起来相当可观。如果添加到分段步骤中,YUI Compressor将可以在不影响文件开发和维护的情况下优化CSS和JavaScript文件。必须强调的是,压缩CSS和JavaScript文件只是优化资源,使Web应用程序更轻巧的整体工作中的两个技术。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2012-03-10
嗯,压缩JS和CSS文件是常见的做法,不知LZ是否知道如何压缩动态(如: JSP)网页生成的html代码呢?经常在查看源码的时候都觉得空白缩进太多了,有时还排布不均!
|
|
返回顶楼 | |
发表时间:2012-03-10
其实通过服务器静态压缩模块直接用压缩工具压缩成gzip, deflate压缩也是不错的方案
|
|
返回顶楼 | |
发表时间:2012-03-11
好 楼主说的方案看起来不错
|
|
返回顶楼 | |
发表时间:2012-03-13
有机会,试下,
|
|
返回顶楼 | |
发表时间:2012-03-13
这几个工具我都有用过,,不错
|
|
返回顶楼 | |
浏览 4229 次