前端優化

加快網站的最佳實踐

最小化HTTP請求

終端用戶響應時間的80％用於前端。大部分時間都在下載頁面中的全部組件：圖像，樣式表，腳本，Flash等。減小組件數量又會減小呈現頁面所需的HTTP請求數量。這是更快頁面的關鍵。

• ==組合文件== 是一種經過將全部腳本合併爲一個腳原本減小HTTP請求數量的方法，一樣也能夠將全部CSS合併到一個樣式表中。當腳本和樣式表因頁面而異時，將文件組合起來更具挑戰性，但使發佈過程的這一部分可以縮短響應時間。
• ==CSS Sprites== 是減小圖片請求數量的首選方法。將背景圖像組合成單個圖像，並使用CSSbackground-image和background-position屬性顯示所需的圖像片斷。

使用內容交付網絡

用戶與Web服務器的距離對響應時間有影響。在多個地理位置分散的服務器上部署您的內容將使您的網頁從用戶的角度更快加載。

1. 80-90％的最終用戶響應時間用於下載頁面中的全部組件：圖像，樣式表，腳本，Flash等。這是性能黃金法則。不要從從新設計應用程序體系結構的艱鉅任務開始，最好先分散您的靜態內容。這不只實現了響應時間的更大縮短，並且因爲內容交付網絡，這更容易實現。
2. 內容傳送網絡（CDN）是分佈在多個位置的網絡服務器的集合，以更高效地向用戶傳送內容。選擇用於將內容遞送給特定用戶的服務器一般基於網絡鄰近度的度量。例如，選擇網絡跳數最少的服務器或響應時間最快的服務器。
3. 一些大型互聯網公司擁有本身的CDN，但使用CDN服務提供商（如Akamai Technologies，EdgeCast或level3）具備成本效益。對於創業公司和私人網站來講，CDN服務的成本可能會很高，但隨着您的目標受衆不斷擴大並變得更加全球化，CDN是實現快速響應所必需的。在雅虎，將靜態內容從其應用程序Web服務器轉移到CDN（如上所述的第三方以及雅虎本身的CDN）的屬性將最終用戶響應時間提升了20％甚至更多。切換到CDN是一種相對簡單的代碼更改，可顯着提升網站的速度。

添加過時或緩存控制標題

• 對於靜態組件：經過設置遠期Expires標題實現「永不過時」策略
• 對於動態組件：使用適當的Cache-Control標題來幫助瀏覽器提供有條件的請求

1. 網頁設計愈來愈豐富，這意味着更多的腳本，樣式表，圖像和Flash在頁面中。首次訪問您的頁面可能須要發出多個HTTP請求，但經過使用Expires標頭，可使這些組件可緩存。這避免了後續頁面瀏覽中沒必要要的HTTP請求。過時標頭最經常使用於圖像，但它們應該用於全部組件，包括腳本，樣式表和Flash組件。

2. 瀏覽器（和代理）使用緩存來減小HTTP請求的數量和大小，使網頁加載速度更快。Web服務器使用HTTP響應中的Expires標頭告訴客戶端能夠緩存組件的時間。這是一個頗有前途的Expires標題，告訴瀏覽器這個響應將不會在2010年4月15日以前失效。

   到期時間：2010年4月15日星期四20:00:00 GMT

3. 若是您的服務器是Apache，請使用ExpiresDefault指令設置相對於當前日期的到期日期。ExpiresDefault指令的這個示例將過時日期設置爲從請求開始的10年。

   ExpiresDefault「訪問加10年」

4. 請記住，若是您使用遠期將來的Expires頭文件，則只要組件更改，就必須更改組件的文件名。常常使這一步成爲構建過程的一部分：組件的文件名中嵌入了一個版本號，例如，yahoo_2.0.6.js。

5. 只有在用戶已經訪問過您的網站後，使用遠期將來的Expires標題纔會影響頁面瀏覽。當用戶第一次訪問您的網站而且瀏覽器的緩存爲空時，它對HTTP請求的數量沒有影響。所以，這種性能改進的影響取決於用戶多久訪問一次帶有緩衝區的頁面。（一個「準備好的緩存」已經包含了頁面中的全部組件。）咱們在Yahoo!上測試了這一點。並發現帶有引導緩存的頁面瀏覽量爲75-85％。經過使用遠期將來的Expires標題，您能夠增長瀏覽器緩存的組件數量，並在後續頁面瀏覽中從新使用，而無需在用戶的Internet鏈接上發送單個字節。

將樣式表放置在頂部

1. 將樣式表移動到文檔HEAD中會使頁面顯示加載速度更快。這是由於將樣式表放在HEAD中容許頁面逐步呈現。
2. 關注性能的前端工程師但願逐步加載頁面; 也就是說，咱們但願瀏覽器儘快顯示它擁有的任何內容。這對於有不少內容的網頁和Internet鏈接速度較慢的用戶尤爲重要。爲用戶提供視覺反饋（如進度指示器）的重要性已獲得充分研究和記錄。在咱們的例子中，HTML頁面是進度指示器！當瀏覽器逐漸加載頁面時，頁眉，導航欄，頂部的徽標等都做爲等待頁面的用戶的視覺反饋。這改善了總體用戶體驗。
3. 將樣式表放在文檔底部附近的問題是，它禁止在許多瀏覽器（包括Internet Explorer）中進行漸進式呈現。這些瀏覽器會阻止渲染，以免在樣式更改時從新繪製頁面元素。用戶停留在查看空白頁面。

