1、什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而于浏览器窗口进行交互的对象。

BOM的核心对象是window

BOM由一系列相关的对象构成，并且每个对象都提供了很多的方法和属性

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

2、BOM的构成

BOM把整个【浏览器】当作一个【对象】来看待

BOM的顶级对象是window

window 对象是浏览器的顶级对象，它具有双重角色

（1）它是JS访问浏览器窗口的一个接口

（2）它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

         在调用的时候可以省略window。

         window的对象方法有很多，如alert()、prompt()

3、window对象的常见事件

3.1、窗口加载事件

window.onload = function() {}

或者   

window.addEventListener ("load"，function(){}) ;

window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像脚本文件、CSS文件等),就调用的处理函数。

注意:

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

2. window.onload传统注册事件方式只能写-次,如果有多个,会以最后-个window.onload为准。

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

DOMContentLoaded 事件触发时，只需等DOM加载完成，不包括样式表、图片、flash等

但存在兼容性问题，需ie9以上才支持

在开发过程中，如果页面图片很多，从用户访问到onload 触发可能需要较长时间，交互效果就不能实现，必然会影响用户体验，此时为了提高用户体验，使用DOMContentLoaded 事件是最好的选择。

3.2调整窗口大小事件

window.onresize = function() {}

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

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

注意：

1.只要窗口大小发生变化，就会触发这个事件

2.用法：经常用于响应式布局

             window.innerWidth  （当前屏幕的宽度）

             window.innerHeight（当前屏幕的高度）

4、定时器

        window对象的定时器有2个

        分别是：setTimeout()  setInterval()

4.1、setTimeout() 定时器

语法：window.setTimeout(调用函数，延迟的毫秒数)；

应用：相当于设置一个闹钟，当闹钟时间到了之后执行调用函数

注意：

1.window可以省略

2.这个函数的调用可以直接写函数，或者写函数名 或者使用字符串 ‘函数名（）’的方式

3.延迟的时间数值默认是0，单位是毫秒

4.当定时器较多时，可以给定时器赋予一个标识符，如下图的time1 与 time2

5.setTimeout() 这个调用函数我们也称为回调函数callback，普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，因此称为回调函数。

三种函数调用方式

4.2、停止setTimeout() 定时器

window.clearTimeout()

注意：

括号里的参数就是定时器的标识符

4.3、setInterval() 定时器 

语法：window.setInterval(回调函数，time)；

应用：用于调用一个函数，每隔一个time，就调用一次回调函数

注意：（用法与setTimeout() 定时器基本相同）

1.window可以省略

2.这个函数的调用可以直接写函数，或者写函数名 或者使用字符串 ‘函数名（）’的方式

3.延迟的时间数值默认是0，单位是毫秒

4.当定时器较多时，可以给定时器赋予一个标识符，如setTimeout() 定时器

4.4、停止setInterval() 定时器

window.clearTimeout()

注意：

括号里的参数就是定时器的标识符

 

5、this

this 指向问题 一般情况下this的最终指向的是那个调用它的对象

1.全局作用域或者普通函数中的this指向全局对象window（注意定时器里面的this指向window）

2.方法调用中谁调用this就指向谁

3.构造函数中的this指向构造函数的实例

6、执行机制

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致一JavaScript 是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元索进行添加和删除操作，不能同时进行。应该先进行添加,之后再删除。

单线程就意味着,所有任务需要排队，前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

7、同步和异步

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

同步

前一个任务结束后再执行后一个任务 ，程序的执行顺序与任务的排列顺序是一致的、 同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了( 10分钟之后) ， 再去切菜、炒菜。

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜、炒菜。

他们的本质区别：这条流水线上各个流程的执行顺序不同。

同步任务

在JS执行过程中，有一个主线程，同步任务都在这个主线程上，排成了一条执行线

异步任务

JS的异步是通过回调函数实现的

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

1、普通事件：如click、resize

2、资源加载：如load

3、定时器：setInterval()、setTimeout()

异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)

注意：

由上两个不同的任务我们可以知道，JS在执行的过程中，先执行执行线中的同步任务，遇到异步任务(回调函数)，便把异步任务放到任务队列中，当同步任务执行完之后，系统便对任务队列中的异步任务读取到执行线上，对异步任务依次执行。

8、location 对象

 location是window对象下的一个属性

以下为location对象的常用属性

 最常用的是：herf和search

8.1、location 对象的方法

window.location.href  （获取或设置整个URL）
window.location.search  （返回参数）
location.assign()   跟herf一样，可以跳转页面（也称为重定向页面）
location.replace() 替换当前页面，因为不记录历史 所以不能后退页面
location.reload()   重新加载页面，强制刷新参数为true 

9、navigator 对象

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

下面前端代码可以判断用户那个终端打开页面,实现跳转

 

10、history对象

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