JavaScript BOM、事件循环

目录

BOM（浏览器对象模型）

一、window 对象

1. 窗口控制

2. 定时器

二、location 对象

三、navigator 对象

四、history 对象

五、screen 对象

六、本地存储

1. localStorage

2. sessionStorage

七、BOM 应用场景

八、总结

JavaScript 执行机制与事件循环

一、JavaScript 执行上下文（Execution Context）

二、事件循环（Event Loop）机制

三、代码执行顺序示例

四、异步操作分类

1. 宏任务（Macrotasks）

2. 微任务（Microtasks）

五、Node.js 与浏览器的事件循环差异

六、关键总结

---

BOM（浏览器对象模型）

BOM（Browser Object Model）是浏览器提供的用于与浏览器窗口及环境交互的对象模型。与 DOM（文档对象模型）不同，BOM 的核心对象是 window，它允许开发者控制浏览器的行为（如导航、历史记录、屏幕信息等）。

---

一、window 对象

window 是 BOM 的顶层对象，代表浏览器窗口，也是 JavaScript 的全局对象。

1. 窗口控制

方法/属性	说明	示例
window.innerWidth	视口宽度（不包含滚动条）	console.log(window.innerWidth)
window.innerHeight	视口高度（不包含滚动条）	console.log(window.innerHeight)
window.open(url, name)	打开新窗口	window.open('https://example.com')
window.close()	关闭当前窗口（需用户操作触发）	window.close()
window.resizeTo(w, h)	调整窗口大小	window.resizeTo(800, 600)

2. 定时器

方法	说明	示例
setTimeout(func, delay)	延迟执行函数	setTimeout(() => alert('Hi'), 1000)
setInterval(func, delay)	周期性执行函数	setInterval(updateClock, 1000)
clearTimeout(id)	清除延迟任务	clearTimeout(timerId)
clearInterval(id)	清除周期任务	clearInterval(intervalId)

---

二、location 对象

location 包含当前页面的 URL 信息，并允许操作导航。

1. 常用属性

属性	说明	示例值
location.href	完整 URL	"https://example.com/path?q=1"
location.protocol	协议（http:、https:）	"https:"
location.host	主机名和端口	"example.com:8080"
location.pathname	URL 路径	"/path"
location.search	查询参数（? 后的内容）	"?q=1"
location.hash	哈希值（# 后的内容）	"#section"

2. 常用方法

方法	说明	示例
location.assign(url)	加载新页面	location.assign('new-page.html')
location.reload()	重新加载当前页面	location.reload(true)（强制刷新）
location.replace(url)	替换当前页面（无历史记录）	location.replace('login.html')

---

三、navigator 对象

navigator 提供浏览器和操作系统的信息。

属性/方法	说明	示例
navigator.userAgent	浏览器用户代理字符串	"Mozilla/5.0 (Windows NT 10.0; Win64; x64) ..."
navigator.platform	操作系统平台	"Win32"、"MacIntel"
navigator.language	浏览器首选语言	"zh-CN"
navigator.geolocation	地理位置 API（需用户授权）	navigator.geolocation.getCurrentPosition(...)
navigator.clipboard	剪贴板操作（读写文本/图片）	navigator.clipboard.writeText('Hello')

---

四、history 对象

history 用于操作浏览器会话历史记录。

方法/属性	说明	示例
history.length	历史记录条目数	console.log(history.length)
history.back()	返回上一页（等同用户点击后退）	history.back()
history.forward()	前进到下一页	history.forward()
history.go(n)	跳转到历史记录中的第 n 页	history.go(-2)（后退两页）
history.pushState()	添加历史记录（不刷新页面）	history.pushState({}, '', '/new')
history.replaceState()	替换当前历史记录（不刷新页面）	history.replaceState({}, '', '/updated')

---

五、screen 对象

screen 提供用户屏幕的信息。

属性	说明	示例
screen.width	屏幕宽度（像素）	1920
screen.height	屏幕高度（像素）	1080
screen.availWidth	可用宽度（排除任务栏等）	1900
screen.availHeight	可用高度	1040
screen.colorDepth	颜色深度（位）	24

---

六、本地存储

浏览器提供的本地存储 API（属于 BOM 的一部分）。

1. localStorage

• 持久化存储：数据长期保留（除非手动清除）。

• 作用域：同源窗口共享。

• 方法：

  localStorage.setItem('key', 'value'); // 存储数据
  const value = localStorage.getItem('key'); // 读取数据
  localStorage.removeItem('key'); // 删除数据
  localStorage.clear(); // 清空所有数据

2. sessionStorage

• 会话级存储：数据在标签页关闭后清除。

• 作用域：仅当前标签页有效。

• 方法：同 localStorage。

---

七、BOM 应用场景

