前端知识体系学习~浏览器

常见的浏览器内核

1.webkit内核（v8引擎）
谷歌chrome
Safari
opera >=v14
国产浏览器
手机浏览器
....
2.Gecko
火狐FireFox
3.presto
Opera <v14
4.Trident
IE
IE EDGE 开始使用双内核（其中包含chrome迷你）

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

Elements：查看结构样式，可以修改这些内容
Console：查看输出结果和报错信息，是js调试的利器
Source:查看项目源码
NetWork:查看当前网站所有资源的请求信息（包括和服务器传输的HTTP报文信息）、加载时间（根据加载时间进行项目优化）
Application：查看当前网站的数据存储和资源文件（可以盗图，在此处可以做音视频防盗）
浏览器常用的输出方式

在控制台输出

console.log/dir/table....在控制台输出
console也是一个【内置对象】，其中提供了好多方法
log：正常输出
dir： 输出一个对象的详细键值对信息
table：把一个多维JSON数组在控制台按照表格的方式呈现出来

//如
    [12,13]//一维数组
    [12,[12]]//二维数组
    [12,[{xxx:xxx}]]//三维数组
    //二维及以上都称为多维数组
复制代码

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

//如
                        {name:xxx}//一维对象
                        {name:xxx,[12,23]}//二维对象
                        {name:{name:{name:function(){}}},[12,13]}//三维对象
                        //二维及以上都称为多维对象
复制代码

let a = 10;
            let b = [{id:1,name:'张三'},{id:2,name:'李四'}];
            //1. console.log/dir/table....在控制台输出
                console.log(a);//数字类型10
                console.dir(a);//字符串类型10
                console.table(a);//
复制代码

在浏览器弹窗

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

alert(1);//=>'1'
复制代码

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

for(let i = 1;i<=5;i++){
                    alert(i);
                    console.log('哈哈');
                  }  
            
复制代码

+ confirm:确定和取消【选择型弹窗】
          
复制代码

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

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

prompt('确定干啥嘛？写出原因');
                 
复制代码

document.write【没人用了】

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

Script标签的位置

一般把script标签放在body的末尾位置，因为js一般是用来操作结构的，如果结构没加载出来，js无法执行就获取不到，所以一般涉及到操作结构的，都建议放在body末尾
但是，也可以放在前面
不涉及操作结构
利用window.onload=function(){//把js代码放在这里}【利用事件，当页面中的结构和内容都加载完成，才执行这里的代码】
jQuery中也有一个对应的方法，$(document).reday(function(){}),【和window.onload的区别是：reday是当dom结构加载完成就可以执行，而onload是所有的dom结构以及内容都加载完成才能执行，所以reday一定比window.onload早先触发，而且reday在页面中可以用多次，而window.onload只能用一次【原因是一个是dom零级事件绑定，另一个是dom二级事件绑定】】

代码调试

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

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

若是访问引用数据类型，得出并打印某引用数据类型的结果。
则在展开这个结果之前，略所方式查看的是当时的结果
而一旦展开这个结果，永远展示的是堆中最新的数据

后话

如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以加入到我的Q群中:前114中6649后671，里面有许多前端学习资料以及2020大厂面试真题 点赞、评论、转发 即可免费获取，希望能够对你们有所帮助。