無論是在工作中，還是在面試中，web前端性能的優化都是很重要的，那么我們進行優化需要從哪些方面入手呢？yohoo關于性能優化的35條的軍規，web2.0的設計與視覺，用戶越來越注重用戶體驗，但用戶體驗的前提就是網站的訪問速度，對于一個大型網站的yahoo來說，處理性能優化是不可缺少的，他是怎么制定性能優化呢，相比很多朋友都想了解下，YaHoo把性能優化作為他們不可觸犯的軍規，具體怎樣優化呢，且看他們的優化方案。

80%-90%的終端響應時間是花費在下載頁面中的圖片，樣式表，腳本，flash等；雅虎軍規可以分類7大類35條，包括內容、服務器、CSS、JS、Cookie、圖片、移動應用。現在說一些常用的規則。

1、盡可能減少HTTP請求數

那么什么是HTTP請求呢？——從客戶端到服務器端的請求消息，包括消息首行中，對資源的請求方法資源的標識符及使用的協議。通俗一點說就是：當你打開網頁的時候，你所看到的文字、圖片、多媒體等等，這一切內容，都是從服務器獲取的。每一個內容的獲取，就是一個HTTP請求。

合并文件：把所有的腳本放到一個文件中來減少HTTP請求。比如合并項目中的JS、CSS。

CSS Sprites是減少圖片請求數量的首選方式。把背景圖片都整合到一張圖片中，然后用CSS的background-image和background-position屬性來定位要顯示的部分。

減少頁面的HTTP請求數是個起點，這是提升站點首次訪問速度的重要指導原則。

了解這個只是對于我們網站設計和優化有何啟示呢？

由于DNS查找是需要時間的，而且它們通常都是只緩存一定的時間，所以應該盡可能地減少DNS查找的次數。

減少DNS查找次數，最理想的方法就是將所有的內容資源都放在同一個域(Domain)下面，這樣訪問整個網站就只需要進行一次DNS查找，這樣可以提高性能。

但理想總歸是理想，上面的理想做法會帶來另外一個問題，就是由于這些資源都在同一個域，而HTTP /1.1 中推薦客戶端針對每個域只有一定數量的并行度（它的建議是2），那么就會出現下載資源時的排隊現象，這樣就會降低性能。

所以，折衷的做法是：建議在一個網站里面使用至少2個域，但不多于4個域來提供資源。我認為這條建議是很合理的，也值得我們在項目實踐中去應用。

2、減少DNS查詢

域名系統建立了主機名和IP地址間的映射，就像電話簿上人名和號碼的映射一樣。當你在瀏覽器輸入www.yahoo.com的時候，瀏覽器就會聯系DNS解析器返回服務器的IP地址。DNS是有成本的，它需要20到120毫秒去查找給定主機名的IP地址。在DNS查找完成之前，瀏覽器無法從主機名下載任何東西。

大多數瀏覽器有獨立于操作系統的自己的cache。只要瀏覽器在自己的cache里還保留著這條記錄，它就不會向操作系統查詢DNS。

IE默認緩存DNS查找30分鐘，寫在DnsCacheTimeout注冊表設置中。Firefox緩存1分鐘，可以用network.dnsCacheExpiration配置項設置。Chrome同樣緩存一分鐘。

那么時間長短有什么不同呢？

緩存時間長：減少DNS的重復查找，節省時間

緩存時間短：及時的檢測網站服務器的變化，保證正確性。

3、避免重定向

重定向用301（永久性重定向）和302（臨時重定向）狀態碼，下面是一個有301狀態碼的HTTP頭：

HTTP/1.1 301 Moved PermanentlyLocation: http://example.com/newuriContent-Type: text/html

牢記重定向會拖慢用戶體驗，在用戶和HTML文檔之間插入重定向會延遲頁面上的所有東西，頁面無法渲染，組件也無法開始下載，直到HTML文檔被送達瀏覽器。

