解讀如何用YSlow分析咱們頁面

YSlow是yahoo美國開發的一個頁面評分插件，很是的棒，從中咱們能夠看出咱們頁面上的不少不足，而且能夠知道咱們改怎麼卻改進和優化。

仔細研究了下YSlow跌評分規則。

主要有12條：

1. Make fewer HTTP requests 儘量少的http請求。。咱們有141個請求（其中15個JS請求，3個CSS請求，47個CSS background images請求），多的可怕。思考了下，爲何把這個三種請求過多列爲對頁面加載的重要不利因素呢，而過多的IMG請求並無列爲不利因素呢？

發現原來這些請求都是能夠避免的。

15個JS和3個CSS徹底能夠經過特殊的辦法進行合併（這個技術部已經幫咱們解決了，實在是太感謝了，嘿嘿。），這樣合併之後，通常狀況下頁面上只會出現一個JS和一個CSS（對JS的封裝得有必定的要求）。

可是47個CSS background images請求改怎麼解決呢？爲何頁面上的純IMG請求時合理的，而CSS background images請求過多就是不利因素了呢。這個我想了好久，總算明白，原來是這樣的：

通常頁面上的ICON，欄目背景啊，圖片按鈕啊，咱們都會用圖片CSS背景來實現，而通常這個圖片CSS背景用到的圖片都是比較小的，因此徹底能夠把這些圖片合併成一個相對比較大的圖片，這樣頁面上只會出現一個CSS background images請求，最多也就2-3個。後來仔細看了下雅虎美國的頁面，他們的確也是這樣作的，雖然這樣作須要花必定的時間來有規則的合併這些ICON，欄目背景，圖片按鈕，以方便CSS調用，可是這樣作絕對是合算的，並且是有必要的，YSlow也是極力推薦的。

2.Use a CDN 這項咱們的評分是F級，最低。說實在的，我剛開始什麼是CDN都不知道。後來查了GOODLE才知道。CDN的全稱是Content Delivery Network，即內容分發網絡。其目的是經過在現有的Internet中增長一層新的網絡架構，將網站的內容發佈到最接近用戶的網絡」邊緣」，使用戶能夠就近取得所需的內容，解決Internet網絡擁擠的情況，提升用戶訪問網站的響應速度。從技術上全面解決因爲網絡帶寬小、用戶訪問量大、網點分佈不均等緣由所形成的用戶訪問網站響應速度慢的問題。

看來上述的解釋後，基本上明白了CDN是怎麼回事，後來諮詢了下中文站點SA，得知咱們網站目前的確尚未作CDN的優化，可是聽說咱們有更加先進的技術來解決相似的問題（具體什麼技術那就保密了），可是畢竟CDN也是個至關不錯的技術，因此在咱們先進技術的基礎上在作CDN優化，確定比如今更好，嘿嘿。聽說SA明年會作幾個點的CND。

3. Add an Expires header 設置過時的HTTP Header.設置Expires Header能夠將腳本, 樣式表, 圖片, Flash等緩存在瀏覽器的Cache中.

其實咱們網站也作了這個優化，至少圖片在這個上作過優化，可是沒有作徹底。咱們的CSS和JS都尚未作過優化，卻是外部引入的一個廣告JS作了，呵呵。其實設置過時的HTTP Header 更應該作在腳本, 樣式表, Flash上.不過聽說這個SA也是沒有作的，可是有必定的風險，由於JS和CSS是有必定的邏輯，若是服務器端和客戶端都存在緩存的話，萬一出了什麼問題，對咱們之後查找問題的所在和增長難度，不過我想二者中是能夠權衡和並存的。

4. Gzip components 對咱們的頁面內容進行Gzip格式的壓縮，Gzip格式是一種很廣泛的壓縮技術，幾乎全部的瀏覽器都有解壓Gzip格式的能力，並且它能夠壓縮的比例很是大，通常壓縮率爲85%，就是說服務器端100K的頁面能夠壓縮到25K左右的Gzip格式的數據發給客戶端，客戶端收到Gzip格式的數據後自動解壓縮後顯示頁面。

這點咱們網站基本上是100%作到了，可是咱們這項的評分並無達到想象中的A級，緣由是出在咱們的外部連接，好比咱們首頁，有外部的廣告投放JS，這個JS說擁有的網站是沒有作過GZIP優化，連累了咱們網站，因此咱們也只有B，或者C級。

5. Put CSS at the top 把CSS外部連接放到頁面的頂部。

其實這個原則咱們通常都遵照的，若是把CSS外部連接做爲邏輯的一部分出如今頁面頭部如下，我我的以爲這個自己就是個錯誤。還好，咱們的頁面基本上都作到了，但是有些頁面好比LIST頁面，仍是出現了和邏輯掛鉤的CSS連接，緣由是爲了解決一些原本就不合理的產品邏輯。因此，咱們WEB前端工程師有義務杜絕這些不合理的產品邏輯破壞咱們的頁面結果及頁面加載速度，不能爲了實現而實現。