前端性能優化總結（面試向）

概述

現在的前端開發已經從嚴重依賴後端演變成了node作中間層，MVVM框架進行服務端渲染作view層。性能優化也變得異常重要，我主要對如下幾個方面作了幾個總結：

1. performance面板。
2. 雅虎軍規。
3. 首屏性能優化。
4. html，css和js的性能優化。
5. PC，移動端和服務端的性能優化。
6. react和vue框架的性能優化。
7. 前端工業化的性能優化。

雖然作不到面面俱到，可是過一段時間以後在看，也許會有不同的體會呢~

performance面板

如何查看前端頁面的性能？

1. 在chrome瀏覽器端能夠打開開發者工具，查看performance面板，而後點擊'Start profiling and reload page'就能夠重載頁面，而後顯示頁面性能了。
2. 若是是react，能夠安裝'react-devtools'查看各個組件的渲染狀況；還能夠安裝'redux-devtools-extension'查看redux的數據流動狀況。

雅虎軍規

雅虎軍規是業界最知名的性能優化指南，雖然有些已經不適用了，可是有不少條直到如今仍然頗有參考價值的，很是適合一條條對着優化。

1.儘可能減小 HTTP 請求個數——須權衡
2.使用 CDN（內容分發網絡）
3.爲文件頭指定 Expires 或 Cache-Control ，使內容具備緩存性。
4.避免空的 src 和 href
5.使用 gzip 壓縮內容
6.把 CSS 放到頂部
7.把 JS 放到底部
8.避免使用 CSS 表達式
9.將 CSS 和 JS 放到外部文件中
10.減小 DNS 查找次數
11.精簡 CSS 和 JS
12.避免跳轉
13.剔除重複的 JS 和 CSS
14.配置 ETags
15.使 AJAX 可緩存
16.儘早刷新輸出緩衝
17.使用 GET 來完成 AJAX 請求
18.延遲加載
19.預加載
20.減小 DOM 元素個數
21.根據域名劃分頁面內容
22.儘可能減小 iframe 的個數
23.避免 404
24.減小 Cookie 的大小
25.使用無 cookie 的域
26.減小 DOM 訪問
27.開發智能事件處理程序
28.用 <link> 代替 @import
29.避免使用濾鏡
30.優化圖像
31.優化 CSS Spirite
32.不要在 HTML 中縮放圖像——須權衡
33.favicon.ico要小並且可緩存
34.保持單個內容小於25K
35.打包組件成複合文本

首屏性能優化

首屏加載時間很是重要，嚴重影響用戶的跳出率。下面是我總結的除了雅虎軍規以外的首屏性能優化方案：

1. 把首屏用到的background-image裏面的圖片放到display: none的img裏面進行預加載。
2. 必要的時候，把首屏css和js內嵌到html裏面去。
3. 首屏的一些必要的數據js請求提早。

html，css和js的性能優化

除了雅虎軍規，在html，css和js方面還有如下性能優化方法：

1. 在html裏面對經常使用到的http請求host進行dns prefetch，設置dns預解析。
2. css裏面用transform代替left或者top作動畫。
3. 使用css3動畫時開啓GPU加速。
4. 不要用settimeout或者setinterval作動畫，用requestAnimatinFrame。
5. 同步js請求編程異步js請求。
6. 對js使用混淆。
7. 必要時利用service worker。

PC，移動端和服務端的性能優化

除了雅虎軍規，在PC，移動端和服務端方面還有如下性能優化方法：

1. 使用canvas作動畫。
2. 圖片進行懶加載或者延遲加載。
3. 儘可能使用事件代理，避免使用事件綁定。
4. 對於屢次http請求的數據，用localStorage或者sessionStorage進行緩存。
5. 移動端使用touchstart代替click。
6. 在服務端對圖片，視頻使用cdn加速，對css和js使用緩存，在前端給對應資源打上hash碼或者md5碼。

react和vue框架的性能優化

在MVVM框架好比react或者vue框架方面，有以下性能優化方法：

1. react的葉子節點使用純函數組件，中間節點使用pure組件，必要的時候才使用類組件。
2. 使用reselect對action進行緩存。
3. 不要用{{}}方式直接定義object，而是用一個變量進行緩存。

前端工業化的性能優化

在前端工業化方面，也有一些性能優化方法：

1. 使用服務端渲染。
2. 對ui框架使用按需加載。
3. 把打包後大的js文件分紅多個，不一樣的頁面進行按需加載。
4. 使用gzip壓縮。