有一種常見的極其浪費資源的重定向，而且web開發人員一般都意識不到這一點，就是URL尾部缺少一個斜線的時候。例如，跳轉到http://astrology.yahoo.com/astrology會返回一個重定向到http://astrology.yahoo.com/astrology/的301響應（注意添在尾部的斜線）。在Apache中可以用Alias，mod_rewrite或者DirectorySlash指令來取消不必要的重定向。

如果你的網站使用了301重定向，搜索引擎在爬網的時候，會進行分析。當發現是301重定向的時候，它會記錄下新的地址，刪除原來的舊地址。也就是說301使得搜索引擎變得智能。

如果你使用的是302，搜索引擎會先找到舊地址，再去跳新的地址。

4、使AJAX緩存

利用時間戳，更精巧的實現響應可緩存與服務器數據同步更新。

5、為文件頭指定Expires或Cache-Control，使內容具有緩存性。

區分靜態內容和動態內容，避免以后頁面訪問中不必要的HTTP請求。

6、使用CDN（內容分發網絡）

這里可以關注CDN的三類實現：鏡像、高速緩存、專線，以及智能路由器和負載均衡；

7、啟用Gzip壓縮

GZIP，即網頁壓縮，是由WEB服務器和瀏覽器之間共同遵守的協議，也就是說WEB服務器和瀏覽器都必須支持該技術，而現在主流的瀏覽器都是支 持的，包括IE、FireFox、谷歌瀏覽器、Opera 等。常見的WEB服務器有Apache 和IIS 等。雙方的協商過程如下：

（1）首先瀏覽器請求某個URL 地址，并在請求的頭 (head) 中設置屬性accept-encoding值為gzip、deflate，表明瀏覽器支持gzip和deflate這兩種壓縮方式。

（2）WEB服務器接收到請求后判斷瀏覽器是否支持壓縮，如果支持就傳送壓縮后的響應內容，否則傳送不經過壓縮的內容；

（3）瀏覽器獲取響應內容后，判斷內容是否被壓縮，如果是則解壓縮，然后顯示響應頁面的內容。

GZIP壓縮的比率往往在3到10倍，也就是本來90k大小的頁面，采用壓縮后實際傳輸的內容大小只有28至30K大小，這可以大大節省服務器的 網絡帶寬，同時如果應用程序的響應足夠快時，網站的速度瓶頸就轉到了網絡的傳輸速度上，因此內容壓縮后就可以大大的提升頁面的瀏覽速度。

在實際應用中，并不需要對網站所有文件都進行壓縮，只需要對靜態文件進行壓縮就可以了，包括js、css及html文件。對其他文件進行壓縮并不 會對WEB性能有太多的改觀，并且對網站開啟GZIP功能是需要犧牲部分服務器性能的。

8、將css放在頁面最上面

關注性能的前端工程師想讓頁面逐步渲染。也就是說，我們想讓瀏覽器盡快顯示已有內容，這在頁面上有一大堆內容或者用戶網速很慢時顯得尤為重要。

9、將script放下頁面最下面

腳本會阻塞并行下載，HTTP/1.1官方文檔建議瀏覽器每個主機名下并行下載的組件數不要超過兩個，如果圖片來自多個主機名，并行下載的數量就可以超過兩個。如果腳本正在下載，瀏覽器就不開始任何其它下載任務，即使是在不同主機名下的。

再比如，如果引入的js文件有個死循環或者執行時間很長的腳本，如果將這個腳本放到頭部，那么瀏覽器會一直加載這個腳本而停止對網頁的渲染，會造成頁面一直空白，用戶一直等待渲染的問題。這將造成很差的用戶體驗。如果將此腳本放到頁面最下面，頁面的HTML、CSS將先呈現給用戶，用戶會因為頁面提前加載而覺得速度更快。

有時候，并不容易把腳本移動到底部。舉個例子，如果腳本是用document.write插入到頁面內容中的，就沒辦法再往下移了。還可能存在作用域問題，在多數情況下，這些問題都是可以解決的。

