JS性能優化2

從本文你將瞭解到

• JSBench的使用
• 堆棧JS執行過程的介紹
• 減小層級判斷
• 減小做用域鏈查找層級
• 減小數據讀取次數（緩存）
• 字面量與構造式
• 減小循環體中活動
• 減小聲明及語句數（未頻繁使用的能夠不聲明）
• 採用事件綁定（委託）

JSBench使用

連接地址：https://jsbench.me/,ops越大越好，每秒執行次數。因爲瀏覽器多線程，儘量一個標籤頁進行測試,測試過程當中不要切換線程，保持數據的準確性

圖解堆棧中代碼執行流程

let a = 10
function foo(b){
  let a = 2
  function baz(c){
    console.log(a+b+c)
  }
  return baz
}
let fn = foo(2)
fn(3)

1. 執行環境棧用於存放咱們的執行上下文（ECStack 執行環境棧）
2. 環境棧內的全局執行環境率先被壓入棧（EC全局global執行上下文）

3. 代碼執行時，EC全局 VO變量對象

   1. a=10 存在棧內存中
   2. foo= 函數,因爲是函數，會開闢一個指針爲AB1的堆內存，並將指針AB1指向foo（即foo=AB1）
   3. 指針爲AB1的堆中含有 function foo(b){...} name:foo length:1
4. 繼續執行，到fn = foo(2)時，會開闢一個函數foo的執行上下文 EC(foo)

5. EC(foo) 初始化this = window, 做用域鏈向外<foo.AO,VO>,AO變量對象

   1. arguments：{0：2}
   2. b = 2
   3. a = 2
   4. baz = 函數，因爲是函數，會開闢一個指針爲AB2的堆內存,並將指針AB2指向baz（即baz=AB2）
   5. 指針爲AB2的堆中含有 function baz(c){...} name:baz length:1
6. 繼續執行，到fn(3)時，會開闢一個函數baz的執行上下文 EC(baz)

7. EC(baz) 初始化this = window, 做用域鏈向外<baz.AO,foo.AO,VO>,AO變量對象,AO變量對象

   1. arguments：{0：3}
   2. c = 3
   3. console.log(a+b+c)

• 減小判斷層級

儘可能減小if..else.. 使用return代替

對於明確的條件分支建議用switch..case代替else if()..

else if只適合區間判斷

function doSomething(part,chapter){
  const parts = ["ES2016","TOM","jack","React"]
  if(part){
    console.log("請確認模塊信息")
    return;
  }

  if(!parts.includes(part)) return;
  
  console.log("屬於當前課程")
  if(chapter <= 5) return;
  console.log("您須要提供VIP身份")
}
doSomething("ES2016",6)

• 減小做用域鏈查找層級

  var name = "zca"
  function foo(){
  name = "mcgee" //這裏的name在全局聲明，這裏只是賦值
  function baz(){
    var age = 38
    console.log(age)
    console.log(name)
  }
  baz()
  }
  foo()

  時間更快的寫法，（時間換空間的方式）

裏面又var了,新聲明會在內存開闢新空間，佔內存。若是name數據量特別大，反而上面更好，（空間換時間）

var name = "zca"
function foo(){
  var name = "mcgee"  //這裏的name屬於foo內的
  function baz(){
    var age = 38
    console.log(age)
    console.log(name)
  }
  baz()
}
foo()

• 減小數據讀取次數

每次都會查找ele對象，將ele對象緩存

..html..
<div id="skip" class="skip"></div>

..js..

var oBox = document.getElementById("skip")

// function hasEle(ele,cls){
//   return ele.className == cls
// }

function hasEle(ele,cls){
  var clsname = ele.className
  return  clsname == cls
}
console.log(hasEle(oBox,'skip'))

• 字面量與構造式

對於對象類型字面量形式略優於構造函數形式，對於基本類型字面量遠優於構造函數式

經過函數式建立對象

let tests = ()=>{
  let objs = new Object()
  objs.name="mcgee"
  objs.age=18
  return objs
}

經過字面量建立對象

let tests = ()=>{
  let objs = {
    name:"mcgee",
    age:18
  }
  return objs
}

對於基本類型字面量遠優於構造函數式

var str1 = "asdaasdsqwe"
var str2 = new String("asdaasdsqwe") //至關於調用函數，多作一些事，擴容更好一些

• 減小循環體活動

循環體內代碼越多，執行的越多，效率越慢

將循環體內固定值或者重複的提取出來，

循環方式的選擇 for while

var test = ()=>{
  var arr = ["mcgee",18,"我爲前端而活"]
  var i
  for(i=0;i<arr.length;i++){
    console.log(arr[i])
  }
}

var test = ()=>{
  var arr = ["mcgee",18,"我爲前端而活"]
  var i,len=arr.length //固定值緩存
  for(i=0;i<len;i++){
    console.log(arr[i])
  }
}

var test = ()=>{
  var arr = ["mcgee",18,"我爲前端而活"]
  var len=arr.length
  while(len--){ //減到0就停掉了 更快
    console.log(arr[len])
  }
}

減小聲明及語句數

這與緩存彷佛並不違背，頻繁調用的緩存提升運行效率，而非頻繁調用或固定值儘可能少用聲明

<div id="box" style="width:100px;height:100px;"></div>

var oBox = document.getElementById("box")

var test = (ele)=>{
  let w = ele.offsetWidth
  let h = ele.offsetHeight
  return w*h
}

//方式更快，頻繁使用的才緩存
var test = (ele)=>{
  return ele.offsetWidth*ele.offsetHeight
}
console.log(test(oBox))

又例如

var test = ()=>{
  var name="sd"
  var age = 18
  var str = "55asdada11111"
  return name+age+str
}

//方式更快（詞法分析，語法分析，語法轉換，代碼生成）
var test = ()=>{
  var name="sd",
      age = 18,
      str = "55asdada11111"
  return name+age+str
}

採用事件委託

利用js元素冒泡的機制，把本來須要去綁定的響應事件的子元素去委託給父元素

<ul id="ul">
  <li>mcgee</li>
  <li>18</li>
  <li>"woaixx"</li>
</ul>

var list = document.querySelectorAll("li")

function showTxt(ev){
  var obj = ev.target
  if(obj.nodeName.toLowerCase() === 'li')
  {
    console.log(obj.innerHTML)
  }
}

// for(let item of list){
//   item.onclick = showTxt
// }

var oUl = document.getElementById("ul")
oUl.addEventListener("click",showTxt,true)