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用戶。