BOM 浏览器对象模型

BOM 浏览器对象模型

1.BOM 概述

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

Windows对象是浏览器的顶级对象

2.Windows常见的事件

2.1 窗口加载事件

window.onload = function(){}

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

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

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

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

如果图片很多，使用这个事件更好

2.2 调整窗口大小事件

window.onresize = function () { }

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

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

• 只要窗口大小发生变化，就会触发这个事件
• 经常利用这个事件完成响应式布局。windows.innerWidth 当前屏幕的宽度

3.定时器

3.1 两种定时器

• setTimeout()
• setInterval()

3.2 setTimeout() 定时器

window.setTimeout(调用函数, [延迟的毫秒数])

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数

// 1.setTimeout
// 语法规范：window.setTimeout(调用函数, 延时事件);
// 1.window 在调用的时候可以省略
// 2.延迟时间单位是毫秒，但是可以省略默认为0，立即执行
// 3.调用函数可以直接写函数，还可以写函数名, 或者 '函数名()'(不提倡)
// 4.页面中可能有很多的定时器，我们经常给定时器加标识符（名字）
// setTimeout(function () {
//     console.log(12);
// }, 2000);
function callback() {
	console.log('王一博');
}
var time1 = setTimeout(callback, 3000);
var time2 = setTimeout(callback, 5000);
// setTimeout('alback()', 3000);	//不推荐

3.3 停止setTimeout() 定时器

window.clearTimeout(timeoutID)

window 可以省略

3.4 setInterval() 定时器

window.setInterval(调用函数, [延迟的毫秒数])

区别：

1. setTimeout() 延迟时间到了就调用回调函数，只调用一次就结束定时器
2. setInterval() 每隔延迟时间就调用回调函数，会调用很多次，重复调用

4. JS 执行队列

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

4.1 同步和异步

• 为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程

• 于是，JS 中出现了同步和异步。

• 同步：前一个任务结束后再执行后一个任务

• 异步：在做这件事的同时，你还可以去处理其他事情

• 同步任务都在主线程上执行，形成一个 执行栈

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

• 异步任务有以下三种类型

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

• 异步任务相关回调函数添加到任务队列中

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

5. location 对象

location 属性：用于获取或设置窗体的URL，并且可以用于解析URL

5.1 URL

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

组成	说明
protocol	通信协议 常用的http,ftp,maito等
host	主机(域名) www.itheima.com
port	端口号，可选
path	路径 由零或多个'/'符号隔开的字符串
query	参数 以键值对的形式，通过&符号分隔开来
fragment	片段 #后面内容 常见于链接 锚点

5.2 location对象属性

location对象属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机（域名）www.baidu.com
location.port	返回端口号，如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容常见于链接 锚点

5.3 location对象方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面（也称为重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者 f5 ，如果参数为true 强制刷新 ctrl+f5

6. navigation 对象

navigation 对象包含有关浏览器的信息

useAgent属性：可以返回由客户机发送服务器的use-agent头部的值

7. history 对象

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

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能，参数如果是 1 前进1个页面 如果是 -1 后退1个页面