前台系统化学习【JS篇】:（一）浏览器简述

前言

细阅此文章大概需要8分钟\color{red}{8分钟}8分钟左右

本篇中简要讲述\color{red}{简要讲述}简要讲述了：

常见的浏览器内核

浏览器的控制台

Script标签的位置

代码调试（debugger）

在浏览器控制台中打印引用数据类型的结果，开展与合起的区别

假如有任何疑问都可以留言给我，我看到了就会回复，假如我处理不了也可以一起讨论、学习。假如认为有任何错误都还请您不吝赐教，帮我指正，在下万分感谢。希望今后能和大家共同学习、进步。

下一篇会尽快升级，已经写好的文章也会在今后随着了解加深或者者加入少量图解而断断续续的进行修改。

假如觉得这篇文章对您有帮助，还请点个赞支持一下，谢谢大家！

常见的浏览器内核

webkit内核（v8引擎）

谷歌chrome

Safari

opera >=v14

国产浏览器

手机浏览器

….

Gecko

火狐FireFox

presto

Opera < v14

Trident

IE

IE EDGE 开始使用双内核（其中包含chrome迷你）

浏览器的控制台（Chrome）（f12/fn+f12）

Elements：查看结构样式，可以修改这些内容

Console：查看输出结果和报错信息，是js调试的利器

Source:查看项目源码

NetWork:查看当前网站所有资源的请求信息（包括和服务器传输的HTTP报文信息）、加载时间（根据加载时间进行项目优化）

Application：查看当前网站的数据存储和资源文件（可以盗图，在此处可以做音视频防盗）

浏览器常用的输出方式

在控制台输出

console.log/dir/table….在控制台输出

console也是一个【内置对象】，其中提供了好多方法

log：正常输出

dir：输出一个对象的详细键值对信息

table：把一个多维JSON数组在控制台按照表格的方式呈现出来

多维数组：几维数组就看数组当中嵌套了几级

多维对象：几维对象就看对象当中嵌套了几级

在浏览器弹窗

alert/confirm/prompt

弹窗的三种方式输出的【结果都必然经过toString转换为字符串

alert(1);//=>’1′

【弹窗的三种方式会阻断JS代码的执行】，只有当窗口关掉，JS才会继续执行

confirm: 确定和取消【选择型弹窗】

confirm(‘确定干啥嘛？’);复制代码

prompt: 确定和取消【选择型弹窗】不同的是多出一个文本框

prompt(‘确定干啥嘛？写出起因’);

document.write【没人用了】

输出的结果是字符串，写入并覆盖掉页面的一律内容，

关于Script标签

Script标签的位置

一般把script标签放在body的末尾位置，由于js一般是用来操作结构的，假如结构没加载出来，js无法执行就获取不到，所以一般涉及到操作结构的，都建议放在body末尾

但是，也可以放在前面的【三种情况】

不涉及操作结构

利用window.onload=function(){//把js代码放在这里}【利用事件，当页面中的结构和内容都加载完成，才执行这里的代码】

jQuery中也有一个对应window.onload的方法，$(document).reday(function(){}),【和window.onload的区别是：reday是当dom结构加载完成即可以执行，而onload是所有的dom结构以及内容都加载完成才能执行，所以reday肯定比window.onload早先触发，而且reday在页面中可以用屡次，而window.onload只能用一次【起因是一个是dom零级事件绑定，另一个是dom二级事件绑定】】

代码调试（debugger）

在代码前加debugger;在执行时会进入debug模式，通过加断点来运行程序

f10 逐过程，

f11 逐语句执行，一行行代码执行

在浏览器控制台中打印引用数据类型的结果

若是访问引用数据类型，得出并打印某引用数据类型的结果。

则在开展这个结果之前，略所方式查看的是当时的结果

而一旦开展这个结果，永远展现的是堆中最新的数据

在前台领域混了这几年，总结了一套前台学习的精讲视频和学习路线，假如有对前台开发感兴趣的伙伴，不论你是想转行，或者是大学生，还有工作中想提升自己能力的web前台党，欢迎大家的加入我的前台开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前台技术!也可以关注我的微信公众号：【前台留学生】 每天升级最新技术文章干货。

作者：Hypnotize

链接：https://juejin.im/post/6867086699399217160

来源：掘金