利用console.time優化js程式碼

RobinsonZhang發表於2018-02-23
優化JS

前言

也許你經常會想知道如何優化自己的程式碼，除了設計模式、程式碼簡潔、易維護之外，我們還需要考慮的一點也非常重要，尤其是檢測一些邏輯的複雜性上，那就是程式碼的實際執行時間。

console.time(timerName)

作為常識，我們首先要知道console.time() 以及timeEnd()已經為我們提供了api，可以方便的檢測程式碼段的執行時間，每一個計時器必須擁有唯一的名字，頁面中最多能同時執行10,000個計時器,最終會返回一個程式碼段執行的計時：timerName：xxxms。

在這個之前我們可能是通過程式碼開始和結束位置加入new Date()來檢視時間差對比程式碼執行效率。

mdn參考文件：console.time

for迴圈

眾所周知，for迴圈是非常低效的方式，但有些時候可能沒有更好的方法找到某條件的元素，但一定要注意我們在找到匹配某條件的元素後要跳出迴圈，否則就會進行無意義的繼續迴圈，降低程式碼的執行效率。

程式碼舉例

function test1(){
  console.time(1)
  for(var i = 0 ; i<1000000 ;i++){
    if(i==99) {
      var temp=1
      continue 
    }
  }
  console.timeEnd(1)
}

function test2(){
  console.time(2)
  for(var i = 0 ; i<1000000 ;i++){
    if(i==99) {
      var temp=1
      break 
    }
  }
  console.timeEnd(2)
}
test1()//268.429931640625ms
test2()//0.09326171875ms
複製程式碼

codepen例項

console.time案例

總結

通過以上時間的直接證明，我們可以看出某些必要的邏輯優化以及程式碼優化是非常必要的（比如邏輯完成時及時跳出當前邏輯尤其迴圈邏輯），對於程式碼執行效率上總結出來的一些經驗可是非常寶貴的程式設計思想or技巧。

相關文章