===前端開發性能優化方案=== 減少HTTP請求次數和請求大小 代碼優化 有利於SEO 有利於擴展維護 有利於減少性能消耗 [JS代碼優化的108條建議] [雅虎CSS優化的36條建議] ... DNS及HTTP通信方式的優化 1.在JS中儘量減少閉包的使用（原因：閉包會產生不釋放的棧記憶體） A: ...
===前端開發性能優化方案===
減少HTTP請求次數和請求大小
代碼優化
->有利於SEO
->有利於擴展維護
->有利於減少性能消耗
[JS代碼優化的108條建議] [雅虎CSS優化的36條建議]
...
DNS及HTTP通信方式的優化
1.在JS中儘量減少閉包的使用（原因：閉包會產生不釋放的棧記憶體）
A:迴圈給元素做事件綁定的時候，儘可能的把後期需要的信息（例如索引）存儲到元素的自定義屬性上，而不是創建閉包存儲
B:可以在最外層形成一個閉包，把一些後續需要的公共信息進行存儲，而不是每一個方法都創建閉包(例如單例模式)
C:儘可能的手動釋放不被占用的記憶體
...
2.儘量合併CSS和JS文件（把需要引入的CSS合併為一個，JS也是合併為一個），原理是在減少HTTP請求次數，儘可能的把合併後的代碼進行壓縮，減小HTTP請求資源的大小
A:webpack這種自動化構建工具，可以幫我們實現代碼的合併和壓縮（工程化開發）
B:在移動開發(或者追求高性能的PC端開發[例如百度首頁])，如果CSS或者JS不是需要很多，我們可以選擇把css和js編程內嵌式（也就是代碼直接寫在HTML中）
3.儘量使用字體圖標或者SVG圖標，來代替傳統的PNG等格式的圖片（因為字體圖標等是矢量圖(基於代碼編寫出來的)，放大不會變形，而且渲染速度快，相對比點陣圖要小一些）
4.減少對DOM的操作（主要是減少DOM的重繪和迴流(重排)）
A:關於重排的分離讀寫
B:使用文檔碎片或者字元串拼接做數據綁定(DOM的動態創建)
5.在JS中避免“嵌套迴圈”（這種會額外增加很多迴圈次數）和“死迴圈”（一旦遇到死迴圈瀏覽器就卡殼了）
6.採用圖片的“懶載入”（延遲載入）
目的是為了減少頁面“第一次載入”過程中HTTP的請求次數，讓頁面打開速度變快
步驟：開始載入頁面的時候，所有的真實圖片都不去發送HTTP請求載入，而是給一張占位的背景圖，當頁面載入完，並且圖片在可視區域內我們再去做圖片載入
7.利用瀏覽器和伺服器端的緩存技術(304緩存)，把一些不經常更新的靜態資源文件做緩存處理（例如：JS、CSS、靜態圖片等都可以做緩存）
原理是為了減少HTTP請求大小，讓獲取速度更快
8.儘可能使用事件委托(事件代理)來處理事件綁定的操作，減少DOM的頻繁操作，其中包括給每一個DOM元素做事件綁定
9.儘量減少CSS表達式的使用(expression)
#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: expression(document.body.offsetWidth - 110 + "px");
top: expression(document.body.offsetHeight - 110 + "px");
background: red;
}10.CSS選擇器解析規則是從右向左解析
.container .link a{
先找到所有的A，再篩選是在.link樣式類中的，再次篩選是在.container樣式類中的... 先找到的是所有的A，操作起來是消耗性能的，我們在使用CSS選擇器的時候儘可能減少對標簽選擇器的使用
}11.CSS雪碧圖技術(css sprite / css 圖片精靈)
把所有相對較小資源圖片彙總到一張大圖上，後期我們只需要把大圖載入下來，用背景定位的方式展示對應的小圖即可
.bg{
background:url('xxx.png');
}
.box1{
background-position:xx xx;
}
.box2{
background-position:xx xx;
}
<div class='bg box1'></div>13.減少對於COOKIE的使用（最主要的是減少本地COOKIE存儲內容的大小），因為客戶端操作COOKIE的時候，這些信息總是在客戶端和伺服器端傳來傳去
14.頁面中的數據獲取採用非同步編程和延遲分批載入
使用非同步獲取數據，是為了降低HTTP通道的堵塞，不會因為數據沒有請求回來耽誤下麵信息的渲染，提高頁面的打開速度（我們可以這樣處理：需要動態綁定數據的區域先隱藏，等數據返回並且綁定完成後在讓其顯示）
延遲分批載入類似於圖片懶載入，是為了減少第一次頁面載入時候的HTTP請求次數
15.頁面中出現音視頻標簽，我們不讓頁面載入的時候就去載入這些資源（要不然頁面載入速度會變慢）（方案：只需要設置 preload='none' 即可），等待頁面載入完成，音視頻播放的時候我們在去載入音視頻資源
16.在客戶端和伺服器端進行信息交互的時候，對於多項數據我們儘可能基於JSON格式來進行傳送（JSON格式的數據處理方便，資源偏小） ==>相對於XML格式的傳輸才會有這個優勢
17.儘可能實現JS的封裝（低耦合高內聚），減少頁面中的冗餘代碼（減少HTTP請求資源的大小）
20.CSS中設置定位後，最好使用Z-INDEX改變盒子的層級，讓所有的盒子不在相同的平面上，這樣後續處理的時候，性能有那麼一丟丟的提高
21.在基於AJAX的GET請求進行數據交互的時候，根據需求可以讓其產生緩存（這個緩存不是304緩存），這樣下一次從相同地址獲取的數據是上一次緩存的數據（但是很少用，項目中一般刻意清除這個緩存的時候偏多）
22.儘量減少對於filter濾鏡屬性的使用(這個屬性消耗性能較大一些)
23.在CSS導入的時候儘量減少使用@import導入式，因為@import是同步操作，只有把這個對應的CSS導入，才會向下載入，而link是非同步操作
24.配置ETag(有點類似於304緩存)
25.使用window.requestAnimationFrame（JS中的幀動畫）代替傳統的定時器動畫
26.減少遞歸的使用，避免死遞歸，避免由於遞歸導致的棧記憶體嵌套（建議使用尾遞歸）
27.避免使用iframe（不僅不好管控樣式，而且相當於在A頁面中載入了其它頁面，消耗較大）
28.利用H5中提供的localstorage本地存儲或者是manifest離線緩存，做一些信息的本地存儲，下一次載入頁面的時候直接從本地獲取，減少HTTP請求次數
29.基於SCRIPT調取JS的時候，可已使用 defer或者async 來非同步載入
重量級優化：做CDN加速（燒錢機器）
===額外技巧===
1.我們一般都把CSS放到BODY上，把JS放到BODY下麵（原因：讓其先載入CSS在載入JS，先載入CSS是為了保證頁面渲染的過程中，元素是帶著樣式渲染的，而JS一般都是用來操作DOM元素的，需要等到元素載入完再操作）
2.能用CSS搞定的絕對不用JS，能用原生JS搞定的絕對不用插件，絕對不使用FLASH（除了音視頻的低版本瀏覽器播放）
=>CSS處理動畫等功能的性能優於JS，而且CSS中的transform變形還開起了硬體加速
3.JS中儘量減少對EVAL的使用，因為JS合併壓縮的時候，可能出現由於符號不完善，導致的代碼執行優先順序錯亂問題，EVAL處理起來消耗的性能也是偏大一點的
4.使用keep-alive實現客戶端和伺服器端的長連接
5.儘量使用設計模式來管理我們的代碼（單例、構造、Promise、發佈訂閱），方便後期的升級和維護
6.開啟伺服器端的gzip壓縮（這個壓縮可以有效減少請求資源文件的大小），其實客戶端的圖片等資源也是可以進行壓縮的（但是對於24位的點陣圖，壓縮後可能會變模糊）
7.頁面中不要出現無效的鏈接（利於SEO優化），還有其它技巧：提高關鍵字曝光率、img需要加alt、設置meta標簽、標簽語義化...
8.避免使用with語句（非常耗性能）
============================================
