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 應用場景

頁面跳轉與刷新：

// 跳轉到新頁面
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);