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比DOM大，包括DOM

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

Window对象的常见事件

窗口加载事件

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

window.onload = function() { } 

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

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

2. 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的异步是通过回调函数实现的， 异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

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

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

js执行机制

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

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      

执行机制示意图：

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）。

location对象

什么是location对象

window对象给我们提供了一个location属性用于获取或设置窗体的url，并且可以用于解析url。
因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

URL

统一资源定位符（Uniform Resource Locator，URL）是互联网上标准资源的地址，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL的一般语法格式：
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=19#link

• protocol：网络协议(http、ftp、mailto等)
• host：主机（即服务器名），例如：本地机的ip是127.0.0.1，或 localhost
• port：端口，65535个，0-1023：由系统使用；1024-65535：用户使用
• path：路径，若文件的位置：users/index.html
• query：参数，以键值对的形式表示，参数之间用‘&’分隔，参数和地址之间用’?'分隔

location对象的属性

location对象的方法

navigator对象

navigator常用属性

navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。

navigator常用方法

javaEnabled( ):指定是否在浏览器中启用java。

history对象

window对象给我们提供了一个history对象，与浏览器历史记录进行交互。
该对象包含用户（在浏览器窗口中）访问过的URL。

history常用属性

history.length：返回历史列表中的网址数

history常用方法

• history对象一般在实际开发中比较少用，但会在一些OA办公系统中见到