概述
如今的前端開發已經從嚴重依賴后端演變成了node做中間層，MVVM框架進行服務端渲染做view層。性能優化也變得異常重要，我主要對以下幾個方面做了幾個總結：
- performance面板。
- 雅虎軍規。
- 首屏性能優化。
- html，css和js的性能優化。
- PC，移動端和服務端的性能優化。
- react和vue框架的性能優化。
- 前端工業化的性能優化。
雖然做不到面面俱到，但是過一段時間之后在看，也許會有不一樣的體會呢~
performance面板
如何查看前端頁面的性能？
- 在chrome瀏覽器端可以打開開發者工具，查看performance面板，然后點擊'Start profiling and reload page'就可以重載頁面，然后顯示頁面性能了。
- 如果是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壓縮。