YUI前端优化原则-cookie与图像

4、图片、Coockie与移动应用篇

除此以外，图片和Coockie也是咱们网站中几乎不可缺乏组成部分，此外随着移动设备的流行，对于移动应用的优化也十分重要。这主要包括：
Coockie:

1. 减少Cookie体积
2. 对于页面内容使用无coockie域名

图片：

1. 优化图像
2. 优化CSS Spirite
3. 不要在HTML中缩放图像
4. favicon.ico要小并且可缓存

移动应用：

1. 保持单个内容小于25K
2. 打包组件成复合文本

2七、减少Cookie体积
      HTTP coockie能够用于权限验证和个性化身份等多种用途。coockie内的有关信息是经过HTTP文件头来在web服务器和浏览器之间进行交流的。所以保持coockie尽量的小以减小用户的响应时间十分重要。
有关更多信息能够查看Tenni Theurer和Patty Chi的文章“When the Cookie Crumbles”。这们研究中主要包括：

• 去除没必要要的coockie
• 使coockie体积尽可能小以减小对用户响应的影响
• 注意在适应级别的域名上设置coockie以便使子域名不受影响
• 设置合理的过时时间。较早地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。

2八、对于页面内容使用无coockie域名
      当浏览器在请求中同时请求一张静态的图片和发送coockie时，服务器对于这些coockie不会作任何地使用。所以他们只是由于某些负面因素而建立的 网络传输。全部你应该肯定对于静态内容的请求是无coockie的请求。建立一个子域名并用他来存放全部静态内容。
      若是你的域名是www.example.org，你能够在static.example.org上存在静态内容。可是，若是你不是在 www.example.org上而是在顶级域名example.org设置了coockie，那么全部对于static.example.org的请求 都包含coockie。在这种状况下，你能够再从新购买一个新的域名来存在静态内容，而且要保持这个域名是无coockie的。Yahoo!使用的是 ymig.com，YouTube使用的是ytimg.com，Amazon使用的是images-anazon.com等等。
      使用无coockie域名存在静态内容的另一个好处就是一些代理（服务器）可能会拒绝对coockie的内容请求进行缓存。一个相关的建议就是，若是你 想肯定应该使用example.org仍是www.example.org做为你的一主页，你要考虑到coockie带来的影响。忽略掉www会使你除了 把coockie设置到*.example.org（*是泛域名解析，表明了全部子域名译者dudo注）外没有其它选择，所以出于性能方面的考虑最好是使用带有www的子域名而且在它上面设置coockie。

2九、优化图像
      设计人员完成对页面的设计以后，不要急于将它们上传到web服务器，这里还须要作几件事：

• 你能够检查一下你的GIF图片中图像颜色的数量是否和调色板规格一致。 使用imagemagick中下面的命令行很容易检查：
  identify -verbose image.gif 
  若是你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。
• 尝 试把GIF格式转换成PNG格式，看看是否节省空间。大多数状况下是能够压缩的。因为浏览器支持有限，设计者们每每不太乐意使用PNG格式的图片，不过这 都是过去的事情了。如今只有一个问题就是在真彩PNG格式中的alpha通道半透明问题，不过一样的，GIF也不是真彩格式也不支持半透明。所以GIF能 作到的，PNG（PNG8）一样也能作到（除了动画）。下面这条简单的命令能够安全地把GIF格式转换为PNG格式：
  convert image.gif image.png
  “咱们要说的是：给PNG一个施展身手的机会吧！”
• 在全部的PNG图片上运行pngcrush（或者其它PNG优化工具）。例如：
  pngcrush image.png -rem alla -reduce -brute result.png
• 在全部的JPEG图片上运行jpegtran。这个工具能够对图片中的出现的锯齿等作无损操做，同时它还能够用于优化和清除图片中的注释以及其它无用信息（如EXIF信息）：
  jpegtran -copy none -optimize -perfect src.jpg dest.jpg

30、优化CSS Spirite

• 在Spirite中水平排列你的图片，垂直排列会稍稍增长文件大小；
• Spirite中把颜色较近的组合在一块儿能够下降颜色数，理想情况是低于256色以便适用PNG8格式；
• 便于移动，不要在Spirite的图像中间留有较大空隙。这虽然不大会增长文件大小但对于用户代理来讲它须要更少的内存来把图片解压为像素地图。100x100的图片为1万像素，而1000x1000就是100万像素。

3一、不要在HTML中缩放图像
      不要为了在HTML中设置长宽而使用比实际须要大的图片。若是你须要：
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
那么你的图片（mycat.jpg）就应该是100x100像素而不是把一个500x500像素的图片缩小使用。

3二、favicon.ico要小并且可缓存
      favicon.ico是位于服务器根目录下的一个图片文件。它是一定存在的，由于即便你不关心它是否有用，浏览器也会对它发出请求，所以最好不要返回一 个404 Not Found的响应。因为是在同一台服务器上，它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序，例如在IE中当你在 onload中请求额外的文件时，favicon会在这些额外内容被加载前下载。
      所以，为了减小favicon.ico带来的弊端，要作到：

• 文件尽可能地小，最好小于1K
• 在适当的时候（也就是你不要打算再换favicon.ico的时候，由于更换新文件时不能对它进行重命名）为它设置Expires文件头。你能够很安全地把Expires文件头设置为将来的几个月。你能够经过核对当前favicon.ico的上次编辑时间来做出判断。

Imagemagick能够帮你建立小巧的favicon。

3三、保持单个内容小于25K
      这条限制主要是由于iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。因为单纯gizp压缩可能达不要求，所以精简文件就显得十分重要。
      查看更多信息，请参阅Wayne Shea和Tenni Theurer的文件“Performance Research, Part 5: iPhone Cacheability - Making it Stick”。

3四、打包组件成复合文本
      把页面内容打包成复合文本就如同带有多附件的Email，它可以使你在一个HTTP请求中取得多个组件（切记：HTTP请求是很奢侈的）。当你使用这条规则时，首先要肯定用户代理是否支持（iPhone就不支持）。