性能優化：
一、減少請求資源大小或者次數
1、盡量和並和壓縮css和js文件。（將css文件和並為一個。將js合並為一個）
原因：主要是為了減少http請求次數以及減少請求資源的大小
打包工具：
webpack
gulp
grunt
. ....
2、盡量所使用的字體圖標或者SVG圖標來代替傳統png圖
因為字體圖標或者SVG是矢量圖，代碼編寫出來的，方大不會變形，而且渲染速度快
3、采用圖片的懶加載（延遲加載）
目的為了，減少頁面第一次加載過程中http的請求次數
具體步驟：
1、頁面開始加載時不去發送http請求，而是放置一張占位圖
2、當頁面加載完時，並且圖片在可視區域再去請求加載圖片信息
4、能用css做的效果，不要用js做，能用原生js做的，不要輕易去使用第三方插件。
避免引入第三方大量的庫。而自己卻只是用里面的一個小功能
5、使用雪碧圖或者是說圖片精靈
把所有相對較小的資源圖片，繪制在一張大圖上，只需要將大圖下載下來，然后利用
圖片定位來講小圖展現在頁面中（background-position:百分比，數值）
6、減少對cookie的使用（最主要的就是減少本地cookie存儲內容的大小），因為客戶端操作cookie的時候，這些信息總是在客戶端和服務端傳遞。如果上設置不當，每次發送
一個請求將會攜帶cookie
7、前端與后端進行數據交互時，對於多項數據盡可能基於json格式來進行傳送。相對於使用xml
來說傳輸有這個優勢
目的：是數據處理方便，資源偏小
8、前端與后端協商，合理使用keep-alive
9、前端與服務器協商，使用響應資源的壓縮
10、避免使用iframe
不僅不好管控樣式，而且相當於在本頁面又嵌套其他頁面，消耗性能會更大。因為還回去加載這個嵌套頁面的資源
11、在基於ajax的get請求進行數據交互的時候，根據需求可以讓其產生緩存（注意:這個
緩存不是我們常看到的304狀態碼，去瀏覽器本地取數據），這樣在下一次從相同地址獲取是數據
時，取得就是上一次緩存的數據。（注意：很少使用，一般都會清空。根據需求來做）
二、代碼優化相關
1、在js中盡量減少閉包的使用
原因：使用閉包后，閉包所在的上下文不會被釋放
2、減少對DOM操作，主要是減少DOM的重繪與回流（重排）
關於重排（回流）的分離讀寫：如果需要設置多個樣式，把設置樣式全放在一起設置，不要一條一條的設置。使用文檔碎片或者字符串拼接做數據綁定（DOM的動態創建）
3、在js中避免嵌套循環和"死循環"(一旦遇到死循環，瀏覽器就會直接卡掉)
4、把css放在body上，把js放在body下面
讓其先加載css（注意：這里關於優化沒有多大關系）
5、減少css表達式的使用
6、css選擇器解析規則所示從右往左解析的。減少元素標簽作為對后一個選擇對象
7、盡量將一個動畫元素單獨設置為一個圖層（避免重繪或者回流的大小）
注意：圖層不要過多設置，否則不但效果沒有達到反而更差了
8、在js封裝過程中，盡量做到低耦合高內聚。減少頁面的冗余代碼
9、css中設置定位后，最好使用z-index改變盒子的層級，讓盒子不在相同的平面上
10、css導入的時候盡量減少@import導入式，因為@import是同步操作，只有把對應的樣式導入后，才會繼續向下加茲安，而link是異步的操作
11、使用window.requestAnimationFrame(js的幀動畫)代替傳統的定時器動畫
如果想使用每隔一段時間執行動畫，應該避免使用setInterval，盡量使用setTimeout
代替setInterval定時器。因為setInterval定時器存在弊端：可能造成兩個動畫間隔時間
縮短
12、盡量減少使用遞歸。避免死遞歸
解決：建議使用尾遞歸
13、基於script標簽下載js文件時，可以使用defer或者async來異步加載
14、在事件綁定中，盡可能使用事件委托，減少循環給DOM元素綁定事件處理函數。
15、在js封裝過程中，盡量做到低耦合高內聚。減少頁面的冗余代碼
16、減少Flash的使用
三、存儲
1、結合后端，利用瀏覽器的緩存技術，做一些緩存（讓后端返回304，告訴瀏覽器去本地拉取數據）。（注意：也有弊端）可以讓一些不太會改變的靜態資源做緩存。比如：一些圖片，js，cs
2、利用h5的新特性（localStorage、sessionStorage）做一些簡單數據的存儲，
避免向后台請求數據或者說在離線狀態下做一些數據展示。
四、其他優化
1、避免使用iframe不僅不好管控樣式，而且相當於在本頁面又嵌套其他頁面，消耗性能會更大。因為還回去加載這個嵌套頁面的資源
2、頁面中的是數據獲取采用異步編程和延遲分批加載，使用異步加載是數據主要是為了避免瀏覽器失去響應。如果你使用同步，加載數據很大並且很慢
那么，頁面會在一段時間內處於阻塞狀態。目的：為了解決請求數據不耽擱渲染，提高頁面的
渲染效率。解決方法：需要動態綁定的是數據區域先隱藏，等數據返回並且綁定后在讓其顯示
延遲分批加載類似圖片懶加載。減少第一次頁面加載時候的http請求次數
3、頁面中出現音視頻標簽，我們不讓頁面加載的時候去加載這些資源（否則第一次加載會很慢）
解決方法：只需要將音視頻的preload=none即可。
目的：為了等待頁面加載完成時，並且音視頻要播放的時候去加茲安音視頻資源
4、盡量將一個動畫元素單獨設置為一個圖層（避免重繪或者回流的大小）
注意：圖層不要過多設置，否則不但效果沒有達到反而更差了