WEB学习进阶之路五
后面几节开始学习javascript的性能优化,不过有话说“工欲善其事,必先利其器”,又有说“磨刀不误砍柴功”。
接下来本章就先磨磨刀。认识下性能优化中的利器console控制台。
console是js的一个对象,它可以接入不同的浏览器,实现相关功能,对于不同浏览器又不同的表现结果,本章主要是以chrome为蓝本,进行下面课程的讲解
打开chrome,使用 F12 键或者 Ctrl+Shift+i组合键打开控制台
本章主要讲解下console对象的使用,我先列一张表,将console的所有对象方法展示出来,便于大家有个直观的了解。对于今后需要用到性能分析主要的我会以红字标识。
方法 | 描述 | 实例 |
---|---|---|
console.assert() | 接受两个参数,第一个参数是表达式,第二个参数是字符串【可选】。 当第一个参数为false,才会输出第二个参数,否则不会有结果。 失败时会同时会显示堆栈。 |
console.assert(1 === 0, "assert failed") |
console.clear() | 清除当前控制台的所有输出,将光标回置到第一行。 | console.clear() |
console.count() | 用于计数,输出它被调用了多少次。 | for (left i = 0; i < 5; i++) { console.count('count'); } |
console.error() | 输出带有红色叉号的错误信息,同时会显示错误发生的堆栈。 | console.error("错误") |
console.group() | 用于将显示的信息分组,可以把信息进行折叠和展开。 | console.group('第一层分组'); console.group('第二层分组'); console.log('error'); console.error('error'); console.warn('error'); console.groupEnd(); console.groupEnd(); |
console.groupCollapsed() | 与console.group方法类似,唯一的区别是该组的内容在第一次显示时是收起的。 | console.groupCollapsed('第一层分组'); console.groupCollapsed('第二层分组'); console.log('error'); console.error('error'); console.warn('error'); console.groupEnd(); console.groupEnd(); |
console.groupEnd() | 结束内联分组 | |
console.info() | 打印资讯类说明信息,和console.log一样 | |
console.log() | 输出信息 | console.log("hello china!") |
console.table() | 将复合类型的数据转为表格显示。 | var arrs = [ {num: "1"}, {num: "2"}, {num: "3" } ]; console.table(arrs); var obj = { a: {num: "1"}, b: {num: "2"}, c: {num: "3"} }; console.table(obj); |
console.time() | 开始计时 | console.time('计时器'); for (var i = 0; i < 100; i++) { for (var j = 0; j < 100; j++) {} } console.timeEnd('计时器'); |
console.timeEnd() | 结束计时 | |
console.trace() | 追踪函数的调用过程 | function d(a) { console.trace(); return a; } function b(a) { return c(a); } function c(a) { return d(a); } var a = b('123'); |
console.warn() | 输出带有黄色感叹号的警告信息 | console.warn("警告") |
在对信息输出时可以使用下面的字符,以便进行参数替换
置换串 | 描述 |
---|---|
%o | 打印Javascript对象或者DOM节点对象,DOM输出类似控制台中的Element元素那样 |
%O | 打印Javascript对象或者DOM节点对象,DOM输出DOM树,类似javascript对象那样 |
%d | %i | 打印整数,格式化输出整数 |
%f |
打印浮点数,格式化输出浮点数 |
%s | 打印字符串 |
%c | 根据提供的样式参数,样式化展示字符串 |
下来在介绍一个比较有意思的东西,经常在大公司的网站按F12调出控制台以后,会发现他会输出一些字符画,怎么做的呢,接下来教教大家,让你也应用在你的网站用,提升下你的逼格๑乛◡乛๑。
百度随便搜索字符画,有很多在线网站,这里就不列举了,当然有很多ide也有相关的插件让你去使用,更有js的代码插件直接调用,这里介绍一个简单的方式,比如
hello china这个文字,
去相关网站生成asccii字符画
复制结果到notepad++, 替换所有的\r\n或者\n为a(注意替换使用的规则是正则),注意这里a在字符画的结果中如果没有,那就可以使用,否则请用其他代替。
将a换成\n(注意替换使用的规则是字符串),另外a和第二步的字符要对上。
将结果复制到console.log中,可以看到效果啦
- 点赞
- 收藏
- 关注作者
评论(0)