WEB学习进阶之路五

举报
sujrexia 发表于 2020/07/01 12:23:32 2020/07/01
【摘要】 后面几节开始学习javascript的性能优化,不过有话说“工欲善其事,必先利其器”,又有说“磨刀不误砍柴功”。接下来本章就先磨磨刀。认识下性能优化中的利器console控制台。console是js的一个对象,它可以接入不同的浏览器,实现相关功能,对于不同浏览器又不同的表现结果,本章主要是以chrome为蓝本,进行下面课程的讲解打开chrome,使用 F12 键或者 Ctrl+Shift+i...

后面几节开始学习javascript的性能优化,不过有话说“工欲善其事,必先利其器”,又有说“磨刀不误砍柴功”。


接下来本章就先磨磨刀。认识下性能优化中的利器console控制台。


console是js的一个对象,它可以接入不同的浏览器,实现相关功能,对于不同浏览器又不同的表现结果,本章主要是以chrome为蓝本,进行下面课程的讲解

打开chrome,使用 F12 键或者 Ctrl+Shift+i组合键打开控制台

image.png

本章主要讲解下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这个文字,

  1. 去相关网站生成asccii字符画

  2. 复制结果到notepad++, 替换所有的\r\n或者\n为a(注意替换使用的规则是正则),注意这里a在字符画的结果中如果没有,那就可以使用,否则请用其他代替。

  3. 将a换成\n(注意替换使用的规则是字符串),另外a和第二步的字符要对上。

  4. 将结果复制到console.log中,可以看到效果啦

image.png


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。