[Java教程]javascript中，你真的會用console嗎？

0 2015-08-11 17:00:09

使用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) { }//空while } waitForMs(500);//輸出什么？ //->time span: 0ms //實際測試輸出的是 time span: 0.023ms //實際的time是不確定的接近于0ms的，而不是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');

輸出chrome:console.trace() tracer @ VM127:3 bar @ VM127:12 foo @ VM127:8 (anonymous function) @ VM127:15 InjectedScript._evaluateOn @ VM116:895 InjectedScript._evaluateAndWrap @ VM116:828 InjectedScript.evaluate @ VM116:694

table

使用console將對象以表格呈現

可將傳入的對象，或數組以表格形式輸出，相比傳統樹形輸出，這種輸出方案更適合內部元素排列整齊的對象或數組，不然可能會出現很多的 undefined。var people = { flora: { name: 'floraLam', age: '12' }, john: { name: 'johnMa', age: '45' }, ray:{ name:'rayGuo', age:'22' } }; console.table(people);(index)nameage

flora"floraLam""12"

john"johnMa""45"

ray"rayGuo""22"

time和timeEnd

計算程序的執行時間(成對出現)

可以將成對的console.time()和console.timeEnd()之間代碼的運行時間輸出到控制臺上console.time('計時器'); for (var i = 0; i < 1000; i++) { for (var j = 0; j < 1000; j++) { //空 } } console.timeEnd('計時器'); //->計時器: 725.726ms

profile

使用console測試程序性能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.time的了解和js單線程的理解。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) { }//空while } waitForMs(500);//->time span: 0ms

console.time()語句和console.timeEnd()語句是用來對程序的執行進行計時的。

setTimeout()接受兩個參數，第一個是回調函數，第二個是推遲執行的毫秒數。setTimeout()只是將事件插入了"任務隊列"，必須等到當前代碼(執行棧)執行完，主線程才會去執行它指定的回調函數。

因為f1和f2被都setTimeout事先設置的定時器裝到一個事件隊列里面。本來 f1應該在100ms后就要執行了，但是因為waitForMs占用了線程，而執行JavaScript是單線程的，所以就沒辦法在100ms后執行那個 f1，所以需要等500ms等waitForMs執行完，然后在執行f1和f2，這時候f1和f2就幾乎同時執行了。

還有一種說法：setTimeout()的第二個參數告訴javascript再過多長時間把當前任務添加到隊列中。

本文網址：http://www.shaoqun.com/a/131846.html

*特別聲明：以上內容來自于網絡收集，著作權屬原作者所有，如有侵權，請聯系我們：admin@shaoqun.com。

JavaScript

0

總結

以上是生活随笔為你收集整理的java中的console是干什么的_[Java教程]javascript中，你真的会用console吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。