JavaScript中BOM简介及其对象js执行机制

Posted 2021-07-12 遥岑.

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript中BOM简介及其对象js执行机制相关的知识，希望对你有一定的参考价值。

BOM简介

什么是BOM

BOM（Browser Object Model）：浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。
BOM缺乏标准，javascript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

DOM和BOM的区别

DOM：

文档对象模型
DOM就是把文档当作一个对象来看待
DOM的顶级对象是document
DOM主要是操作页面元素
DOM是W3C标准规范

BOM：

浏览器对象模型
把浏览器当作一个对象看待
BOM的顶级对象是window
BOM主要是浏览器窗口交互的一些对象
BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

BOM的构成

BOM构成

BOM比DOM大，包括DOM

window对象是浏览器的顶级对象，一方面，它是js访问浏览器窗口的一个接口；另一方面，它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用时可以省略window。

Window对象的常见事件

窗口加载事件

window.onload事件：是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会触发该事件。

window.onload = function() { } 

window.addEventListener('load',function() { })

有了window.onload就可以把js代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数

document.DOMContentLoaded加载事件，会在DOM加载完成时触发，这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载。

document.addEventListener('DOMContentLoaded',fuction() { })

如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适

le9以上才支持

调整窗口大小事件

window.onresize：当浏览器窗口大小发生改变时触发该事件。

window.onresize = function() { }

window.addEventListener('resize',function() { })

只要窗口大小发生像素变化，就会触发这个事件
我们经常利用这个事件完成响应式布局

定时器函数

window对象为我们提供了两个非常友好的方法：setTimeout、setInterval。

定时器函数

setTimeout( )定时器

setTimeout：在给定的时间（以毫秒为单位）之后，执行函数，返回值是一个定时器对象。

window.setTimeout(function() { },时间)

window可以省略
延迟的毫秒数省略默认为0，如果写必须是毫秒
因为定时器可能有很多，我们经常给定时器赋值一个标识符
setTimeout( )这个调用函数也称为回调函数callback

停止setTimeout( )定时器

clearTimeout：清除setTimeout定时器对象。

window.clearTimeout(定时器对象)

setInterval( )定时器

setInterval方法重复调用一个函数，每隔这个时间，就会调用一次回调函数。

window.setInterval(function() {},时间)

以毫秒为单位

停止setInterval( )定时器

clearInterval方法取消了先前通过调用setInterval( )建立的定时器。

window.clearInterval(定时器对象)

js执行机制

js是单线程

JavaScript的一个特点是单线程，也就是说，同一个时间只能做一件事。
这是因为JavaScript这门脚本语言诞生的使命所致，JavaScript是为处理页面中用户的交互以及操作DOM而诞生的。
单线程也就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。
这样导致的问题是，如果js执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

进程：程序的一次动态运行，有独立的内存空间
线程：是进程的运行单位，一个进程可以分为若干个线程

同步和异步

为了解决这个问题，利用多核CPU的计算能力，html5提出Web Worker标准，允许JavaScript脚本创建多个线程。
于是，js中出现了同步和异步。

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步：在做一件事情的同时去做其他的事情。
区别：执行顺序不同。

同步任务和异步任务

同步任务：同步任务都在主线程上执行，形成一个执行栈。
异步任务：js的异步是通过回调函数实现的，异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

一般而言，异步任务有以下三种类型：

普通事件，如click，resize等
资源加载，如load，error等
定时器，包括setInterval、setTimeout等

js执行机制

先执行执行栈中的同步任务
异步任务（回调函数）放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

在这里插入图片描述

console.log(1)

document.onclick = function() {
    console.log('click')
}

console.log(2)

setTimeout(function() {
     console.log(3)
},3000)

//执行结果：1 2 3 click 或 1 2 click 3