YSlow分析前臺開發的頁面

日期：2013-12-16  來源：攀枝花惠康網絡公司

YSlow是yahoo美國開發的一個頁面評分插件，很是的棒，年夜中我們可以看出我們頁面上的良多不足，而且可以知道我們改怎么卻改良和優化。

可是47個CSS background images請求改怎么解決呢？為什么頁面上的純IMG請求時合理的，而CSS background images請求過多就是晦氣身分了呢。這個我想了良久，總算年夜白，原本是這樣的：

其拭魅這個原則我們一般都遵守的，如不美觀把CSS外部鏈接作為邏輯的一部門呈此刻頁面頭部以下，我小我感受這個自己就是個錯誤。還好，我們的頁面根基上都做到了，可是有些頁面好比LIST頁面，仍是呈現了和邏輯掛鉤的CSS鏈接，原因是為體味決一些原本就不合理的產物邏輯。所以，我們WEB前端工程師有義務杜絕這些不合理的產物邏輯破損我們的頁面結不美觀及頁面加載速度，不能為了實現而實現。

細心研究了下YSlow跌評分軌則。

1. Make fewer HTTP requests盡可能少的http請求。。我們有141個請求（其中15個JS請求，3個CSS請求，47個CSS background images請求），多的恐怖。思慮了下，為什么把這個三種請求過多列為對頁面加載的主要晦氣身分呢，而過多的IMG請求并沒有列為晦氣身分呢？

發現原本這些請求都是可以避免的。

15個JS和3個CSS完全可以經由過程非凡的法子進行合并（這個手藝部已經幫我們解決了，其實是太感謝感動了，嘿嘿。），這樣合并往后，一般情形下頁面上只會呈現一個JS和一個CSS（對JS的封裝得有必然的要求）。

一般頁面上的ICON，欄目布景啊，圖片按鈕啊，我們城市用圖片CSS布景來實現，而一般這個圖片CSS布景用到的圖片都是斗勁小的，所以完全可以把這些圖片合并成一個相對斗勁年夜的圖片，這樣頁面上只會呈現一個CSS background images請求，最多也就2-3個。后來細心看了下雅虎美國的頁面，他們簡直也是這樣做的，雖然這樣做需要花必然的時刻濫暌剮軌則的合并這些ICON，欄目布景，圖片按鈕，以便利CSS挪用，可是這樣做絕對是合算的，而且是有需要的，YSlow也是死力舉薦的。

這點我們網站根基上是100%做到了，可是我們這項的評分并沒有達到想象中的A級，原因是出在我們的外部鏈接，好比我們首頁，有外部的廣告投放JS，這個JS說擁有的網站是沒有做過GZIP優化，干連了我們網站，所以我們也只有B，或者C級：（

首要有12條：

2. Use a CDN這項我們的評分是F級，最低。說其實的，我剛起頭什么是CDN都不知道。后來查了GOODLE才知道。CDN的全稱是Content Delivery Network，即內容分發收集。其目的是經由過程在現有的Internet中增添一層新的收集架構，將網站的內容發布到最接近用戶的收集”邊緣”，使用戶可以就近取得所需的內容，解決Internet收集擁擠的狀況，提高用戶訪謁網站的響應速度。年夜手藝上周全解決因為收集帶寬小、用戶訪謁量年夜、網點分布不均等原因所造成的用戶訪謁網站響應速度慢的問題。

看來上述的詮釋后，根基上年夜白了CDN是怎么回事，后來咨詢了下中文站點SA，得知我們網站今朝簡直還沒有做CDN的優化，可是據說我們有加倍前進前輩的手藝來解決近似的問題（具體什么手藝那就保密了），可是事實