浏览器内核
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内最后面
保证页面结构加载完成才去做这些事情