=前端開發效能優化方案=
減少http請求次數和請求大小
**優化
->有利於seo
->有利於擴充套件維護
->有利於減少效能消耗
[js**優化的108條建議] [雅虎css優化的36條建議]
...dns及http通訊方式的優化
1.在js中儘量減少閉包的使用（原因：閉包會產生不釋放的棧記憶體）
a:迴圈給元素做事件繫結的時候，盡可能的把後期需要的資訊（例如索引）儲存到元素的自定義屬性上，而不是建立閉包儲存
b:可以在最外層形成乙個閉包，把一些後續需要的公共資訊進行儲存，而不是每乙個方法都建立閉包(例如單例模式)
c:盡可能的手動釋放不被占用的記憶體
...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.container .link a把所有相對較小資源彙總到一張大圖上，後期我們只需要把大圖載入下來，用背景定位的方式展示對應的小圖即可
.bg
.box1
.box2
14.頁面中的資料獲取採用非同步程式設計和延遲分批載入
使用非同步獲取資料，是為了降低http通道的堵塞，不會因為資料沒有請求回來耽誤下面資訊的渲染，提高頁面的開啟速度（我們可以這樣處理：需要動態繫結資料的區域先隱藏，等資料返回並且繫結完成後在讓其顯示）
延遲分批載入類似於懶載入，是為了減少第一次頁面載入時候的http請求次數
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元素的，需要等到元素載入完再操作）
3.js中儘量減少對eval的使用，因為js合併壓縮的時候，可能出現由於符號不完善，導致的**執行優先順序錯亂問題，eval處理起來消耗的效能也是偏大一點的
4.使用keep-alive實現客戶端和伺服器端的長連線
5.盡量使用設計模式來管理我們的**（單例、構造、promise、發布訂閱），方便後期的公升級和維護
6.開啟伺服器端的gzip壓縮（這個壓縮可以有效減少請求資源檔案的大小），其實客戶端的等資源也是可以進行壓縮的（但是對於24位的點陣圖，壓縮後可能會變模糊）
8.避免使用with語句（非常耗效能）
前端效能優化方案
1 雪碧圖 css sprites 就是把多張圖合到一張圖裡面，然後通過css來分別取用。這樣就可以減少請求數量。2 合併多個指令碼和樣式表 3 合理設定快取 可以在下次訪問時減少部分請求，直接在快取中讀取。4 懶載入 lazy load 只載入可見的部分。先將img標籤中的src鏈結設為同一張 空...
前端效能優化方案
多使用記憶體，快取或者其他方法 減少cpu計算，減少網路請求 減少io操作 硬碟讀寫 靜態資源的合併和壓縮。靜態資源快取 瀏覽器快取策略 使用cdn讓靜態資源載入更快。css放head中，js放body後 懶載入減少dom操作，對dom操作做快取 減少dom操作，多個操作盡量合併在一起執行 事件節流...
前端效能優化方案思路
效能優化可以從兩個方面來談，一是網路通訊方面，二是拿到資料後，更快的資料處理。減少網路請求，和加快請求速度，使用http2.0。網域名稱分片 快取 壓縮 頭與報文 http1.1的頭是非常臃腫的，減少http1.1中的不必要的頭 減少cookie資料量 http二進位制幀 幀頭部資訊會標識該幀屬於哪...