林芝市网站建设_网站建设公司_在线客服_seo优化

很多同学 DOM 玩得很溜，但一到 BOM 就有点懵。其实日常开发中我们大量用到的功能（跳转页面、获取浏览器信息、倒计时、前进后退、获取 URL 参数……）几乎都来自 BOM。

搞清楚一个最核心的概念：window 到底是谁？

// 这两个写法其实是一样的alert("hi");window.alert("hi");

window 是：

• 浏览器的顶级对象（BOM 的核心）
• JavaScript 的全局对象（所有全局变量、全局函数都是它的属性/方法）
• 所有 BOM 对象（location、navigator、history、screen…）都是它的子对象

一句话总结：
你写的大部分“全局”东西，其实都是在跟 window 打交道。

window 常见事件

// 写法1：推荐（能等所有资源加载完，包括图片）window.onload=function(){console.log("整个页面（包括图片等）都加载完了～");};// 写法2：只等 DOM 结构加载完（图片可能还没加载完，速度更快）window.addEventListener("DOMContentLoaded",function(){console.log("DOM 树构建完毕～");});

现在的项目基本都用框架，window.onload 反而用得少了，但面试还是经常问～

定时器 —— 前端最常用的异步手段之一

详见另一篇文章

JS 执行机制

JavaScript 采用单线程模型，这意味着同一时刻主线程只能执行一个任务。为了处理耗时操作（如网络请求、定时器、DOM 操作等），JavaScript 引入了异步机制，其核心就是事件循环（Event Loop）。

任务分类

JavaScript 中的任务主要分为两类：

• 同步任务
  在主线程上按顺序立即执行的任务，例如变量声明、函数调用、基本的算术运算等。

• 异步任务
  不立即执行、会被推迟处理的任务，主要包括：定时器；DOM 事件回调；网络请求；Promise 的 then/catch/finally 回调等

经典的事件循环执行流程

1. 执行当前宏任务（从主线程执行栈开始）
2. 执行栈清空后，立即清空当前所有微任务（执行微任务队列）
3. 微任务队列清空后，从宏任务队列中取出一个宏任务，回到步骤1
4. 重复上述过程，直到宏任务队列与微任务队列都为空

经典面试题解析

console.log('1');setTimeout(()=>{console.log('2');},0);Promise.resolve().then(()=>console.log('3')).then(()=>console.log('4'));console.log('5');

执行顺序分析：

1. 同步代码执行 → 输出 1、5
2. 遇到 setTimeout，将其回调放入宏任务队列
3. 遇到 Promise.then，将其回调放入微任务队列
4. 前宏任务（全局脚本）结束，清空微任务队列 → 输出 3、4
5. 微任务队列空了，从宏任务队列取任务 → 执行 setTimeout 回调 → 输出 2

最终输出顺序：

15342

理解宏任务与微任务的执行优先级，是掌握现代 JavaScript 异步编程的基础。

location 对象 —— URL 操作与页面导航

location 对象提供了对当前浏览器地址栏信息的完整读写能力，是前端路由跳转、参数解析最常用的 API 之一。

页面跳转与刷新方法

// 方法一：最常用，直接赋值location.href="https://www.example.com";// 方法二：类似 href，但语义更明确location.assign("https://www.example.com");// 方法三：替换当前历史记录，无法后退location.replace("https://www.example.com");// 方法四：刷新当前页面location.reload();// 正常刷新（优先使用缓存）location.reload(true);// 强制从服务器重新加载（相当于 Ctrl+F5）

注意：在现代单页应用（SPA）中，建议优先使用 history.pushState/replaceState 进行无刷新跳转，而非频繁使用 location.href。

history 对象 —— 浏览器历史记录管理

history 对象允许开发者对浏览器前进/后退栈进行读写操作，是实现单页应用路由的核心机制之一。

基础导航方法

history.back();// 等价于浏览器后退按钮history.forward();// 等价于前进按钮history.go(n);// n 可正可负，0 表示刷新当前页

7.2 HTML5 History API（SPA 核心）

// 添加一条新历史记录（修改地址栏但不刷新页面）history.pushState({page:1},"","/page1");// 替换当前历史记录（不增加新条目）history.replaceState({page:2},"","/page2");// 监听历史状态变化（后退、前进触发）window.addEventListener("popstate",(event)=>{console.log("当前状态：",event.state);// 根据 event.state 重新渲染页面});

推荐实践：现代前端框架（Vue Router、React Router）内部几乎全部基于 pushState / replaceState + popstate 事件实现路由管理。

总结

Window 对象作为浏览器环境的全局根对象，统领整个 BOM 体系；通过定时器实现异步调度，依托单线程事件循环模型处理任务；借助 location、history ，完成 URL 操作、运行时环境识别以及历史记录管理的核心功能，成为连接 JavaScript 运行时与浏览器实际能力的关键桥梁。