在學習JavaScript代碼優化之前，我們先應該知道JavaScript語言的特性：
- JavaScript中的記憶體管理自動完成
- 執行引擎會使用不用的GC演算法
- 演算法作業的目的是為了實作記憶體空間良性回圈
- Performance工具檢測記憶體變化
- JavaScript是單執行緒機制的解釋性語言，
正是由于JavaScript屬于解釋性語言，因此在性能方面天生具有一定的弱點，因此這就使得我們在撰寫代碼的程序中更加注重一定的細節，這樣讓我們代碼在運行程序中，不然瀏覽器完成太多的超負荷作業，
因此我總結了以下的代碼優化方案：
- 避免全域變數
- 避免全域查找
- 避免回圈參考
- 采用字面量替換new構造方式
- 使用requestAnimationFrame代替setTimeout和setInterval
- 采用事件委托代替大量系結
- 使用檔案碎片代替多次append
- 使用clone代替creat
- 減少判斷層級
- 減少回圈體中的活動
- 減少宣告及陳述句數
下面分別來一一講解上述內容，在此之前，先給大家介紹一個可以檢測代碼運行速度、檢測性能的網站JSBench，大家可以點擊進入，或者輸入網址https://jsbench.me，
JSBench網站使用說明及注意實作：
我們寫一串代碼來模擬要測驗的內容，來教大家簡單快速的使用JSBench
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代碼優化</title>
</head>
<body>
<ul class="ul"></ul>
</body>
<script type="text/javascript">
// 需求：在ul中插入1000個li
// 優化前，使用append方法插入
let ul = document.querySelector(".ul")
for(let i =0;i<10;i++){
let li = document.createElement("li")
li.innerText = i
ul.appendChild(li)
}
//優化后，使用檔案碎片方法
let dom = document.createDocumentFragment()
for(let i =0;i<10;i++){
let li = document.createElement("li")
li.innerText = i
dom.appendChild(li)
}
ul.appendChild(dom)
</script>
</htm
首先，我們先簡單看一下JSBench網站功能布局
然后按照上述指引將代碼放上去后為：
PS:在使用本網站時，耐心等待一下結果，不要去切屏，不然會影響執行緒，進而影響結果的準確率，
學會使用JSBench之后，接下來我們開始學習代碼優化：
一. 避免全域變數
我們先來了解一下全域變數的特點:
- 全域變數掛在在window上
- 全域變數至少有一個參考變數
- 全域變數存活更久，因此也會持續性的占用記憶體
因此無論從性能還是從空間利用來說，應該盡可能的減少大量的全域變數，
我們所熟悉的es5中的var變數，就是將變數直接掛載到window物件上，但es6中的let和const變數具有作用域，因此也可以被垃圾回識訓制所回收，因此盡可能的使用let和const進行定義，
var a = 1
let b = 1
console.log(window.a) //1
console.log(window.b) //undefined
在函式區域作用域內，根據需求進行選擇，如果是函式外部需要的變數，那么定義為全域變數，如果是函式外部不需要的變數，那么就定義為區域變數，這樣在函式執行完之后被垃圾回識訓制所回收，不會影響記憶體
//如果在內部不使用變數定義將變數轉化成區域變數的時候，那么外部也會訪問到的，進而影響函式執行完畢后垃圾的正常回收，
function text(){
a = 1
console.log(a) // 1
}
text()
console.log(a) // 1
//上面這種方式會影響垃圾的正常回收，因此我們使用變數宣告改成區域變數
function text(){
let a = 1
console.log(a) //1
}
text()
console.log(a) //報錯：a is not defined
二. 避免全域查找
什么是全域查找？
- 當目標變數不在當前所在作用域內，就會通過作用域鏈或者原型鏈向上查找，這樣會增加時間的消耗，但類似于用空間換去執行效率，因為這樣雖然減少了沿著作用域鏈或原型鏈查找的時間，但是卻為創建區域變數開辟了空間，
//需求：獲取瀏覽器視窗的大小
// 優化前
function winSize(){
console.log(window.innerWidth,window.innerHeight)
}
winSize()
由于每次查找的時候，在當前作用域內并沒有該值，那么就會回傳到全域中進行查找，因此，我們可以使用區域變數提前定義并快取該值，也就是提前建立一個資料緩沖區，不必使得每次大范圍查找，節約了時間，提升了效率，但是會使得空間使用增大，因此需要看情況來使用，是追求空間還是追求效率
//優化后
function winSize(){
let w = window.innerWidth
let h = window.innerHeight
console.log(w,h)
}
winSize()
三. 避免回圈參考
回圈參考是指程式中物件互相參考的一種現象，存在于兩個或兩個以上的物件，我用我們最常使用dom事件進行演示，例如：我們在一個函式中定義了一個dom節點，然后又利用該dom節點進行其他的dom操作，這樣就是物件的互相參考，由于這樣存在著參考關系，容易使得垃圾回識訓制在作業時造成一些問題，不會被回收，這樣就使得該物件的記憶體一直占據著程式記憶體，直到我們將瀏覽器進行關閉，
//需求，在fun函式中定義一個dom節點，并且添加監聽事件
//優化前
function fun(){
let dom = document.querySelector(".box")
dom.addEventListener("click",function(){
console.log(this)
},false)
}
fun()
分析：我們定義了一個dom元素，并且doom元素中又有一個監聽事件指向另一個函式物件，因此存在著dom和內部function函式之間的互相參考，所以會導致GC（垃圾回識訓制）作業時無法將dom進行回收，因此我們可以采用下面兩種方式實作對dom的回收
方案一：在dom監聽事件之后，讓dom指向null，這樣可以告訴GC該物件沒人參考，可以被回收
function fun(){
let dom = document.querySelector(".box")
dom.addEventListener("click",function(){
console.log(this)
},false)
dom = null
}
fun()
方案二：將監聽事件的定義函式定義到外部，
function fn(){
console.log(this)
}
function fun(){
let dom = document.querySelector(".box")
dom.addEventListener("click",fn,false)
}
四. 采用字面量替換new構造方式
由于每一個內置物件都會有自己的屬性和成員方法,因此js在預決議的時候需要進行額外的操作,但是采用字面量的寫法會比較直接,將當前的存在對應的空間內,然后讓變數物件指向該空間即可，但是對于不同的型別會有不同的差距，js中的資料型別分為基本資料型別和參考資料型別，下面我們分別對兩種型別進行測驗，
基本資料型別：
參考資料型別：
因此我們得出結論：
- 參考型別會有差距，但差距不是很大
- 但是使用基礎資料型別會有相當大的差距
五. 使用requestAnimationFrame代替setInterval和setTimeout
requestAnimationFrame（請求影片幀）的優勢：
- 由系統來決定回呼函式的執行時機
- CPU節能
- 函式節流
詳細介紹如下：
1.requestAnimationFrame的步伐跟著系統的重繪步伐走，它能保證回呼函式在螢屏每一次的重繪間隔中只被執行一次，這樣就不會引起丟幀現象，也不會導致影片出現卡頓的問題，
2.使用setTimeout實作的影片，當頁面被隱藏或最小化時，setTimeout 仍然在后臺執行影片任務，由于此時頁面處于不可見或不可用狀態，重繪影片是沒有意義的，完全是浪費CPU資源，而requestAnimationFrame則完全不同，當頁面處理未激活的狀態下，該頁面的螢屏重繪任務也會被系統暫停，因此跟著系統步伐走的requestAnimationFrame也會停止渲染，當頁面被激活時，影片就從上次停留的地方繼續執行，有效節省了CPU開銷，
3.在高頻率事件(resize,scroll等)中，為了防止在一個重繪間隔內發生多次函式執行，使用requestAnimationFrame可保證每個重繪間隔內，函式只被執行一次，這樣既能保證流暢性，也能更好的節省函式執行的開銷，
六. 采用事件委托代替大量系結
傳統的系結方法需要先找到所有的子元素，然后利用回圈監聽事件進行dom操作，但是當相同的一類元素大量的回圈監聽時，無異于對性能和記憶體都很不友好，因此我們可以采用事件委托的形式來進行監聽，這樣就免去了大量的重復性的回圈監聽，下面來看實體：
假設需求：一個ul里面有多個li標簽和一個p標簽，要求我們在點擊每一個li標簽的時候，列印出當前li標簽的內容，當點擊p標簽的時候，不做任何處理，
//優化前，采用回圈監聽
let li = document.querySelectorAll("li")
for(let item of li){
item.addEventListener("click",function(){
console.log(this.innerText)
},false)
}
//優化后，使用事件委托
let ul = document.querySelector(".ul")
ul.addEventListener("click",function(even){
let target = even.target
//判斷是不是li元素
if(target.nodeName.toLowerCase()==="li"){
console.log(target.innerText)
}
},false)
注意：事件委托方法采用jsben測驗的時候，反而上面的方法要比下面的方法快，因此這里不再從時間上對其進行測驗，但是我們可以從邏輯思維上進行理解，但一個元素串列的數量相當多的時候，需要系結大量的事件，進而影響性能，但是利用事件委托來做的話，就可以很好的解決這一個問題
七. 使用檔案碎片代替多次append
大量的dom操作是很消耗性能的，每當往頁面中添加一個元素，就會使得頁面進行重繪，反復的添加大量的元素后，會使得性能大大降低，因此我們要使用檔案碎片，也稱文本代碼片段，利用這樣的一個緩沖機制，先將所有的需要添加的元素添加到檔案碎片里，最后再將檔案碎片添加到頁面中，這樣就不會一直使頁面重繪，從而提升了性能，我們來看實體：
假設有一個矩形，需要往里面插入若干個p標簽(p標簽有形狀和大小)，直到填充滿，
方案一：使用appendChild
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代碼優化</title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
.banner{
width: 486px;
height: 300px;
border: 5px solid #000000;
margin: 20px auto;
padding: 5px;
}
.banner p{
width: 50px;
height: 30px;
background-color: #0000FF;
margin: 2px;
float: left;
}
</style>
</head>
<body>
<div class="banner"></div>
</body>
<script type="text/javascript">
let banner = document.querySelector(".banner")
// 計算填充p標簽的個數
let len = Math.floor(banner.offsetWidth/54)*Math.floor(banner.offsetHeight/34)
for(let i=0;i<len;i++){
let p = document.createElement("p")
p.innerHTML = i
banner.appendChild(p)
}
</script>
</html>
方案二：使用檔案碎片
//優化后的js代碼
let dom = document.createDocumentFragment()
for(let i=0;i<len;i++){
let p = document.createElement("p")
p.innerHTML = i
dom.appendChild(p)
}
banner.appendChild(dom)
八. 使用clone代替creat
碰見需要大量生成相同元素的情況下，如果有模板，就使用克隆，這樣就省去了創建大量的dom節點，從而節省了性能和記憶體，我們來看實體：
有一個ul元素，里面有一個li元素，需要往里面再添加1000個li元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代碼優化</title>
</head>
<body>
<ul>
<li></li>
</ul>
</body>
<script type="text/javascript">
let ul = document.querySelector("ul")
let li = document.querySelectorAll("li")[0]
let fff = document.createDocumentFragment()
for(let i=0;i<1000;i++){
let dom = document.createElement("li")
dom.innerText = i
fff.appendChild(dom)
}
ul.appendChild(fff)
</script>
</html>
//優化后
for(let i=0;i<1000;i++){
let dom = li.cloneNode(false)
dom.innerHTML = i
fff.appendChild(dom)
}
九. 減少判斷層級
大量的判斷層級不僅會使得代碼臃腫，也不利于后期的維護和閱讀，能使用switch代替的就使用switch，這樣可以使得代碼沒有太多的else if判斷，或者是使用提前return的方法，下面我們來看實體：
我們以最常見的陣列遞回來舉例子，并且在此基礎上加上一個條件，那就是陣列降維后只保存大于5的元素，
//優化前：未使用提前return方法
let arr = [6,2,8,[1,[9,2],3]]
let newArr = []
function arrFlat(arr){
if(Array.isArray(arr)){
while(arr.length){
let val = arr.shift()
if(Array.isArray(val)){
arrFlat(val)
}else{
if(val>5){
newArr.push(val)
}
}
}
}
}
arrFlat(arr)
//優化后：使用提前return方法
function arrFlat(arr){
if(!Array.isArray(arr)) return
while(arr.length){
let val = arr.shift()
if(Array.isArray(val)){
arrFlat(val)
}else{
if(val<=5) return
newArr.push(val)
}
}
}
我們利用JSBench對上述兩段代碼進行測驗：
發現的確使用提前return方法會使得代碼執行速度變快，因此在判斷層級中，能使用提前return退出回圈的就使用，
十： 減少回圈體中的活動
以for回圈為例，因為回圈體內的內容，都是我們想要多次執行的內容，在回圈次數固定的情況下，回圈體內容越多，回圈體執行效率越低，反之越高，因此我們提前把一個經常使用的值提取出來進行快取好，我們來看實體：
定義一個陣列，使用for回圈列印出陣列的每一項
// 優化前
let arr = [1,4,2,6,2,4,2]
for(let i=0;i<arr.length;i++){
console.log(arr[i])
}
我們可以提前先把回圈體內的變數快取出來
//優化后
let arr = [1,4,2,6,2,4,2]
let len = arr.length
for(let i=0;i<len;i++){
console.log(arr[i])
}
十一： 減少宣告及陳述句數
咋一看起來好像與上一條所說的提前快取有些沖突，但是不然，由于js雖然是一門解釋性語言，但是也需要預編譯的，只不過時間非常短而已，因此陳述句的宣告、決議也需要一定的時間，對于上述所提到的利用快取，那是針對相比來說經常使用的資料，但是對于不會每次用到的資料沒有必要使用快取，這樣反而只會增加記憶體與執行時間，
//優化前：
function text(){
let name = "web"
let eat = "干飯人"
let paly = "干飯魂"
let method = "干飯的都是人上人"
return name+eat+paly+method
}
text()
我們可以使用逗號來代替
//優化后：
function text(){
let name = "web",
eat = "干飯人",
paly = "干飯魂",
method = "干飯的都是人上人"
return name+eat+paly+method
}
text()
我們使用JSBenc對比后得：
減少宣告是因為每次執行var，let和const時不用拆分決議編譯，這樣用逗號代替來說，相比起來就會簡單，只不過這樣的話再后期維護或者是閱讀的時候相比第一種方法來說不是很直觀，所以還是那句話，根據需求進行選擇，盡管下面這種方法執行效率會更高，但還是盡量推薦上面這種寫法，因為這樣寫會更加直觀，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/276642.html
標籤：其他