前端常見性能優化方法

1.內容優化

(1)減小HTTP請求數:這條策略是最重要最有效的，由於一個完整的請求要通過DNS尋址，與服務器創建鏈接，發送數據，等待服務器響應，接收數據這樣一個消耗時間成本和資源成本的複雜的過程。常見方法：合併多個CSS文件和js文件，利用CSS Sprites整合圖像，Inline Images(使用 data：URL scheme在實際的頁面嵌入圖像數據 )，合理設置HTTP緩存等。
(2)減小DNS查找
(3)避免重定向（302.303）
(4)使用Ajax緩存
(5)延遲加載組件,預加載組件
(6)減小DOM元素數量:頁面中存在大量DOM元素,會致使javascript遍歷DOM的效率變慢。
(7)最小化iframe的數量：iframes 提供了一個簡單的方式把一個網站的內容嵌入到另外一個網站中。但其建立速度比其餘包括JavaScript和CSS的DOM元素的建立慢了1-2個數量級。
(8)避免404：HTTP請求時間消耗是很大的，所以使用HTTP請求來得到一個沒有用處的響應（例如404沒有找到頁面）是徹底沒有必要的，它只會下降用戶體驗而不會有一點好處。

2.Cookie優化

(1)減少Cookie大小
(2)針對Web組件使用域名無關的Cookie

3.css優化

(1)將CSS代碼放在HTML頁面的頂部（在文檔<head/>內加載你的樣式表，這樣作的好處是：提升網頁渲染性能，避免網頁出現白屏或者是沒有樣式的內容）
(2)避免使用CSS表達式
(3)使用<link>來代替@import
(4)避免使用Filters

4.js優化

(1)將JavaScript腳本放在頁面的底部。
(2)將JavaScript和CSS做爲外部文件來引用：在實際應用中使用外部文件能夠提升頁面速度，由於JavaScript和CSS文件都能在瀏覽器中產生緩存。
(3)縮小JavaScript和CSS
(4)刪除重複的腳本
(5)最小化DOM的訪問：使用JavaScript訪問DOM元素比較慢。
(6) 減小做用域鏈查找
(7) 在 Javascript中使用」+」號來拼接字符串效率是比較低的，由於每次運行都會開闢新的內存並生成新的字符串變量，而後將拼接結果賦值給新變量。

5.圖片優化

(1)合理控制圖片大小
(2)經過CSS Sprites優化圖片 （這是減小圖像請求的有效方法，把全部的背景圖像都放到一個圖片文件中，而後經過CSS的background-image和background-position屬性來顯示圖片的不一樣部分；合併後的圖片會比分離的圖片總和要小，這是由於它下降了圖片自身的開銷）
(3)不要在HTML中使用縮放圖片
(4)圖標儘可能使用矢量圖標