BOM

bom 是用 js 开发 web 应用程序的核心。bom 提供了与网页无关的浏览器功能对象。bom 的发展十分有趣，一开始也是各大浏览器厂商各自为战。最终，将各自共同的部分设立为标准，提供了浏览器间互操作的基础。h5 规范中有一部分包含了 bom 的主要内容。
bom 的核心是 window 对象。通过 window 对象可以控制窗口，以及一些弹窗。window 对象还挂载了 location / navigator / history 对象属性。location 对象可以获取网页信息，navigator 对象包含了浏览器、操作系统、硬件等信息，history 对象包含了浏览历史记录。

window 对象

window 对象表示浏览器的实例。有两个作用，第一是全局对象，第二是 js 控制窗口的接口。所有在网页中定义的变量、函数都以 window作为全局对象，都可以访问全局对象上定义的属性。 通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。 使用 let 或 const 替代 var，则不会把变量添加给全局对象。

控制窗口
描述窗口关系的对象有 top / parent / self。top 对象始终指向被浏览器直接包含的页面对象，即浏览器窗口本身。parent 对象指向当前窗口的父窗口。self 对象始终指向 window。

窗口的位置可以通过 screenLeft / screenTop 属性确定，单位是 css 像素。moveTo / moveBy 可以移动窗口，moveTo 接受绝对坐标，moveBy 接受相对位置移动的像素数。

css 像素的背后其实是一个角度《红宝书》 - 图1。 如果屏 幕距离人眼是一臂长，则以这个角度计算的 CSS 像素大小约为 1/96 英寸， 这样定义像素大小是为了在 不同设备上统一标准。 不同像素密度的屏幕下就会有不同的 缩放系数，以便把物理像素（屏幕实际的分辨率）转换为 CSS 像素（浏览器报告的虚拟分辨率）。这个物理像素与 CSS 像素之间的转换比率由 window.devicePixelRatio 属性提供。 window.devicePixelRatio 实际上与每英寸像素数（DPI，dots per inch）是对应的。DPI 表示单位像素密度。

确定窗口大小是不容易的，现代浏览器支持4个属性，innerWidth / innerHeight / outerWidth / outerHeight。outer 返回浏览器窗口自身的大小，inner 返回窗口内页面视口的大小。
document.documentElement.clientWidth、document.documentElement.clientHeight 返回页面视口的宽度和高度。页面视口又叫布局视口，pc 端上等于浏览器窗口的宽度。移动端上。。。还有可视窗口。
这部分还挺复杂。https://juejin.cn/post/6844903845617729549#heading-14。

可视窗口和布局视口是不一样的。浏览器的窗口可以缩放，有时候不一定能显示整个页面，在移动端更是如此。这时候就可以通过滚动条查看没有显示出来的页面。度量文档相对于视口滚动距离的属性有 window.pageXoffset / window.scrollX / window.pageYoffset / window.scrollY。可以使用 scroll() / scrollTo() / scrollBy() 滚动页面，这3个方法都接受相对距离的 x、y 坐标，也可以接受对象，提供偏移值、behavior 属性（是否平滑滚动）。