將腳本放在底部

1. 腳本致使的問題是它們會阻止並行下載。若是您從多個主機名提供圖像，則能夠同時發生兩個以上的下載。然而，當腳本正在下載時，瀏覽器將不會啓動任何其餘下載，即便是在不一樣的主機名上。
2. 另外一個建議是使用延遲腳本。該DEFER屬性指示該腳本不包含document.write，而且是瀏覽器能夠繼續呈現的線索。不幸的是，Firefox不支持該DEFER屬性。在Internet Explorer中，該腳本可能會延遲，但不如預期的那麼多。若是腳本能夠被延期，它也能夠被移動到頁面的底部。這會讓你的網頁加載速度更快。

避免使用CSS表達式

若是樣式屬性必須在頁面的整個生命週期中動態設置，則使用事件處理程序而不是CSS表達式是一種替代方法。若是您必須使用CSS表達式，請記住它們可能會被評估數千次，而且可能會影響頁面的性能。

使用外聯JavaScript和css

1. 在現實世界中使用外部文件一般會產生更快的頁面，由於瀏覽器會緩存JavaScript和CSS文件。每次請求HTML文檔時，都會下載HTML文檔中內聯的JavaScript和CSS。這減小了所需的HTTP請求數量，但增長了HTML文檔的大小。另外一方面，若是JavaScript和CSS位於瀏覽器緩存的外部文件中，則HTML文檔的大小會減小，而不會增長HTTP請求的數量。
2. 關鍵因素是外部JavaScript和CSS組件相對於所請求HTML文檔數量的緩存頻率。這個因素儘管難以量化，但可使用各類指標進行衡量。若是您的網站上的用戶每一個會話有多個頁面瀏覽量，而且許多網頁重複使用相同的腳本和樣式表，則緩存的外部文件可能帶來更大的潛在收益。
3. 許多網站都處於這些指標的中間。對於這些網站，最好的解決方案一般是將JavaScript和CSS做爲外部文件進行部署。首選內聯的惟一例外是主頁，例如雅虎的首頁和My Yahoo! 。每一個會話只有不多（可能只有一個）頁面視圖的主頁可能會發現內嵌JavaScript和CSS能夠縮短最終用戶的響應時間。
4. 對於一般是許多頁面視圖中的第一個的首頁，有一些技術能夠利用內聯提供的HTTP請求的減小以及經過使用外部文件實現的緩存優勢。其中一種方法是在首頁內嵌JavaScript和CSS，但在頁面加載完成後動態下載外部文件。後續頁面將引用應該已經在瀏覽器緩存中的外部文件。

減小DNS查找

1. 域名系統（DNS）將主機名映射到IP地址，就像電話本將人名映射到他們的電話號碼同樣。當您在瀏覽器中輸入www.yahoo.com時，瀏覽器聯繫的DNS解析器會返回該服務器的IP地址。DNS有成本。DNS一般須要20-120毫秒才能查找給定主機名的IP地址。直到DNS查找完成後，瀏覽器才能今後主機名下載任何內容。
2. DNS查找緩存以得到更好的性能。這種高速緩存能夠發生在用戶的ISP或局域網維護的特殊高速緩存服務器上，但也能夠在我的用戶的計算機上進行高速緩存。DNS信息保留在操做系統的DNS緩存中（Microsoft Windows上的「DNS客戶端服務」）。大多數瀏覽器都有本身的緩存，與操做系統的緩存分開。只要瀏覽器在本身的緩存中保存了一條DNS記錄，它就不會打擾操做系統請求記錄。
3. 當客戶端的DNS緩存爲空（對於瀏覽器和操做系統）時，DNS查找的數量等於網頁中惟一主機名的數量。這包括頁面URL，圖像，腳本文件，樣式表，Flash對象等中使用的主機名。減小惟一主機名的數量可減小DNS查找的數量。
4. 減小惟一主機名的數量有可能減小頁面中發生的並行下載量。避免DNS查找會縮短響應時間，但減小並行下載可能會增長響應時間。個人準則是將這些組件分紅至少兩個但不超過四個主機名。這在減小DNS查找和容許高度並行下載之間取得了很好的折衷。

縮小JavaScript和CSS

1. 縮小是從代碼中刪除沒必要要的字符以縮小其大小從而縮短加載時間的作法。當代碼縮小時，全部註釋都將被刪除，以及不須要的空白字符（空格，換行符和製表符）。在JavaScript的狀況下，因爲下載文件的大小減少，這提升了響應時間性能。兩種用於縮小JavaScript代碼的流行工具是JSMin和YUI Compressor。YUI壓縮機還能夠縮小CSS。
2. 混淆是一種可應用於源代碼的替代優化。它比縮小更復雜，所以更容易因迷惑步驟自己而產生錯誤。在對美國十大網站的調查中，縮小比例達到了21％，而混淆的比例爲25％。儘管模糊處理的尺寸減少了不少，但縮小JavaScript風險較小。
3. 除了縮小外部腳本和樣式以外，內嵌
   刷新評論 刷新頁面 返回頂部