BOM(浏览器对象模型)
BOM是浏览器对象模型
window是浏览器内置中的全局对象,我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
window 对象下包含了 navigator 、 location 、 document 、 history 、 screen 5个属性,即所谓的ВОМ(浏览器对象模型)
document 是实现 DOM 的基础,它其实是依附于 window 的属性。
注:依附于 window 对象的所有属性和方法,使用时可以省略 window
定时器
定时器—间歇函数
网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码,不需要我们手动去触发 例如:网页中的倒计时
开启定时器
注意:
1.函数名字不需要加括号
2.定时器返回的是一个 id 数字
关闭定时器
let 变量名= setInterval(函数,间隔时间) clearInterval(变量名)
注意:
1.函数名字不需要加括号
2.定时器返回的是一个 id 数字
定时器—延时函数
JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout
语法:
setTimeout(回调函数,等待的毫秒数)
setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行,平时省略window
let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout ( timer )
JS执行机制
JS是单线程
JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致 JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
同步和异步
为了解决这个问题,利用多核 CPU 的计算能力,HTML5提出 Web Worker 标准,允许JavaScript 脚本创建多个线程。于是, JS 中出现了同步和异步。
同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
异步
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
他们的本质区别:这条流水线上各个流程的执行顺序不同。
同步任务
同步任务都在主线程上执行,形成一个执行栈。
异步任务
JS 的异步是通过回调函数实现的。
一般而言,异步任务有以下三种类型:
1、普通事件,如 click 、 resize 等
2、资源加载,如 load 、 error 等
3、定时器,包括 setinterval 、 setTimeout 等
异步任务相关添加到任务队列中(任务队列也称为消息队列)。
1,3是同步任务,先执行,2是异步任务后执行
1.先执行执行栈中的同步任务。
2.异步任务放入任务队列中。
3.一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
由于主线程不断的重复获取任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop )。
主线程执行完毕,这时异步任务被提交给异步进程处理,例如定时器和点击时间,是根据用户点击时间和定时器时间来确定谁先被插入任务队列的。插入任务队列后,就会被主线程获取并执行,执行完毕继续获取如此循环下去。
location对象
location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分常用属性和方法:
- href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转
- search 属性获取地址中携带的参数,符号?后面部分
console . log ( location . search )
- hash 属性获取地址中的啥希值,符号#后面部分
- reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新
navigator 对象
history对象
history 的数据类型是对象,该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等