浏览器内核

webkit内核(V8引擎)

谷歌Chrome
Safari
Opera >= V14
国产浏览器
手机浏览器

Geoko

火狐Firefox

Trident

IE
IE DEGE开始采用双内核(包含Chrome迷你)

Presto

Opera < V14

为什么使用谷歌Chrome：安卓绑定webkit内核，浏览器业务商为了方便维护pc+移动选择使用webkit内核，Chrome是为webkit内核的最先实践者，且提供了良好的开发工作者调试支持。

谷歌控制台（F12/Fn+F12）

Elements

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

Console

查看数据结果和报错信息，是JS调试利器，也可能是你职业的敲门砖

Sources

查看项目源码,js调试 debugger

Network

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

Application

查看当前网站所有的数据存储和资源文件（可以复制图片）

Manifest 离线缓存技术
Storage 本地信息存储
- LocalStorage 二级离线缓存不需要和服务器进行交互（性能优化）
- sessionStorage
Cookies 登录信息等
Cache 缓存
Frames 资源浏览

浏览器底层机制EC、STACK、VO、AO、GO

浏览器提供了一个代码执行环境，执行JS代码，ECStack执行环境栈（Execution Context Stack）=> 栈内存（从内存中分配出一块内存）
EC（Execution Content）执行上下文（词法作用域），在编程语言中，代码执行中，为了区分全局和函数执行所处的不同的作用域
VO（Varibale Object）在每一个上下文代码执行时，都可能会创建变量，在每个上下文都会有一个存储变量空间（全局+私有）
AO（Active Object）变量对象，存放当前上下文中的变量（私有）
GO（Golbal Object）全局对象，；浏览器把所有后期需要供JS调取使用的属性和方法（内置）都放到GO里，并且在全局下中创建一个叫做Window变量指向它，例如：document ,应是window.document,

浏览器常用的输出方式

包含console系列、弹窗系列alert/confirm/prompt、document.write

console系列

let a = 10
let b = {c:1}
console.log(a) // 10
console.log(,b) // {c:1}
console.dir(b) //见下图
console.table(b) //见下图

console.dir(b) 输出对象详细键值对信息

可以使用此方法快速查看对象的属性，例如：查看console的属性

console.table(b) 把一个多维JSON数组在控制台按照表格的形式展示出来

弹窗系列

alert/confirm/promp：输出结果都必先经过toString转换为字符串；都会阻断代码的执行，关闭窗口后再回继续运行后面的JS

var obj = {a:1,b:2,c:3}
alert(obj)
confirm(obj)
prompt(obj)

alert 只有确定

confirm 确定+取消

prompt 确定+取消+输入框

document.write

和弹窗方法一样，输出结果都是字符串

script标签位置区别

放在heard里

如果操作页面，可能导致无法获取需要操作的元素,造成代码失效解决方案：使用window.onload：页面结构加载完才会执行，JQ:$(document).ready(function(){})

放在body内最后面

保证页面结构加载完成才去做这些事情

想要开发先了解浏览器内核和控制台