BOM（浏览器对象模型）详细学习清单与说明

① window 对象

• 全局对象：JS 中的全局变量、函数都属于 window。

• 常用方法：

  • alert()：弹框提示
  • confirm()：确认框，返回布尔
  • prompt()：输入框，返回用户输入

• 窗口控制：

  • window.open()：打开新窗口
  • window.close()：关闭窗口

• 定时器：

  • setTimeout(fn, ms)：延迟执行
  • setInterval(fn, ms)：周期执行
  • clearTimeout()、clearInterval()：清除

• 窗口尺寸：

  • window.innerWidth / innerHeight：视口大小
  • window.outerWidth / outerHeight：浏览器窗口大小

• 事件监听：

  • addEventListener() / removeEventListener()

• 焦点控制：

  • window.focus()、window.blur()

---

② location 对象

• 属性：

  • location.href：完整 URL
  • location.protocol：协议（如 http/https）
  • location.hostname：域名
  • location.port：端口
  • location.pathname：路径
  • location.search：?后参数
  • location.hash：#后的锚点

• 方法：

  • location.assign(url)：跳转，记录历史
  • location.replace(url)：跳转，不记录历史
  • location.reload()：刷新页面

---

③ navigator 对象

• 获取浏览器、设备信息

• 常用属性：

  • navigator.userAgent：浏览器标识
  • navigator.platform：平台信息（如 Win32）
  • navigator.language：浏览器语言
  • navigator.onLine：是否联网

• 检测 API 支持：

  • 比如：navigator.geolocation（是否支持地理位置）

---

④ screen 对象

• 获取屏幕相关信息：

  • screen.width / screen.height：物理分辨率
  • screen.availWidth / availHeight：除去任务栏后的宽高
  • screen.colorDepth：颜色深度
• 常用于屏幕适配和监控

---

⑤ history 对象

• 浏览器历史栈操作：

  • history.back()：后退
  • history.forward()：前进
  • history.go(n)：跳转到历史记录的某一项，n 是相对位置
  • history.length：历史长度

• HTML5 新增：

  • history.pushState()、history.replaceState()：前端路由常用

---

⑥ BOM 相关事件

• 窗口变化

  • resize：窗口大小变化

• 页面滚动

  • scroll：页面滚动监听

• 页面关闭或刷新

  • beforeunload：刷新或关闭提示
  • unload：页面卸载，已不推荐

• 焦点事件

  • focus / blur：页面聚焦、失焦

---

⑦ 性能与存储

• Storage

  • localStorage：本地永久存储，容量大（5MB+）
  • sessionStorage：会话级存储，窗口/标签页关闭即清除

• Cookie

  • 存储小（4KB），需手动设置过期时间

• 性能监控

  • window.performance：

  • performance.timing：页面加载详细时间

  • performance.now()：高精度时间戳

---

⑧ 兼容性与 Polyfill

• 判断 window 或 navigator 的存在与属性
• 针对不支持的浏览器写 polyfill（补丁）
• 借助库：如 core-js、babel polyfill

---

✅ 总结

模块	用途
window	全局、弹窗、定时器
location	地址栏信息与跳转
navigator	浏览器、设备信息
screen	屏幕尺寸、颜色深度
history	浏览记录操作
事件	resize、scroll、beforeunload
存储与性能	localStorage、cookie、performance
兼容性	跨浏览器统一 API 调用