Best Practices for Speeding Up Your Web Site(5)

二十4、

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写入到那个子域名下。

二十5、

Minimize DOM Access

tag: javascrip

减小DOM访问

标签：Javascript

经过Javascript访问DOM元素是低效的，因此为了得到一个更易响应的页面，你应该：

• 缓存已经访问过的元素
• "离线"更新节点,而后把它们添加到DOM树上
• 避免使用Javascript来实现自适应布局

要得到更多的信息能够查看YUI theatre中由 Julien Lecomte撰写的" High Performance Ajax Applications" 。

二十6、

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" 。

二十7、

Choose <link> over @import

tag: css

选择<link>而不是@import

标签：css

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

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

二十8、

Avoid Filters

tag: css

避免使用滤镜（Filters）

标签：css

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

        最好的方法是彻底避免使用AlphaImageLoader，而且使用美观的PNG8代替，这在IE中更合适。若是你必需要使用AlphaImageLoader，使用加下划线的_filter,为了避免影响你的IE7用户。