=前端開發性能優化方案=
減少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語句（非常耗性能）
============================================
我的博客即將同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=3jqjoysz8tc08