JavaScript BOM、事件循环-EW帮帮网

方法/属性	说明	示例
`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 应用场景

页面跳转与刷新：

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

浏览器信息检测：

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

历史记录管理：

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

屏幕适配：

// 根据屏幕宽度调整布局
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）

执行栈（Call Stack）

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

示例：

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

同步任务与异步任务
- 同步任务：立即执行，阻塞后续代码。
- 异步任务：由浏览器/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

执行步骤：

同步代码依次执行，输出 Start 和 End。
setTimeout 回调进入宏任务队列。
Promise.then 回调进入微任务队列。
同步代码执行完毕，执行所有微任务（Promise 1、Promise 2）。
执行下一个宏任务（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），每阶段执行对应宏任务	每个阶段结束后清空微任务队列

六、关键总结

单线程非阻塞：通过事件循环和任务队列实现异步。
任务优先级：微任务 > 宏任务。
避免阻塞：长时间同步代码会阻塞事件循环（如大量计算）。
应用场景：
- 宏任务：延迟任务、I/O 操作。
- 微任务：高优先级回调（如 Promise）。

示例：优化长时间任务

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

JavaScript BOM、事件循环

BOM（浏览器对象模型）

一、`window` 对象

1. 窗口控制