一個常見的建議是用推遲（deferred）腳本，有DEFER屬性的腳本意味著不能含有document.write，并且提示瀏覽器告訴他們可以繼續渲染。不幸的是，Firefox不支持DEFER屬性。在IE中，腳本可能被推遲，但不盡如人意。如果腳本可以推遲，我們就可以把它放到頁面底部，頁面就可以更快地載入。

10、把JavaScript和CSS放到外面

很多性能原則都是關于如何管理外部組件的，然而，在這些顧慮出現之前你應該問一個更基礎的問題：應該把JavaScript和CSS放到外部文件中還是直接寫在頁面里？

實際上，用外部文件可以讓頁面更快，因為JavaScript和CSS文件會被緩存在瀏覽器。HTML文檔中的行內JavaScript和CSS在每次請求該HTML文檔的時候都會重新下載。這樣做減少了所需的HTTP請求數，但增加了HTML文檔的大小。另一方面，如果JavaScript和CSS在外部文件中，并且已經被瀏覽器緩存起來了，那么我們就成功地把HTML文檔變小了，而且還沒有增加HTTP請求數。

所以是否將這兩種文件放到外面不是絕對的，應該視情況而定。如果這是一個不常訪問的頁面，或者這個頁面的css、js非常少，只有幾行，那么完全沒有必要放到外面。

11、移除重復的腳本

頁面含有重復的腳本文件會影響性能，這可能和你想象的不一樣。在對美國前10大web站點的評審中，發現只有2個站點含有重復腳本。兩個主要原因增加了在單一頁面中出現重復腳本的幾率：團隊大小和腳本數量。在這種情況下，重復腳本會創建不必要的HTTP請求，執行無用的JavaScript代碼，而影響頁面性能。

　　IE會產生不必要的HTTP請求，而Firefox不會。在IE中，如果一個不可緩存的外部腳本被頁面引入了兩次，它會在頁面加載時產生兩個HTTP請求。即使腳本是可緩存的，在用戶重新加載頁面時也會產生額外的HTTP請求。

　　除了產生沒有意義的HTTP請求之外，多次對腳本求值也會浪費時間。因為無論腳本是否可緩存，在Firefox和IE中都會執行冗余的JavaScript代碼。

　　避免不小心把相同腳本引入兩次的一種方法就是在模版系統中實現腳本管理模塊。典型的腳本引入方法就是在HTML頁面中用SCRIPT標簽：

<script type="text/javascript" src="menu_1.0.17.js"></script>

12、不要用HTML縮放圖片

不要因為在HTML中可以設置寬高而使用本不需要的大圖。如果需要

<img width="100" height="100" src="mycat.jpg" alt="My Cat" />

那么圖片本身（mycat.jpg）應該是100x100px的，而不是去縮小500x500px的圖片。

13、減少cookie的大小

使用cookie的原因有很多，比如授權和個性化。HTTP頭中cookie信息在web服務器和瀏覽器之間交換。重要的是保證cookie盡可能的小，以最小化對用戶響應時間的影響。

• 列表內容

去除不必要的coockie
使coockie體積盡量小以減少對用戶響應的影響
注意在適應級別的域名上設置coockie以便使子域名不受影響
設置合理的過期時間。較早地Expire時間和不要過早去清除coockie，都會改善用戶的響應時間。

14、避免圖片src屬性為空

Image with empty string src屬性是空字符串的圖片很常見，主要以兩種形式出現：

straight HTML：

<img src=””>

JavaScript：

var img = new Image(); img.src = “”;

雅虎的團隊指出，如果你將img的src留空，可能你的本意是暫時不要顯示任何圖片，但在不同的瀏覽器其實還是會有一些額外的請求發生。據我的觀察，現在的這些瀏覽器都不再發送額外的請求了。這也算是瀏覽器自身的改進吧，為什么要對一個空白的img去發起額外的請求呢？

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

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

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

總結

以上是生活随笔為你收集整理的雅虎军规——前端优化的35条建议的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。