=前端開發性能優化方案=
減少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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/178592.html
標籤：JavaScript