前端性能優化方案

　　1.在js中儘可能減小閉包的使用(閉包不會釋放棧內存)

　　　　A:循環進行事件綁定時，儘量使用自定義屬性，而不用建立閉包來存儲信息。

　　　　B:在最外層造成一個閉包，把一些後期須要的公共信息進行存儲，而不是每個方法都建立一個閉包（例如單例模式）。

　　　　C：儘量手動釋放掉不須要的內存。

　　　   。。。

　　2.進行js和css文件的合併，減小http請求的次數，儘量將文件進行壓縮，減小請求資源的大小。

　　　　A：webpack這種自動化構建工具，能夠幫咱們實現代碼的合併和壓縮（工程化開發）

　　　　B:在移動端開發過程當中，若是代碼不是不少，直接將css和js寫html中。

　　3.儘可能使用字體圖標和SVG圖標，來代替傳統的PNG等格式的圖片（字體圖標等是矢量圖）

　　

　　4.減小對DOM的操做（主要是減小DOM的重繪和迴流（重排））

　　　　A：關於重排的分離讀寫（瀏覽器會將連續dom操做一塊兒緩存起來一塊兒操做）

　　　　B:使用文檔碎片或者字符串作數據綁定（DOM的動態建立）

　　5.js避免「嵌套循環」（會額外增長不少次循環次數）和「死循環」（瀏覽器會死機）

 

　　6.採用圖片「懶加載」，加快第一次加載的速度，實際並無減小請求次數

　　　　步驟：開始加載頁面是，全部的真實圖片都不去發送請求，而是給一張佔位的背景圖，當頁面加載完後，而且圖片出如今但是區域再去作圖片加載。

 

　　7.利用瀏覽器和服務器端的緩存技術（304緩存），把一些不常常變動的資源進行緩存，例如js和css文件。目的就是減小請求大小。

 

　　8.儘量使用事件委託來處理綁定的操做，減小DOM的頻繁操做。

 

　　9.減小css表達式的使用

#box{
  position:fixed;
  left:  expression(document.body.offsetWidth-110+'px');
  top:  expression(document.body.offsetWidth-110+'px');
}

　　10.css選擇器解析規則從右到左進行解析

.container .link a{
  先找到全部的a,再次篩選.link類中 ，最後再找.container類中。。
  因此應減小標籤選擇器的使用。
}

　　11.css雪碧圖技術(css sprite/css 圖片精靈)

　　　　把全部相對較小的資源圖片聚集到一張大圖上，經過背景定位展現對應的小圖。

 

　　12.避免重定向（301：資源永久轉移/302：暫時轉移）

　　

　　13.減小cookie的使用（最主要是減小本地cookie儲存內容的大小），由於客戶端操做cookie的時候，這些信息老是傳來傳去。

 

　　14.頁面中數據獲取採用異步編程和延遲分批加載

　　　　使用異步獲取數據，是爲了下降http通道的阻塞，不會由於數據沒有請求而耽誤下面的渲染，提升頁面加載速度。（能夠將須要動態綁定數據的區域先隱藏，等數據返回綁定完成再讓他顯示）

　　　　延遲分批加載相似於圖片懶加載，是爲了減小頁面第一次加載請求的次數。

　　15.頁面出現音視頻標籤，咱們不讓頁面加載的時候加載這些資源（資源太大）

　　　　方案：只需設置preload=「none」,頁面加載完時就會開始加載。

 

　　16.交互時，數據儘量基於json格式進行傳送（處理方便，資源偏小）==》相對於XML

 

　　17.進行js封裝，減小冗餘代碼。

 

　　18.css中設置定位後，最好使用z-index改變層級，讓盒子不在同一平面上，性能會提升一丟丟。

 

　　19：基於AJAX的get請求根據需求產生緩存（非304），但不建議使用。

 

　　20.儘可能減小filter屬性濾鏡的使用。

 

　　21.css導入儘可能減小@import是同步操做，資源返回才向下渲染，而link是異步請求。

　　重量級優化：CDN加速（有錢上面的都是浮雲。）

 

　　22.配置ETAG（有點相似304緩存）

 

　　23.使用window.requestAnimationFrame（js的幀動畫）代替傳統的定時器動畫。

 

　　24.減小遞歸的使用，避免棧內存嵌套，儘可能使用尾遞歸。

 

　　25.避免使用iframe

 

　　26.利用H5提供localstorage本地儲存或者manifest離線緩存，下次頁面加載直接從本地獲取，減小請求次數。

 

　　29.基於script調用js的時候，使用defer或者async來異步加載。

 

===前端性能優化方案====

　　第一類：減小請求次數和請求大小。

　　第二類：代碼優化：

　　　　　　--》利於SEO

　　　　　　--》利於拓展維護

　　　　　　--》有利於減小性能優化

　　第三類：DNS及HTTP通訊方式的優化

　　額外技巧：

　　　　1.將css放在body上，將js放在body下（元素時帶着樣式渲染，js操做元素）。

　　　　2.能用css實現就不要去使用js操做元素，能用原生js解決的就不要使用使用插件，絕對不使用FLASH（除了去兼容低版本的瀏覽器的播放）。

　　　　==》css處理動畫的性能優於js,並且css的transform變形還開啓硬件加速。

　　　　3.js減小eval的使用，eval會執行兩次。（固然該用仍是用）。

　　　　4.使用keep-alive，客戶端與服務器端創建長鏈接。

　　　　5.儘可能使用設計模式來管理代碼（單例，promise，發佈訂閱），方便維護和升級。

　　　　6.開啓服務器的gzip壓縮。

　　　　7.不要出現無效的連接，不利於SEO。提升關鍵字曝光率，img設置alt、設置meta標籤，標籤語義化。