BOM概述
window对象
- onload事件
- onresize事件
定时器
- setTimeout()和clearTimeout()
- setInterval()和clearInterval()
JS执行机制

BOM概述

概念

BOM：浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window。

DOM和BOM的区别

DOM：文档对象模型，一个文档就是一个DOM树。html是树的根，标签、标签的属性、标签里的文本都是书的节点。核心对象是document。
BOM：浏览器对象模型。可以独立于内容和浏览器进行交互。核心对象是window。

BOM构成

在这里插入图片描述

补充

var声名的全局变量可以作为window的属性挂载在window上。
let生命的全局变量不可以作为window的属性挂载在window上。
举例：

	var boyAge=23;
    let girlAge=45;
    console.log(window.boyAge)
    console.log(window.girlAge)

在这里插入图片描述

window对象

onload事件

onload: 是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会触发该事件，调用该事件对应的事件处理函数。

window.onload=function(){
            alert('页面加载事件')
        }

或者

window.addEventListener('load',function(){
            alert('页面加载事件')
        })

onresize事件

onresize: 当调整window窗口大小的时候，就触发window.onresize事件，调用事件处理函数。

window.onresize=function(){
            alert('窗口大小发生了改变')
        }

或者

window.addEventListener('resize',function(){
            alert('窗口大小发生了改变')
        })

定时器

setTimeout()和clearTimeout()

setTimeout():在指定的毫秒数后调用函数或执行一段代码。

var test=function(){
            console.log('hello')
        }
window.setTimeout(test,5000)//等5秒再执行，只执行一次

在这里插入图片描述

clearTimeout()：停止setTimeout定时器

var test=function(){
            console.log('hello')
        }
window.setTimeout(test,5000) 
clearTimeout(test)//停止setTimeout定时器

在这里插入图片描述

setInterval()和clearInterval()

setInterval():按照指定的周期（以毫秒计）来调用函数或执行一段代码。

 var test=function(){
            console.log('hello')
        }
window.setInterval(test,2000)//每两秒执行一次，重复调用函数

在这里插入图片描述

clearInterval():取消setInterval定时器。

window.clearInterval(test)

JS执行机制

概述

JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
为了解决这个问题,利用多核CPU的计算能力, HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步。

同步任务和异步任务

同步任务：
同步任务都在主线程上执行,形成一个执行栈。
异步任务： JS的异步是通过回调函数实现的，异步任务在任务队列里面，一般而言，异步任务有以下三种类型：
- 普通事件,如click.resize等
- 资源加载,如load. error 等
- 定时器,包括setInterval. setTimeout 等

		console.log(1)//同步
        setTimeout(function(){
            console.log(2)//异步
        }，0        
        console.log(3)//同步

具体执行过程

先执行执行栈中的同步任务
异步任务放在任务队列里面
执行栈中的所有同步任务执行完毕，系统会按照次序读取任务队列中的异步任务。

栈：先进后出；队列：先进先出。
举例：

	console.log(1)//同步任务
    setTimeout(function(){
        console.log(2)//异步任务
    },0)
    console.log(3)//同步任务

结果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/af550894c34b4bf48d700f5b4e369173.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55Sc55Sc6YW355uW,size_20,color_FFFFFF,t_70,g_se,x_16

		console.log(1)
		//队列中时间相同，先进队列的先出
        setTimeout(function(){
            console.log(2)
        },2000)
        setTimeout(function(){
            console.log(3)
        },2000)
        
        console.log(4)

在这里插入图片描述

 		console.log(1)
 		//队列中时间不同，先到时间的先出
        setTimeout(function(){
            console.log(2)
        },3000)
        setTimeout(function(){
            console.log(3)
        },2000)
        console.log(4)