1. 页面跳转与刷新：

   // 跳转到新页面
   location.href = 'https://example.com';
   // 刷新当前页面
   location.reload();

2. 浏览器信息检测：

   // 判断是否为移动端
   const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);

3. 历史记录管理：

   // 单页应用（SPA）路由控制
   history.pushState({ page: 1 }, 'Page 1', '/page1');

4. 屏幕适配：

   // 根据屏幕宽度调整布局
   if (window.innerWidth < 768) {
     document.body.classList.add('mobile-mode');
   }

---

八、总结

对象	核心功能	典型用途
window	窗口控制、定时器、全局对象	调整窗口大小、定时任务
location	URL 操作与页面导航	页面跳转、获取 URL 参数
navigator	浏览器/设备信息	设备检测、地理位置获取
history	历史记录管理	单页应用路由控制
screen	屏幕信息获取	响应式布局适配
localStorage	本地持久化存储	用户偏好设置、缓存数据

---

  

---

JavaScript 执行机制与事件循环

JavaScript 是单线程语言，但其通过 事件循环（Event Loop） 和 任务队列（Task Queue） 实现了非阻塞异步执行。

---

一、JavaScript 执行上下文（Execution Context）

1. 执行栈（Call Stack）

   • 作用：存储函数调用信息（先进后出）。

   • 示例：

     function a() { b(); }
     function b() { console.log('Hello'); }
     a(); // 执行栈顺序：a → b → console.log

2. 同步任务与异步任务

   • 同步任务：立即执行，阻塞后续代码。

   • 异步任务：由浏览器/Node.js 的 Web API 处理（如 setTimeout、fetch），完成后回调推入任务队列。

---

二、事件循环（Event Loop）机制

1. 事件循环流程

• 步骤：

  1. 执行同步代码，填充执行栈。

  2. 遇到异步任务，交给 Web API 处理。

  3. 执行栈清空后，事件循环检查任务队列。

  4. 将队列中的回调推入执行栈执行。

  5. 重复循环。

• 可视化流程：

  同步代码 → 执行栈 → Web API → 任务队列 → 事件循环 → 执行栈

2. 任务队列类型

队列类型	任务类型	优先级
微任务队列（Microtask Queue）	Promise.then、MutationObserver、queueMicrotask	高
宏任务队列（Macrotask Queue）	setTimeout、setInterval、I/O、UI 渲染	低

• 执行顺序：

  1. 执行栈清空后，先清空所有微任务。

  2. 执行一个宏任务。

  3. 重复上述过程。

---

三、代码执行顺序示例

console.log('Start');

setTimeout(() => console.log('Timeout'), 0);

Promise.resolve()
  .then(() => console.log('Promise 1'))
  .then(() => console.log('Promise 2'));

console.log('End');

输出顺序：

Start → End → Promise 1 → Promise 2 → Timeout

执行步骤：

1. 同步代码依次执行，输出 Start 和 End。

2. setTimeout 回调进入宏任务队列。

3. Promise.then 回调进入微任务队列。

4. 同步代码执行完毕，执行所有微任务（Promise 1、Promise 2）。

5. 执行下一个宏任务（Timeout）。

---

四、异步操作分类

1. 宏任务（Macrotasks）

• 常见类型：

  • setTimeout / setInterval

  • I/O 操作（文件读写、网络请求）

  • UI 渲染（浏览器）

  • requestAnimationFrame（浏览器）

• 特点：每次事件循环处理一个宏任务。

2. 微任务（Microtasks）

• 常见类型：

  • Promise.then / catch / finally

  • MutationObserver（浏览器）

  • queueMicrotask

• 特点：在当前宏任务结束后、下一个宏任务开始前执行所有微任务。

---

五、Node.js 与浏览器的事件循环差异

环境	事件循环阶段	微任务执行时机
浏览器	简化模型：宏任务 → 微任务 → 渲染 → 宏任务...	每个宏任务后清空微任务队列
Node.js	分阶段（Timers → Pending → Idle/Prepare → Poll → Check → Close），每阶段执行对应宏任务	每个阶段结束后清空微任务队列

---

六、关键总结

1. 单线程非阻塞：通过事件循环和任务队列实现异步。

2. 任务优先级：微任务 > 宏任务。

3. 避免阻塞：长时间同步代码会阻塞事件循环（如大量计算）。

4. 应用场景：

   • 宏任务：延迟任务、I/O 操作。

   • 微任务：高优先级回调（如 Promise）。

示例：优化长时间任务

// 将耗时任务拆分为多个微任务
function processChunk(data) {
  queueMicrotask(() => {
    // 处理数据块
    if (data.length > 0) {
      processChunk(data.slice(100));
    }
  });
}
processChunk(largeData);

---