Best Practices for Speeding Up Your Web Site(5)

二十四、

Use Cookie-free Domains for Components

tag：cookie

为组件使用不带cookie的域名

标签：cookie

当浏览器请求静态图片并且cookies随请求会一并发出时，对于服务器来说这些cookie没有任何用处。所以这些cookies只会引起网络拥堵。所以你应该保证在不包含cookies的状态下请求静态组件。创建一个子域然后把你的所有静态组件都放在下面。

如果你的域名是www.example.org，你可以在static.example.org下提供你的静态组件。然而，如果你已经在顶级域example.org，而不是在www.example.org上设置了cookie，那么所有到static.example.org上的请求都将包含这些cookie。在这种情况下，你可以买一个全新的域名，然后把你的静态组件放在那，并且保证这个域名不包含cookies。Yahoo！使用 yimg.com，YouTube 使用ytimg.com，Amazon使用images-amazon.com，等等。

另一个将静态组件放在一个不包含cookie的域名下的好处是一些代理可能会拒绝缓存那些带有cookie的静态组件请求。 On a related note，如果你不知道你应该用example.org 还是 www.example.org来当做你的主页时，请考虑一下cookies的影响。忽略www会让你不得不将cookie写入到*.example.org，所以出于性能考虑最好是使用带有www的子域名并把cookie写入到那个子域名下。

二十五、

Minimize DOM Access

tag: javascrip

减少DOM访问

标签：Javascript

通过Javascript访问DOM元素是低效的，所以为了获得一个更易响应的页面，你应该：

缓存已经访问过的元素

"离线"更新节点,然后把它们添加到DOM树上

避免使用Javascript来实现自适应布局

要获得更多的信息可以查看YUI theatre中由 Julien Lecomte撰写的"
High Performance Ajax Applications" 。

二十六、

Develop Smart Event Handlers

tag: javascript

开发巧妙的事件处理器

标签：Javascript

有时页面会响应较差，这是因为有很多的事件处理器被附加到了DOM Tree上的不同元素，之后被过于频繁的执行。这就是为什么使用事件委派成为了一个很好的方法。如果你有10个button在同一个div中，将一个事件处理器附加到外面的div上，而不是为每个button都加上事件处理器。事件会向上冒泡所以你能够捕获事件然后判定哪个按钮式事件的起源点。

为了要在DOM Tree上做些事情，你也不必一定要等待onload事件完成。通常你所要需要的是要访问的元素在树上是可访问的即可。你不必等待所有的图片都下载完毕。DOMContentLoaded 事件是你应该考虑使用的，而不是onload，但是在所有浏览器都能访问该事件之前，你可以用
YUI Event 工具包，包内有一个onAvaliable方法。

要获取更多信息，请查看由Julien Lecomte发表的 "
High Performance Ajax Applications" 。

二十七、

Choose <link> over @import

tag: css

选择<link>而不是@import

标签：css

之前的最佳实践之一提到CSS应该放在页面顶部以便页面逐步的渲染。

IE中的@import与在底部使用<link>的表现是相同的，所以最好不要使用@import

二十八、

Avoid Filters

tag: css

避免使用滤镜（Filters）

标签：css

IE专有的AlphaImageLoader滤镜意在修复在IE7之前版本中 存在的半透明真彩色PNDS问题。这个滤镜问题是它阻碍渲染并且在图片下载的过程中冻结浏览器。对于每一个应用滤镜的元素而不仅仅是图片，它都会增加内存损耗，所以问题是多样的。

最好的方法是完全避免使用AlphaImageLoader，并且使用美观的PNG8代替，这在IE中更合适。如果你必须要使用AlphaImageLoader，使用加下划线的_filter,为了不影响你的IE7用户。