Web API 6：BOM

一、BOM对象

• BOM：Browser Object Model（浏览器对象模型）
• BOM对象大致包含五个部分：

window ：浏览器窗口对象（重点）
1、所有全局变量（用var声明的）是 window 对象的属性。
2、所有全局函数（用function声明的）是 window 对象的方法。
3、使用window对象的属性或方法的时候，可以省略window。

navigator：浏览器对象

screen：浏览器所处客户端的显示器屏幕对象

history：浏览器当前窗口的访问历史记录对象 （重点）
属性：length 表示历史记录的条数
方法1：back()：模拟浏览器的后退按钮
方法2：forword()：模拟浏览器的前进按钮
方法3：go()：负值表示向后移动，正值表示向前移动，例如：history.go(2)表示向前移动两页。

location：浏览器当前窗口的地址栏对象（重点）
属性1：hash：设置或返回URL的锚点部分（＃）
属性2：href：设置或返回整个URL
属性3：search：设置或返回URL的查询字符串部分
方法：reload() 重新加载当前文档

二、本地存储

• localStorage：将数据永久存储在本地, 除非手动删除，否则关闭页面也会存在。

存储数据：
localStorage.setItem(key, value)

获取数据：
localStorage.getItem(key)

删除数据：
localStorage.removeItem(key)

• sessionStorage：把数据存储的浏览器中，生命周期为关闭浏览器窗口。

存储数据：
sessionStorage.setItem(key, value)

获取数据：
sessionStorage.getItem(key)

删除数据：
sessionStorage.removeItem(key)

三、map与join

• map方法作用：遍历数组，对数组的元素加工处理。

const arr = ['张三', '李四', '王五']
const newArr = arr.map(function(item){
  return `<li>${item}</li>`
})
console.log(newArr) // ['<li>张三</li>', '<li>李四</li>', '<li>王五</li>']

• join方法作用：将数组元素连接成一个字符串并返回这个字符串

const arr = ['张三', '李四', '王五']
console.log(arr.join()) // '张三,李四,王五'
console.log(arr.join('')) // '张三李四王五'
console.log(arr.join('-')) // '张三-李四-王五'

四、回流与重绘

• 什么是回流与重绘

1、回流：重新布局，几何信息元素（大小、位置）发生改变时就会执行回流。
2、重绘：不改变布局，重新渲染。
3、回流一定会重绘，但是重绘不一定会回流！

• 怎么减少回流与重绘

脱离文档流，改完样式再回归文档流。

五、EventLoop

事件循环：
1、同步任务由 JavaScript 主线程依次来执行 
2、异步任务委托给宿主环境（浏览器）执行 
3、已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行 
4、JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数
5、次序执行 JavaScript 主线程不断重复上面的第 4 步