感覺一段時間沒有寫文章了，剛好昨天看 Alex 直播時，發現很有趣的內容，所以這邊紀錄一下。
Console
前端開發時的偵錯工具之一，在瀏覽器按下 F12 就可以找到該功能，藉由 window 物件裡的 console 物件用來操作。
在介紹前，因為主控台的內容是給開發人員用的，產品發佈後原則上是不留內容的，這牽扯的很多就不贅述了，所以在使用時建議自己實作一個 console 使用。
1
2
3
4
5
6
7
8
9
| let console = {
isDev: true,
log: function (...args) {
if (this.isDev) {
window.console.log('== MIO LOG ==');
window.console.log(...args);
}
}
}
|
物件內容大致如上，產品發佈前將 isDev 改為 false 即可，不需要將開發過程中的 log 一一拿掉，也可以透過相關套件幫忙，自由選擇。
log vs dir
可以按下 F12 直接在這個畫面看差別。
1
2
3
| let wrapper = document.getElementsByClassName('wrapper')[0];
console.log(wrapper);
console.dir(wrapper);
|
log vs info
info 對於 chrome 瀏覽器來說似乎與 log 一模一樣，而 firefox 瀏覽器則會出現符號(log 則沒有符號)。
info, warn, error
表達 log 層級
1
2
3
| console.info('info');
console.warn('warn');
console.error('error');
|
table
通常是用在物件陣列上，使物件陣列以表格方式呈現在主控台上。
也可以加入屬性名稱陣列，來篩選內容。
1
2
3
4
5
6
7
8
9
| let dogs = [{
name: 'Snickers',
age: 2
}, {
name: 'hugo',
age: 8
}];
console.table(dogs);
console.table(dogs, ['name']);
|
time, timeEnd
計算相同參數的經歷時間，由 time 開始 timeEnd 結束。
這裡開始才是本文重點，Alex 拋出了一些問題，如果讀者有興趣也可以參與，請問哪個測試案例較快？
1
2
3
4
5
6
7
8
9
10
11
12
13
| console.time('test 1');
let i1;
let j1;
for (i1 = 1; i1 <= 10000000; i1++) {
j1 = i1;
}
console.timeEnd('test 1');
console.time('test 2');
for (let i2 = 1; i2 <= 10000000; i2++) {
let j2 = i2;
}
console.timeEnd('test 2');
|
可以看到有個 test 速度較另一個慢快三倍，那速度差異如此之大是因為 i 還是 j 的關係？
答案是都不是最主要的原因，個人推測是修改全域變數造成的，底層邏輯我也不是很清楚，如果有其他答案也歡迎留言分享。
讓我們將測試用 scope 包起來再執行一次。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| {
console.time('test 1');
let i1;
let j1;
for (i1 = 1; i1 <= 10000000; i1++) {
j1 = i1;
}
console.timeEnd('test 1');
}
{
console.time('test 2');
for (let i2 = 1; i2 <= 10000000; i2++) {
let j2 = i2;
}
console.timeEnd('test 2');
}
|
跑 1 千萬次的時間差不到一毫秒，是幾乎可以忽略的程度，說明了把程式碼包起來有多重要。
還有一個測試案例為陣列填值與讀取測試。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| ;
(function () {
console.time('test ary1')
let ary1 = [];
for (let i = 1; i <= 10000000; i++) {
ary1.push(i);
}
ary1.forEach(item => {
let j = item;
});
console.timeEnd('test ary1')
console.time('test ary2')
let ary2 = [];
for (let i = 1; i <= 10000000; i++) {
ary2.push({
count: i
});
}
ary2.forEach(item => {
let j = item;
});
console.timeEnd('test ary2')
console.time('test ary3')
let ary3 = [];
for (let i = 1; i <= 10000000; i++) {
ary3.push(i % 2 ? i : {
count: i
});
}
ary3.forEach(item => {
let j = item;
});
console.timeEnd('test ary3')
})();
|
這部分我不曉得發生甚麼事情了，我三個測試案例幾乎一樣速度，不像 Alex 實測時， array 內容如果不統一則會大幅下降速度。
當然還有很多 console 方法可以自己在去 MDN 觀看。
參考資料
Console - Web APIs MDN