Web程序优化的最佳实践：Cookie、图片和移动应用篇.docVIP

【编者按】来自Yahoo!的Exceptional Performance团队为我们带来了改善Web性能的最佳实践方案。为此，他们为此进行了 一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是提高网站性能。通过各种努力，xcetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为 7 大类 34 条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。 延伸阅读： Web程序优化的最佳实践（网站内容篇） Web程序优化的最佳实践（服务器篇） Web程序优化的最佳实践：JavaScript和CSS篇 本文为Cookie、图片及移动应用部分的内容。 图片和 Coockie 也是我们网站中几乎不可缺少组成部分，此外随着移动设备的流行，对 于移动应用的优化也十分重要。这主要包括以下几个部分。 Coockie: 1. 减小Cookie体积 2. 对于页面内容使用无coockie域名 图片： 3. 优化图像 4. 优化CSS Spirite 5. 不要在HTML中缩放图像 6. favicon.ico要小而且可缓存 移动应用： 7. 保持单个内容小于 25K 8. 打包组件成复合文本 1、减小Cookie体积 HTTP coockie可以用于权限验证和个性化身份等多种用途。coockie内的有关信息是通 过HTTP文件头来在web服务器和浏览器之间进行交流的。因此保持coockie尽可能的小以 减少用户的响应时间十分重要。 有关更多信息可以查看Tenni Theurer和Patty Chi的文章When the Cookie Crumbles。 这们研究中主要包括： bull; 去除不必要的 coockie bull; 使 coockie 体积尽量小以减少对用户响应的影响 bull; 注意在适应级别的域名上设置 coockie 以便使子域名不受影响 bull; 设置合理的过期时间。较早地 Expire 时间和不要过早去清除 coockie，都会改 善用户的响应时间。 2、对于页面内容使用无coockie域名 当浏览器在请求中同时请求一张静态的图片和发送coockie时，服务器对于这些coockie 不会做任何地使用。因此他们只是因为某些负面因素而创建的网络传输。所有你应该确 定对于静态内容的请求是无coockie的请求。创建一个子域名并用他来存放所有静态内 容。 如果你的域名是，你可以在上存在静态内容。但 是，如果你不是在上而是在顶级域名设置了coockie，那 么所有对于的请求都包含coockie。在这种情况下，你可以再重新 购买一个新的域名来存在静态内容，并且要保持这个域名是无coockie的。Yahoo!使用 的是ymig，YouTube使用的是ytimg，Amazon使用的是images-anazon等等。 使用无coockie域名存在静态内容的另外一个好处就是一些代理（服务器）可能会拒绝 对coockie的内容请求进行缓存。一个相关的建议就是，如果你想确定应该使用还是作为你的一主页，你要考虑到coockie带来的影响。 忽略掉www会使你除了把coockie设置到*.（*是泛域名解析，代表了所有子 域名译者dudo注）外没有其它选择，因此出于性能方面的考虑最好是使用带有www的子 域名并且在它上面设置coockie。 3、优化图像 设计人员完成对页面的设计之后，不要急于将它们上传到 web 服务器，这里还需要做几 件事： bull; 你可以检查一下你的GIF图片中图像颜色的数量是否和调色板规格一致。 使 用imagemagick中下面的命令行很容易检查： identify -verbose image.gif 如果你发现图片中只用到了 4 种颜色，而在调色板的中显示的 256 色的颜色槽， 那么这张图片就还有压缩的空间。 bull; 尝试把 GIF 格式转换成 PNG 格式，看看是否节省空间。大多数情况下是可以压 缩的。由于浏览器支持有限，设计者们往往不太乐意使用 PNG 格式的图片，不 过这都是过去的事情了。现在只有一个问题就是在真彩 PNG 格式中的 alpha 通 道半透明问题，不过同样的，GIF 也不是真彩格式也不支持半透明。因此 GIF 能 做到的，PNG（PNG8）同样也能做到（除了动画）。下面这条简单的命令可以安 全地把 GIF 格式转换为 PNG 格式： convert image.gif image.png 我们要说的是：给 PNG 一个施展身手的机会吧！ bull; 在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。例如： pngcrush image.png -rem alla -