JavaScript 執行環境全解析
本簡報將深入探討 JavaScript 在不同環境中的執行機制，從瀏覽器到後端環境，全面解析其運作原理與開發流程。
JavaScript 的常見執行環境
瀏覽器環境
瀏覽器原生支援 JS 執行，可呼叫瀏覽器的全域函數、變數。
能存取瀏覽器環境內的全域物件（window、document、localStorage等）。
後端環境
主要為 Node.js 或 Deno。
進行開發、套件管理、打包與轉譯、模擬前端以及測試。
瀏覽器環境：解析流程
HTML 文件解析
瀏覽器以 HTML 文件為入口，從上到下讀取，遇到標籤就處理。
腳本載入
瀏覽器以 script 標籤載入 js 腳本。
腳本執行
執行載入的 js 腳本，執行時機依設定而不同。
瀏覽器環境：DOM 與重繪／重排
DOM 建構
瀏覽器解析 HTML 後建構文件物件模型，呈現樹狀結構。
重繪 (Repaint)
當顏色、字體等不影響佈局的屬性改變時，瀏覽器只重新繪製元素。
重排 (Reflow)
當結構、尺寸等影響佈局的屬性改變時，瀏覽器重新計算位置和大小。
瀏覽器環境：事件綁定與互動
使用者操作
點擊、滑鼠移動、鍵盤輸入等使用者互動事件。
生命週期
頁面載入、元素渲染完成等網頁生命週期事件。
事件處理
透過 JavaScript 綁定事件處理函式，實現網頁互動性。
瀏覽器環境：執行上下文
全域上下文
載入 script 時建立，包含全域詞彙環境與全域物件
函式上下文
函式被呼叫時建立，有自己的詞彙環境
執行堆疊
上下文被推入執行堆疊，執行完畢後彈出
瀏覽器環境：主執行緒
呼叫棧維護
JS 在主執行緒上維護一個呼叫棧，所有同步程式碼依序執行。
阻塞風險
耗時的迴圈或函式會阻塞後續程式與畫面更新。
效能影響
大量 DOM 重排、複雜計算可能造成頁面卡頓。
瀏覽器環境：事件循環 (Event Loop)
宏任務隊列
包含 setTimeout、setInterval、DOM 事件、I/O 回呼
微任務隊列
包含 Promise.then、MutationObserver
執行宏任務
從宏任務隊列取出一個任務執行
執行微任務
執行並清空所有微任務，然後重複執行下一個宏任務
瀏覽器環境：Web Worker 系列
1
Web Worker
獨立執行緒，處理計算密集型任務，不阻塞主執行緒。
2
Shared Worker
讓多個分頁／腳本共用同一個 Worker。
3
Service Worker
攔截與快取網路請求，常用於 PWA。
4
Worklet
為特定任務設計的輕量執行環境。
後端環境概述
編寫原始碼
撰寫模組化的 JS 或其他前端語言檔案。
依賴圖解析
分析模組間的相互引用關係。
轉譯
將高階語法轉換為相容性更好的 JavaScript。
打包與最佳化
合併檔案並進行效能優化。
輸出與部署
生成靜態資產並發布到伺服器。
後端環境：編寫原始碼與模組化
模組化方式
- CommonJS：使用 require 和 module.exports
- ES Modules：使用 import 和 export
套件管理
- package.json 管理專案依賴
- node_modules 存放下載的套件
- 套件管理工具：npm、pnpm、yarn
版本控制
- 通常 .gitignore node_modules
- 使用 lock 檔案鎖定版本
後端環境：依賴圖解析與轉譯
入口檔案
從專案的主要入口檔案開始分析
依賴圖譜
建立模組間的相互引用關係圖
轉譯處理
使用 tsc、babel 或 esbuild 轉換為目標語言
開發伺服器
啟動本地伺服器進行開發與熱更新
後端環境：打包與最佳化
Tree Shaking
移除未使用的程式碼，減少最終檔案大小。
Code Splitting
將程式碼分割成多個小檔案，減少載入時間。
Minification
壓縮程式碼，移除空白與註解，縮短變數名稱。
Hashing
為檔案生成唯一 hash，避免瀏覽器快取失效。
後端環境：輸出與部署
靜態資產輸出
打包工具將最佳化後的資產輸出到指定目錄，通常是 dist。
CDN 部署
將靜態資產部署到內容分發網路，提升全球存取速度。
Web 伺服器部署
部署到 Web 伺服器，讓瀏覽器能在真實環境載入最佳化的檔案。