優化網站設計（三十五）：避免將img的src屬性設置為空白

前言

網站設計的優化是一個很大的話題,有一些通用的原則,也有針對不同開發平台的一些建議。這方面的研究一直沒有停止過，我在不同的場合也分享過這樣的話題。

作為通用的原則，雅虎的工程師團隊曾經給出過35個最佳實踐。這個列表請參考 Best Practices for Speeding Up Your Web Site  （http://developer.yahoo.com/performance/rules.html），同時，他們還發布了一個相應的測試工具Yslow http://developer.yahoo.com/yslow/

我強烈推薦所有的網站開發人員都應該學習這些最佳實踐，並結合自己的實際項目情況進行應用。 接下來的一段時間，我將結合ASP.NET這個開發平台，針對這些原則，通過一個系列文章的形式，做些講解和演繹，以幫助大家更好地理解這些原則，並且更好地使用他們。

准備工作

為了跟隨我進行后續的學習，你需要准備如下的開發環境和工具

1. Google Chrome 或者firefox ，並且安裝 Yslow 這個擴展組件.請注意，這個組件是雅虎提供的，但目前沒有針對IE的版本。
   1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. 你應該對這些瀏覽器的開發人員工具有所了解，你可以通過按下F12鍵調出這個工具。
2. Visaul Studio 2010 SP1 或更高版本，推薦使用Visual Studio 2012
   1. http://www.microsoft.com/visualstudio/eng/downloads
3. 你需要對ASP.NET的開發基本流程和核心技術有相當的了解，本系列文章很難對基礎知識做普及。

本文要討論的話題

這一篇我和大家討論的是第三十五條原則：Avoid Empty Image src （避免將img的src屬性設置為空白）。

雅虎的團隊指出，如果你將img的src留空，可能你的本意是暫時不要顯示任何圖片，但在不同的瀏覽器其實還是會有一些額外的請求發生。例如

• Internet Explorer makes a request to the directory in which the page is located.
• Safari and Chrome make a request to the actual page itself.
• Firefox 3 and earlier versions behave the same as Safari and Chrome, but version 3.5 addressed this issue[bug 444931] and no longer sends a request.
• Opera does not do anything when an empty image src is encountered.

據我的觀察，現在的這些瀏覽器都不再發送額外的請求了。這也算是瀏覽器自身的改進吧，為什么要對一個空白的img去發起額外的請求呢？

但既然以前早期的版本有可能發生這樣的事情，如果你無法確保你的用戶都使用最新的現代瀏覽器，那么請簡單地遵守這條原則：總是給img的src設置值，而且是一個合法的值。

作為開發者，我理解有的時候，你想將src留空的原因在於，頁面加載的時候，你想快速完全加載，這些圖片你可能想后期再根據實際情況再加載。如果真的是這樣，你應該參考一下另外一個討論：優化網站設計（十七）：延遲或按需加載內容。

或者很簡單地，你可以將初始圖片設置為一個很小的默認圖片（這個圖片設置永不過期），而不是留空。