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

965 阅读3分钟

浏览器内核

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内最后面

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