利用console.time優化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技巧。