1. 程式人生 > >使用console進行效能測試和計算程式碼執行時間

使用console進行效能測試和計算程式碼執行時間

對於前端開發人員,在開發過程中經常需要監控某些表示式或變數的值,如果使用用 debugger 會顯得過於笨重,最常用的方法是會將值輸出到控制檯上方便除錯。   最常用的語句就是console.log(expression)了。   從早前一道阿里實習生招聘筆試題目入手:
function f1() { console.time('time span'); } function f2() { console.timeEnd('time span'); } setTimeout(f1, 100); setTimeout(f2, 200); function waitForMs(n) { var now = Date.now(); while (Date.now() - now < n) { } } waitForMs(500);//time span: 0ms
  我們先說說關於console的高階操作,最後在一起分析這道題目。   trace   console.trace()用來追蹤函式的呼叫過程。   在大型專案尤其是框架開發中,函式的呼叫軌跡可以十分複雜,console.trace()方法可以將函式的被呼叫過程清楚地輸出到控制檯上。
function tracer(a) { console.trace(); return a; } function foo(a) { return bar(a); } function bar(a) { return tracer(a); } var a = foo("tracer"); table
  使用console將物件以表格呈現   可將傳入的物件,或陣列以表格形式輸出,相比傳統樹形輸出,這種輸出方案更適合內部元素排列整齊的物件或陣列,不然可能會出現很多的 undefined。
var people = { flora: { name: 'floraLam', age: '12' }, john: { name: 'johnMa', age: '45' }, ray:{ name:'rayGuo', age:'22' } }; console.table(people);火狐的控制檯:   time timeEnd   計算程式的執行時間   可以將成對的console.time()和console.timeEnd()之間程式碼的執行時間輸出到控制檯上   console.time('計時器');for (var i = 0; i < 1000; i++) {      for (var j = 0; j < 1000; j++) {}   }   console.timeEnd('計時器');   以上程式碼計算console.time("計時器");和console.timeEnd("計時器");之間的程式碼塊所需要的事件。
  profile   使用console測試程式效能   開發中,我們常常要評估段程式碼或是某個函式的效能。在函式中手動列印時間固然可以,但顯得不夠靈活而且有誤差。藉助控制檯以及console.profile()方法我們可以很方便地監控執行效能。
function parent() { for (var i = 0; i < 10000; i++) { childA() } } function childA(j) { for (var i = 0; i < j; i++) {} } console.profile('效能分析'); parent(); console.profileEnd();
  上述程式碼計算console.profile("效能分析");和console.profileEnd();之間,程式碼塊中涉及的函式的執行效率。   現在說回筆試題目   題目考察應聘者對console.time的瞭解和js單執行緒的理解。