> 作者：麥樂
> 
> 來源：[恆生LIGHT雲社群](https://developer.hs.net/thread/1267 "恆生LIGHT雲社群")

# 一 資料訪問

## 認識作用域鏈

```javascript
function add(num1, num2) {
    var sum =num1 + num2
    return  sum
}
```

當add函式建立的時候，它的作用域鏈中填入了一個單獨的可變物件，包含了所有全域性作用域可以訪問到的變數。

![](https://img-blog.csdnimg.cn/20210615200000118.png)

當add函式執行的時候，會建立一個叫做執行期上下文的內部物件。此物件被推入作用域鏈的頂端。

![](https://img-blog.csdnimg.cn/20210615200254350.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODMxMzQ1,size_16,color_FFFFFF,t_70)

## 識別符號解析的效能

當要訪問某個變數時，會從 作用域鏈的頂端（0）開始查詢，如果找到了，就拿來用，如果沒有找到，0就會繼續沿著作用域鏈尋找（1）。實時上，查詢的過程都會消耗效能的，一個識別符號的位置越深，它的讀寫速度就會越慢。因此，函式中讀寫區域性變數總是最快的，讀寫全域性變數總是最慢的。各個瀏覽器的測試如下圖：
![](https://img-blog.csdnimg.cn/20210615200942971.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODMxMzQ1,size_16,color_FFFFFF,t_70)

```javascript
function initUi() {
  var bd = document.body,
      links = document.getElementByName('a'),
      i = 0,
      len = links.length;
  while(i < len) {
    // do something
    i++;
  }
  document.getElementById('btn').onclick = function() {
    // do something
  }
} 
```

這個函式訪問了三次document,而document是一個全域性變數，每次訪問都必須遍歷整個作用域鏈，直到找到這個變數。可以透過下面得方式減少效能得消耗：

```javascript
function initUi() {
  var doc = document   
      bd = doc.body,
      links = doc.getElementByName('a'),
      i = 0,
      len = links.length;
  while(i < len) {
    // do something
    i++;
  }
  doc.getElementById('btn').onclick = function() {
    // do something
  }
} 
```

## 改變作用域鏈

with和try catch 可以改變一個執行期上下文的作用域鏈。

用with重寫下initUi函式：

```javascript
function initUi() {
    with(document) {
      var bd = body,
          links = getElementByName('a'),
          i = 0,
          len = links.length;
      while(i < len) {
        // do something
        i++;
      }
      getElementById('btn').onclick = function() {
        // do something
      }
    }
} 
```

用with也可以避免重複訪問一個全域性變數的問題，這樣看上去更高效，實際上產生了一個效能問題。當執行到with語句時，執行期上下文的作用域鏈被改變了：

![](https://img-blog.csdnimg.cn/2021061617351384.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODMxMzQ1,size_16,color_FFFFFF,t_70)

這就意味著所有的區域性變數現在都處在第二個作用域鏈物件中，訪問的代價更高了。

try-catch也是一樣，當try發生錯誤，直接跳轉到catch執行，然後把異常物件推到作用域鏈的頭部，這個時候try中的所有區域性變數都會在第二位。一旦catch執行完畢，作用域鏈就會回到以前的狀態。如果要使用try-catch，儘量不要在catch中去訪問區域性變數。用下面的方式去處理異常：

```javascript
try {
// do
} catch (error) {
  handleError(error)
}
```

# 動態作用域

with try-catch eval都被認為是動態作用域。經過最佳化的JavaScript引擎，嘗試透過分析程式碼來確定哪些變數可以在特定時候被訪問。這些引擎試圖避開傳統作用域鏈的查詢，取代以識別符號索引的方式進行快速查詢。當涉及到動態作用域時，這種最佳化方式就失效了。指令碼引擎必須切換回較慢的基於雜湊表的識別符號識別方式，這更像是傳統的作用域鏈查詢。

```javascript
function execute(str) {
    eval(str)
    console.log(window)
}
execute('var window = {}')
```

## 閉包，作用域和記憶體

```javascript
function assignEvents() {
  var id = "12"
  document.getElementById('btn').onclick = function() {
    saveDocument(id)
  }
}
```

上面的函式建立了一個閉包，作用域鏈和普通函式有些區別：

![](https://img-blog.csdnimg.cn/20210616191142618.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODMxMzQ1,size_16,color_FFFFFF,t_70)

通常來說，函式的執行上下文物件會隨著執行期上下文一起銷燬，由於閉包的[[scope]]屬性引用了執行期上下文物件，所以不會銷燬。這就意味著閉包需要更多的記憶體開銷。

當閉包被執行時，一個執行期上下文被建立，它的作用域鏈與屬性[[Scope]]中引用的兩個相同的作用域鏈物件同時被初始化，然後一個活動物件為閉包自身所建立。

![](https://img-blog.csdnimg.cn/20210616191552284.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODMxMzQ1,size_16,color_FFFFFF,t_70)

閉包中使用的兩個識別符號，id和saveDocument，處於作用域鏈的1和2層級，如果要大量訪問跨作用域鏈的識別符號，就會造成很高的效能開銷。

使用閉包的時候，也是可以使用把全域性變數變為區域性變數的方式來減輕影響。

總結
函式中對同一外部變數訪問頻繁時，儘量把它變為區域性變數。
儘量不要使用with, eval。
使用try-catch時，儘量避免對外部變數的訪問（包括區域性的和全域性的）。
謹慎使用閉包，注意識別符號的訪問深度問題。

# 二 DOM程式設計

## dom的訪問和修改

對dom的訪問和修改總是昂貴的，在使用的過程一定要注意。比如下面程式碼：

```javascript
function innerHTMLLoop() {
  for(var i = 0; i < 15000; i++) {
    document.getElementById('here').innerHTML += 'a'
  }
}
```

用chrome瀏覽器來測試下：

```javascript
console.time()
innerHTMLLoop()
console.timeEnd()
// default: 820.547119140625 ms
```

這段程式碼的問題在於，每次迴圈迭代，該元素都被訪問兩次：一次讀取innerHTML屬性值，另一次重寫它。可最佳化為：

```javascript
function innerHTMLLoop() {
  var count = ''
  for(var i = 0; i < 15000; i++) {
    count += 'a'
  }
  document.getElementById('here').innerHTML += count;
}
```

```javascript
console.time()
innerHTMLLoop()
console.timeEnd()
// default: 1.85595703125 ms
```

執行時間由800ms左右提升到了2ms左右。

## 昂貴的元素集合

這段程式碼看上去只是簡單地把頁面中div元素數量翻倍。它遍歷現有的div元素，每次建立一個新的 div 並新增到 body 中。但事實上這是一個死迴圈，因為迴圈的退出條件allDivs.length在每次迭代時都會增加，它反映出的是底層文件的當前狀態。

```javascript
var allDivs = document.getElementsByTagName('div')
    for(var i = 0; i < allDivs.length; i ++) {
    document.body.appendChild(document.createElement('div'))
}
```

在迴圈的條件控制語句中讀取陣列的length屬性是不推薦的做法。讀取一個集合的length比讀取普通陣列的length要慢很多，因為每次都要重新查詢。使用集合時要記得把集合轉化為陣列，或者避免在迴圈體內頻繁的取集合的length.

```javascript
function toArray(coll) {
    return Array.prototype.slice.call(coll)
}
var allDivs = document.getElementsByTagName('div')
var len = allDivs.length
for(var i = 0; i < len; i ++) {
    document.body.appendChild(document.createElement('div'))
}
```

## 查詢DOM節點

使用children替代childNodes會更快，因為集合項更少。HTML原始碼中的空白實際上是文字節點，而且它並不包含在children集合中。

![](https://img-blog.csdnimg.cn/20210618192932853.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODMxMzQ1,size_16,color_FFFFFF,t_70)

### css選擇器

儘量使用querySelectorAll

最新的瀏覽器也提供了一個名為querySelectorAll（）的原生DOM方法。這種方式自然比使用JavaScript和DOM來遍歷查詢元素要快很多。

```javascript
var elements=document.querySelectorAll（＇#menu a＇）;
```

返回值是一個類陣列，但不是一個HTML集合。返回值類似一個靜態列表，多次取length不會引起重複計算。

```javascript

var allDivs = document.getElementsByTagName('div')
console.log(allDivs)
var qDivs = document.querySelectorAll('#here')
console.log(qDivs)
```

![1.png](https://developer.hs.net/storage/attachments/2021/08/13/Zlk4gAroURoNt5KVmfQEsQUWNGazRJ0kAGA4lPHj_thumb.png "2812")

如果需要處理大量組合查詢，使用 querySelectorAll（）的話會更有效率。比如，頁面中有一些class為“warning”的div元素和另一些class為“notice”的元素，如果要同時得到它們的列表，建議使用querySelectorAll（）：

```javascript
var errs=document.querySelectorAll（＇div.warning,div.notice＇）;
```

## 最小化重繪和重排

### 方法一，合併修改樣式

下面程式碼會觸發三次重排和重繪。

![](https://img-blog.csdnimg.cn/20210618194556564.png)

最佳化後只觸發一次：

```javascript
var el=document.getElementById（＇mydiv＇）;
el.style.cssText=＇border-left: 1px; border-right: 2px; padding: 5px;＇;
```

### 方法二，使DOM脫離文件流

1 隱藏元素，修改後，重新顯示

把下面資料新增到ul中

```javascript
var data = [
  {
    url: 'http://www.csdn.com',
    text: '部落格'
  },
  {
    url: 'http://www.csdn.com',
    text: '部落格'
  }
]
```

```javascript
 <ul>
    <li><a href="http://blog.itpub.net/70001864/viewspace-2787542/www.baidu.com" rel="nofollow">百度</a></li>
 </ul>
```

用下面的常規方式更新列表是相當損耗效能的，因為每次迴圈都會引起一次重排。

```javascript
function appDataToEl(ul, data) {
  var doc = document;
 
  for(let i = 0; i < data.length; i++) {
    var liE = doc.createElement('li')
    var aE = doc.createElement('a')
    aE.innerHTML = data[i].text;
    aE.href =  data[i].url
    liE.appendChild(aE)
    ul.appendChild(liE)
  }
}
appDataToEl(document.getElementById('uls'), data)
```

最佳化如下：

```javascript
var ul = document.getElementById('uls')
ul.style.display = 'none'
appDataToEl(ul, data)
ul.style.display = 'block'
```

2 利用文件片段

```javascript
var ul = document.getElementById('uls')
var frame = document.createDocumentFragment()
appDataToEl(frame, data)
ul.appendChild(frame)
```

3 需要修改的節點建立一個備份，然後對副本進行操作，一旦操作完成，就用新的節點替代舊的節點。

```javascript
var old = document.getElementById('uls')
var clone = old.cloneNode(true)
appDataToEl(clone, data)
old.parentNode.replaceChild(clone, old)
```

推薦儘可能地使用文件片斷（第二個方案），因為它們所產生的DOM遍歷和重排次數最少。

### 方法三 讓動畫脫離文件流

頁面頂部的一個動畫推移頁面整個餘下的部分時，會導致一次代價昂貴的大規模重排，讓使用者感到頁面一頓一頓的。渲染樹中需要重新計算的節點越多，情況就會越糟。

1.使用絕對位置定位頁面上的動畫元素，將其脫離文件流。

2.讓元素動起來。當它擴大時，會臨時覆蓋部分頁面。但這只是頁面一個小區域的重繪過程，不會產生重排並重繪頁面的大部分內容。

3.當動畫結束時恢復定位，從而只會下移一次文件的其他元素。

## 方法四 事件委託

當頁面中存在大量元素，而且每一個都要一次或多次繫結事件處理器（比如onclick）時，這種情況可能會影響效能。一個簡單而優雅的處理 DOM 事件的技術是事件委託。它是基於這樣一個事實：事件逐層冒泡並能被父級元素捕獲。使用事件代理，只需給外層元素繫結一個處理器，就可以處理在其子元素上觸發的所有事件。

# 三 演算法

## 迴圈

for，do while，while，for in，四種迴圈速度只有for in 速度比較慢，因為它不僅查詢物件本身，還還會查詢物件的原型，避免使用for in來迴圈陣列。

倒序迴圈提升效能

```javascript
for(var i = arr.length; i--;) {
  console.log(arr[i])
}
var i = arr.length
while(i--) {
  console.log(arr[i])
}
var i = arr.length
do {
console.log(arr[--i])
} while(i)
```

1.一次控制條件中的比較（i==true）

2.一次減法操作（i--）

3.一次陣列查詢（items[i]）

4.一次函式呼叫（console.log（items[i]））

新的迴圈程式碼每次迭代中減少了兩次操作，隨著迭代次數增加，效能的提升會更趨明顯。

## 最佳化 if else

if else 對比 switch

二者速度上差別不大，判斷條件較多的話，switch易讀性更好一些。

最佳化if-else的目標是：最小化到達正確分支前所需判斷的條件數量。最簡單的最佳化方法是確保最可能出現的條件放在首位。考慮如下程式碼：

```javascript
var value = 4;
 
if(value <= 5) {
 
} else if (value > 5 & value < 10) {
 
} else {
 
}
```

如果value小於等於5的機率比較大，就可以把小於5的條件放在最前面，否則，選擇相對機率比較大的防止在最前面。

另一種減少條件判斷次數的方法是把if-else組織成一系列巢狀的if-else語句。使用單個龐大的if-else通常會導致執行緩慢，因為每個條件都需要判斷。例如：

```javascript
var value = 9;
 
if(value === 1) {
 
} else if(value === 2) {
 
} else if(value === 3) {
 
} else if(value === 4) {
 
} else if(value === 5) {
 
} else if(value === 6) {
 
} else if(value === 7) {
 
} else if(value === 8) {
 
} else if(value === 9) {
 
} else {
  
}
```

在這個if-else表示式中，條件語句最多要判斷10次。假設value的值在0到10之間均勻分佈，那麼這會增加平均執行時間。為了最小化條件判斷的次數，程式碼可重寫為一系列巢狀的if-else語句，比如：

```javascript
var value = 9;
if(value <= 5) {
  if(value === 1) {
 
  } else if(value === 2) {
  
  } else if(value === 3) {
  
  } else if(value === 4) {
  
  } else {}
} else {
  if(value === 6) {
  
  } else if(value === 7) {
  
  } else if(value === 8) {
  
  } else if(value === 9) {
  
  } else {
  
  }
}
```

![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== "點選並拖拽以移動")

避免使用if else 和switch

```javascript
var value = 3
var resultArr = [1,2,3,4,5,6,7,8,9,10]
var result = resultArr[value]
```

用物件或者陣列代替if else既能增加移讀性，也可以提高效能。

總結：

● for、while和do-while迴圈效能特性相似，所以沒有一種迴圈型別明顯快於或慢於其他型別。

● 避免使用for-in迴圈，除非你需要遍歷一個屬性數量未知的物件。

● 改善迴圈效能的最佳方式是減少每次迭代的運算量和減少迴圈迭代次數。

● 通常來說，switch總是比if-else快，但並不總是最佳解決方案。

● 在判斷條件較多時，使用查詢表比if-else和switch更快。

● 瀏覽器的呼叫棧大小限制了遞迴演算法在JavaScript中的應用；棧溢位錯誤會導致其他程式碼中斷執行。

● 如果你遇到棧溢位錯誤，可將方法改為迭代演算法，或使用Memoization來避免重複計算。

執行的程式碼數量越大，使用這些策略所帶來的效能提升也就越明顯。

# 四 字串和正規表示式

## 字串連結

![](https://img-blog.csdnimg.cn/20210621132033152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODMxMzQ1,size_16,color_FFFFFF,t_70)

+=＂one＂+＂two＂;

此程式碼執行時，會經歷四個步驟：

1.在記憶體中建立一個臨時字串

2.連線後的字串“onetwo”被賦值給該臨時字串

3.臨時字串與str當前的值連線

4.結果賦值給str

書中介紹，上面這種合併字串的方式相比於str = str +＂one＂+＂two＂;會慢一些，本人在chrome瀏覽器中進行了測試發現：

```javascript

function testStr() {
  var str = ''
  for(var i = 0; i < 200000; i++) {
    str += "one" + 'two'
  }
}

function testStr1() {
  var str = ''
  for(var i = 0; i < 200000; i++) {
    str = str + "one" + 'two'
  }
}

console.time()
testStr()
console.timeEnd()
// default: 14.6337890625 ms
console.time()
testStr1()
console.timeEnd()
// default: 26.135009765625 ms
```

結果是相反的，估計是現代瀏覽器對拼接方法進行了最佳化。

在FireFox瀏覽器中，時間相差不大。

IE瀏覽器中，也是第一個比下面的稍微快一點。

對比第一種，用陣列的方法拼接字串，最佳化不是很明顯，但在Ie瀏覽器中，陣列方法比較消耗時間。

```javascript
function arrToStr() {
  var str = '', arr = []
  for(var i = 0; i < 200000; i++) {
    arr.push("one" + 'two')
  }
  str += arr.join('')
}
```

str的contact方法稍微慢一些。

## 正規表示式最佳化

正規表示式最佳化的要點是理解它的工作原理，理解回溯。回溯會產生昂貴的計算消耗，一不小心會導致回溯失控。

### 回溯法概念

基本思想是：從問題的某一種狀態（初始狀態）出發，搜尋從這種狀態出發 所能達到的所有“狀態”，當一條路走到“盡頭”的時候（不能再前進），再後退一步或若干步，從 另一種可能“狀態”出發，繼續搜尋，直到所有的“路徑”（狀態）都試探過。這種不斷“前進”、 不斷“回溯”尋找解的方法，就稱作“回溯法”。

### 引起回溯的場景

* **貪婪量詞**

沒有回溯的情況

假設我們的正則是 /ab{1,3}c/，而當目標字串是 "abbbc" 時，就沒有所謂的“回溯”。其匹配過程是：

![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== "點選並拖拽以移動")![](https://img-blog.csdnimg.cn/20210706104656121.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODMxMzQ1,size_16,color_FFFFFF,t_70)

有回溯的情況

如果目標字串是"abbc"，中間就有回溯。

![](https://img-blog.csdnimg.cn/20210706105415914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODMxMzQ1,size_16,color_FFFFFF,t_70)![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== "點選並拖拽以移動")

其中第 7 步和第 10 步是回溯。第 7 步與第 4 步一樣，此時 b{1,3} 匹配了兩個 "b"，而第 10 步與 第 3 步一樣，此時 b{1,3} 只匹配了一個 "b"，這也是 b{1,3} 的最終匹配果。

**惰性量詞**

```javascript
var string = "12345"; 
var regex = /(\d{1,3}?)(\d{1,3})/; 
console.log( string.match(regex) ); 
// => ["1234", "1", "234", index: 0, input: "12345"]
```

目標字串是 "12345"，匹配過程是：

![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== "點選並拖拽以移動")![](https://img-blog.csdnimg.cn/20210706111354424.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODMxMzQ1,size_16,color_FFFFFF,t_70)

知道你不貪、很知足，但是為了整體匹配成，沒辦法，也只能給你多塞點了。因此最後 \d{1,3}? 匹配的字 符是 "12"，是兩個數字，而不是一個。

**分支結構**

分支結構也是惰性的，但是也會引起回溯

```javascript
var reg1 = /^can|candy$/g
console.log('candy'.match(reg1)) //  [ 'can' ]
 
var reg = /^(?:can|candy)$/g
console.log('candy'.match(reg)) // [ 'candy' ]
```

上面第二個正則的匹配過程：

![](https://img-blog.csdnimg.cn/20210706144147831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODMxMzQ1,size_16,color_FFFFFF,t_70)![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== "點選並拖拽以移動")

總結：

* 貪婪量詞“試”的策略是：買衣服砍價。價錢太高了，便宜點，不行，再便宜點。
* 惰性量詞“試”的策略是：賣東西加價。給少了，再多給點行不，還有點少啊，再給點。
* 分支結構“試”的策略是：貨比三家。這家不行，換一家吧，還不行，再換。

對比貪婪量詞和惰性量詞的回溯：

![](https://img-blog.csdnimg.cn/20210706144147831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODMxMzQ1,size_16,color_FFFFFF,t_70)![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== "點選並拖拽以移動")

惰性量詞的匹配次數比貪婪量詞的多，親自在不同的瀏覽器試過後發現，即使匹配的內容很長，也很難看出二者誰的效率更高。

當正規表示式導致你的瀏覽器假死數秒、數分鐘、甚至更長時間，問題很可能是因為回溯失控。

方案: 有待補充

# 五 響應速度

瀏覽器的響應速度是一個很重要的效能關注點，大多數瀏覽器讓一個單一的執行緒執行javascript程式碼和使用者介面的更新，也就是說如果javascript程式碼執行時間過長，將會導致使用者介面得不到及時的更新，甚至新的任務不會被放入ui佇列。

## 瀏覽器UI執行緒

瀏覽器UI執行緒做了兩件事情，執行javascript和更新使用者介面。UI執行緒的工作基於一個簡單的佇列系統，任務會被儲存到佇列中直到程式空閒。一旦空閒，佇列中的下一個任務就被重新提取出來並執行。這些任務要麼是執行JavaScript程式碼，要麼是執行UI更新，包括重繪和重排（在第三章討論過）。

```

<button id="btn" onclick="handleClick"></button>
 
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

<div>live-srver</div>

執行效率高的程式碼-可以這樣寫出來～

相關文章