1、減少http請求，合理設定 HTTP快取

2、使用瀏覽器快取

3、啟用壓縮

4、CSS Sprites，合併 CSS圖片，減少請求數

5、CSS放在頁面最上部，javascript放在頁面最下面 前端對於網站來說，通常是指，網站的前臺部分包括網站的表現層和結構層。因此前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺程式碼實現，包括基本的HTML和CSS以及JavaScript/ajax，現在最新的高階版本HTML5、CSS3，以及SVG等。

感覺前端的效能確實是很重要的，我談談我在實際專案中的應用。前端的應用主要從以下幾個方面進行最佳化：

1．減少 http 請求

HTTP 協議是無狀態的應用層協議， 意味著每次 HTTP 請求都需要建立通訊鏈路、進行資料傳輸，而在伺服器端，每個 HTTP 都需要啟動獨立的執行緒去處理。這些通訊和服務的開銷都很昂貴，減少HTTP 請求的數目可有效提高訪問效能。減少 HTTP 的主要手段是合併 CSS、合併 JavaScript、合併圖片。將瀏覽器一次訪問需要的JavaScript、 CSS 合併成一個檔案，這樣瀏覽器就只需要一次請求。圖片也可以合併，多張圖片合併成一張，如果每張圖片都有不同的超連結，可透過 CSS 偏移響應滑鼠點選操作，構造不同的 URL。

2．使用瀏覽器快取

對一個網站而言，CSS、 JavaScript、 Logo、圖示這些靜態資原始檔更新的頻率都比較低，而這些檔案又幾乎是每次 HTTP 請求都需要的，如果將這些檔案快取在瀏覽器中，可以極好地改善效能。透過設定 HTTP 頭中 Cache-Control 和 Expires 的屬性，可設定瀏覽器快取，快取時間可以是數天，甚至是幾個月。在某些時候，靜態資原始檔變化需要及時應用到客戶端瀏覽器，這種情況，可透過改變檔名實現，即更新 JavaScript 檔案並不是更新 JavaScript 檔案內容，而是生成一個新的 JS 檔案並更新 HTML檔案中的引用。使用瀏覽器快取策略的網站在更新靜態資源時，應採用批次更新的方法，比如需要更新 10 個圖示檔案，不宜把 10 個檔案一次全部更新，而是應一個檔案一個檔案逐步更新，並有一定的間隔時間，以免使用者瀏覽器突然大量快取失效，集中更新快取，造成伺服器負載驟增、網路堵塞的情況。

3．啟用壓縮

在伺服器端對檔案進行壓縮，在瀏覽器端對檔案解壓縮，可有效減少通訊傳輸的資料量。文字檔案的壓縮效率可達 80%以上，因此 HTML、 CSS、 JavaScript 檔案啟用 GZip 壓縮可達到較好的效果。但是壓縮對伺服器和瀏覽器產生一定的壓力，在通訊頻寬良好，而伺服器資源不足的情況下要權衡考慮。

4． CSS 放在頁面最上面、 JavaScript 放在頁面最下面

瀏覽器會在下載完全部 CSS 之後才對整個頁面進行渲染，因此最好的做法是將 CSS 放在頁面最上面，讓瀏覽器儘快下載 CSS。 JavaScript 則相反，瀏覽器在載入 JavaScript 後立即執行，有可能會阻塞整個頁面，造成頁面顯示緩慢，因此 JavaScript 最好放在頁面最下面。但如果頁面解析時就需要用到 JavaScript，這時放在底部就不合適了。

5．減少 Cookie 傳輸

Cookie 在每次響應請求中，如果太大勢必會影響效能，所以沒必要網cookie放的就不放，針對性的選擇放入cookie的資料。

總之，最佳化的方法還很多，我感觸最深的是第4項，有些js檔案大引用如果放到最前面對效能損耗很大。