0%

console的几种写法

1、输出信息

1
2
3
4
console.log('Hello World!');
console.info('Something happened…');
console.warn('Something strange happened…');
console.error('Something horrible happened…');

2、执行时间

1
2
console.time(); 
console.timeEnd();

3、内存占用

1
console.memory //chrome属性

console-2.png

1
2
3
4
5
6
7
memory:{
jsHeapSizeLimit: 2190000000 // JavaScript堆所限制的内存量(以字节为单位)
totalJSHeapSize: 11900000 // JavaScript堆已分配的内存量(以字节为单位),包括可用空间
usedJSHeapSize: 10000000 // 当前正在使用的内存量(以字节为单位)
}
// 其中,usedJSHeapSize 一定要小于 totalJSHeapSize 值,否则又内存泄漏的问题。
// 这些值只是一个量化的数字,防止给攻击者获取到的。

4、提示位置

1
console.trace() //获取跟踪信息和所有涉及的函数,提供了一个调用堆栈的选择列表
1
2
3
4
force.on("start", function () {
console.trace("布局开始");
})
// 获取start的回调函数的调用堆栈

console-3.png

5、统计执行次数

1
console.count("COUNT")
1
2
3
4
5
6
7
8
9
10
force.on("start", function () {
console.trace("布局开始");
})
.on("end", function () {
console.log("布局结束");
})
.on('tick', function () {
console.count("COUNT");
})
.start()

console-4.png

1
力学图算法一共进行了 298次迭代 最终布局完成 # console.count("COUNT");该方法对性能影响较大

6、输出表格

1
console.table() // 最大输出1000条

console-5.png

参考 & 引用

http://mp.weixin.qq.com/s?__biz=MzA5NzkwNDk3MQ==&mid=2650586705&idx=1&sn=a0beda9244b16d33f976ad1beed93b52&chksm=8891ae75bfe62763e657cae08e1442ae64c2904378d2cd208fdbb6eb9ec01c483b1828fc2e3d&mpshare=1&scene=1&srcid=0320qVvrNQUzSvofevzMNcMg# rd

http://www.zhuyuntao.cn/2018/02/27/%E6%80%A7%E8%83%BD%E7%9B%91%E6%8E%A7window-performance/

https://www.html5rocks.com/en/tutorials/memory/effectivemanagement/