所有文章
2026
以程式碼收集效能指標：PerformanceObserver 與 web-vitals 套件
07-23
以程式碼收集效能指標：Performance API 概覽
07-23
其他效能指標：FCP（首次內容繪製）
07-22
其他效能指標：TTFB（首位元組時間）
07-22
已退役的指標：First Input Delay（FID）
07-21
Core Web Vitals：INP（互動到下一幀繪製）
07-21
如何閱讀火焰圖（Flame Chart）
07-20
CLS 的邊界情況：哪些元素計入、viewport 範圍與 iframe 的處理
07-20
Core Web Vitals：CLS（累積版面位移）
07-19
Core Web Vitals 與 LCP（最大內容繪製）
07-19
傳統指標的局限與 Core Web Vitals 的誕生
07-18
傳統效能指標：DOMContentLoaded 與 Load 事件
07-18
如何閱讀瀑布圖（Waterfall Chart）
07-17
網頁效能為什麼重要：SEO 與線上廣告篇
07-17
網頁效能與使用者體驗：關鍵數字與研究根據
07-16
網頁效能是什麼？課程架構與範例應用總覽
07-16
Vanilla JS 在現代開發中的位置
07-15
用 Proxy 實現雙向資料綁定，以及完成應用程式的最後修正
07-15
完成購物車頁面：CartItem 與 OrderPage 元件，以及元件註冊的關鍵機制
07-14
購物車邏輯與響應式徽章更新：Proxy、陣列不可變性與全域事件
07-14
DetailsPage 元件：複用既有模式與調試 dataset 命名
07-13
ProductItem 元件與事件目標判斷：event.target 與 event.currentTarget
07-13
響應式渲染：監聽 Store 變動並動態產生選單 DOM
07-12
Proxy 與響應式程式設計：讓資料變動驅動 UI 更新
07-12
為 Web Component 載入外部 CSS：Fetch API 與效能優化
07-11
為 Custom Element 啟用 Shadow DOM：樣式封裝的實際效果
07-11
在 Custom Element 中載入 Template：connectedCallback 與 Shadow DOM 的必要性
07-10
建立第一個 Web Component：頁面元件的實作起點
07-10
Web Components 的 CSS 策略與常見問題釐清
07-09
Shadow DOM：Web Components 的樣式封裝機制
07-09
HTML Templates：在 DOM 中定義惰性的 HTML 片段
07-08
Web Components 與 Custom Elements：瀏覽器原生的元件化方式
07-08
完成 Router：動態路由參數、popstate 監聽與瀏覽器歷史導覽
07-07
實作 Router 的頁面渲染邏輯：切換路由與清除容器
07-07
實作客戶端 Router：攔截連結、歷史紀錄與深度連結
07-06
SPA 路由原理：History API 與頁面切換的兩種策略
07-06
建立 Services 層：API、Store 與 ES 模組系統
07-05
addEventListener 選項、移除事件與自訂事件
07-05
DOM 事件綁定：事件種類、命名規則與兩種綁定方式比較
07-04
DOMContentLoaded：初始化應用程式的正確時機
07-04
JavaScript 入口點與 script 載入策略
07-03
在實際專案中操作 DOM：查詢範圍與效能意識
07-03
DOM 與 HTML 原始碼的差異：瀏覽器如何解析與補全結構
07-02
操作 DOM 元素：屬性、樣式、事件與內容
07-02
選取 DOM 元素：方法、回傳型別與操作能力
07-01
DOM 與 DOM API 基礎概念
07-01
Vanilla JS 的優勢與開發者的常見疑慮
06-30
什麼是 Vanilla JavaScript？
06-30
委派導向設計：從父子繼承到平行協作
06-29
OLOO：物件連結物件的設計模式
06-28
原型繼承：`Object.create()` 與跨鏈方法查找
06-28
原型遮蔽（Shadowing）與顯式偽多型
06-27
原型鏈：物件之間的連結機制
06-27
原型系統：連結而非複製
06-27
自動綁定方法的代價：一個不應該存在的 hack
06-26
ES6 `class` 語法：繼承、`super` 與 `this` 綁定的陷阱
06-26
箭頭函式的詞彙 `this`：物件不是 Scope，以及何時該用箭頭函式
06-25
箭頭函式與詞彙 `this`：沒有自己的 `this` 的函式
06-25
預設綁定：`this` 的第四種做法與總覽
06-24
`new` 關鍵字：第三種 `this` 綁定規則
06-24
隱式綁定與明確綁定：`this` 的前兩種規則
06-23
`this` 關鍵字：由呼叫方式決定的動態上下文
06-23
ES6 模組語法：原生模組支援與 Node.js 的相容之路
06-22
模組模式（Module Pattern）：用閉包實現封裝
06-22
閉包關閉的是變數，不是值：迴圈閉包的常見陷阱
06-21
閉包（Closure）：函式記憶自身範疇的能力
06-21
`let` 不提升？這個說法是錯的
06-20
提升（Hoisting）：一個有用但不精確的比喻
06-20
`const`：被高估的宣告關鍵字
06-19
明確的 `let` 區塊：縮短變數的生命週期
06-19
`var` 與 `let` 的語意分工：各自有其適當的位置
06-18
區塊範疇：`let`、`const` 與 `var` 的適當使用場景
06-18
IIFE：立即調用函式表達式
06-17
函式範疇的實際用途：最小暴露原則
06-17
詞彙範疇的視覺化：氣泡模型與編譯期優化
06-16
詞彙範疇：正式定義與動態範疇的對比
06-16
箭頭函式：不是萬能替代品
06-15
為什麼要命名函式表達式：三個不可迴避的理由
06-15
函式宣告 vs 函式表達式：識別字屬於哪個範疇
06-14
巢狀範疇 (Nested Scope)：向外查找的完整鏈
06-14
詞彙範疇的邊界案例：遮蔽缺失與自動全域變數
06-13
執行階段：變數查找與目標/來源位置
06-13
編譯階段與範疇管理：彈珠桶子對話模型
06-12
範疇（Scope）：JavaScript 的兩階段處理模型
06-12
TypeScript 的運算元型別驗證：被低估的功能
06-11
自訂型別與函式參數的型別標註
06-10
TypeScript 與 Flow 的型別推斷與型別標註
06-10
TypeScript 與 Flow：靜態型別工具的優點與侷限
06-09
相等性練習解析：`findAll` 的實作邏輯
06-09
相等性練習：實作受控制的強制相等搜尋函式
06-08
為 `==` 辯護：一個更強的論點
06-08
`==` 的使用準則：何時用、何時不用
06-07
`==` 與 Boolean 的角落案例：永遠不要用 `== true` 或 `== false`
06-07
`==` 演算法逐步走讀：數字與陣列的比較案例
06-06
`==` 演算法逐步解析：偏好數字、遞迴收斂
06-06
強制相等性：`==` 的實際運作與 `null`/`undefined` 的特殊關係
06-05
`==` 與 `===`：兩者的真正差異
06-05
強制轉型練習解析：`isValidName` 與 `hoursAttended`
06-04
強制轉型練習：實作輸入驗證函式
06-04
隱式轉型即抽象：選擇顯式還是隱式的判斷框架
06-03
強制轉型的哲學：擁抱它，而非迴避它
06-03
強制轉型的角落案例：所有問題的根源
06-02
Boxing：原始值存取屬性背後的隱式轉型
06-02
強制轉型的實際案例：你已經在用它了
06-01
`ToBoolean` 抽象操作：falsy 清單與 truthy 的判斷邏輯
06-01
`ToNumber` 抽象操作：數值轉換的規則與陷阱
05-31
`toString` 抽象操作：值的字串化規則與角落案例
05-31
抽象操作與 ToPrimitive：型別轉換的底層機制
05-30
基本物件：JavaScript 的內建建構函式
05-30
`Object.is()` Polyfill 解題解析
05-29
型別檢測練習：實作 `Object.is()` Polyfill
05-29
負零：JavaScript 中被刻意隱藏的特殊值
05-28
NaN：無效數字與正確的檢測方式
05-28
三種「空」：undefined、undeclared 與 uninitialized
05-27
BigInt：JavaScript 的大整數原始型別
05-27
`typeof` 運算子：辨識值的型別
05-26
JavaScript 型別系統：原始型別的正確定義
05-26
Private Static Fields：類別層級的私有共享資料
05-25
Private Instance Fields：真正的封裝
05-25
Public Instance Fields 的執行流程
05-24
`class` 的進階特性：`static` 方法與 Public Instance Fields
05-24
解法三的問題與 `class` 語法糖：解法四
05-23
`new` 關鍵字的完整執行流程
05-23
解法三：`new` 關鍵字與函式的雙重身份
05-22
方法內的巢狀函式與箭頭函式的 `this` 綁定
05-22
`Object.prototype`：原型鏈的頂端
05-21
原型鏈的運作機制與 `this`
05-21
解法二：用原型鏈共享方法，避免記憶體浪費
05-20
工廠函式：解決手動建立物件的第一種方法
05-20
Object Literal、Dot Notation、Object.create：三種建立物件的方式
05-19
物件導向 JavaScript：OOP 的核心目標與原型鏈基礎
05-19
Promise 錯誤處理、AbortSignal 與非同步 JavaScript 總結
05-18
Microtask Queue：Promise 回呼的優先執行機制
05-17
當 Callback Queue 遇上 Promise：執行順序追蹤
05-17
Promise 的運作機制：物件持久性、記憶體參照
05-16
ES6 Promises 與 fetch
05-16
ES5 Callback 模式的侷限，與 ES6 Promises 的登場
05-15
Event Loop：JavaScript 非同步執行的調度核心
05-15
Callback Queue 與執行規則：非同步回呼如何回到 JavaScript
05-14
Callback Function 與 Web Browser APIs 的運作原理
05-14
Promises、Async 與 Event Loop：為什麼 JavaScript 需要非同步機制
05-13
hint 參數、Symbol 本質與元程式設計
05-13
Symbol 與手動控制 ToPrimitive 強制轉換
05-12
ToPrimitive 強制轉換與 `@@toPrimitive` 隱藏屬性
05-12
Date 物件的隱藏屬性 `[[DateValue]]` 與方括號記法動態存取
05-11
JavaScript 記憶體模型：原始型別、Stack 與 Heap、物件參考比較
05-11
JavaScript 型別強制轉換三條路徑：ToNumber、ToString、ToBoolean
05-10
ToBoolean 強制轉換、寬鬆相等與嚴格相等
05-09
加法運算子的例外：型別強制轉換規則與手動控制
05-08
JavaScript 型別強制轉換：運算子、ToNumber 與 DOM 字串
05-07
Closure 的實際應用：once、memoize、Iterator 與 Module Pattern
05-06
Closure：為什麼每次呼叫外層函式都是全新開始
05-05
Closure 獨立性與變數查找順序：同一函式的多個閉包互不干擾
05-04
JavaScript Closure 的真實樣貌：Scope、COVE 與詞彙作用域
05-03
JavaScript Closure 背包機制：私有狀態如何被保留
05-02
JavaScript Closure 與背包（Backpack）的運作機制
05-01
JavaScript Closure 的核心問題：變數存取由定義位置還是呼叫位置決定？
04-30
JavaScript 函式回傳函式：執行環境 (Execution Context) 與 Call Stack 運作解析
04-29
JavaScript Closure（閉包）：原理與核心應用
04-28
JavaScript 陣列變異方法與 ES2023 非變異替代方案（Pure Function、Side Effect）
04-27
箭頭函式（Arrow Function）、匿名函式與 map 方法
04-26
JavaScript 一級函式與高階函式（Higher-Order Function）入門
04-25
以 copyArrayAndManipulate 拆解高階函式 (Higher-Order Function) 的執行原理
04-24
JavaScript 執行上下文與高階函式：從重複程式碼到通用化設計
04-23
JavaScript 的 Higher-Order Functions：從 DRY 到函式作為參數
04-22
Call Stack 是什麼？理解 JavaScript 的呼叫堆疊機制
04-21
JavaScript 執行原理：執行緒、記憶體與執行環境（Execution Context）
04-20
CORS Config 解析：Preflight、Credentials 與 Response Headers
04-17
圖片格式完整比較：JPEG、PNG、WebP、AVIF 的壓縮、透明與色域差異
04-16
CSS Render Layer
02-27
從 HSTS 看網站安全：理解 Strict-Transport-Security Header
02-26
CSS 選擇器：如何只選中第一個 <li> 元素
02-25
理解 Set-Cookie 與 Cookie 的運作機制
02-20
CSS font-display 五種策略（auto/block/swap/fallback/optional）
02-17
XSS／CSRF／Clickjacking／MITM 名詞整理
02-16
HTML rel 屬性：noopener 與 noreferrer 的差異及安全性應用
02-14
理解 JavaScript Promise 方法：all、race、any、allSettled
02-10
理解 JavaScript Generator 函式與 yield 運作原理
01-09
HTML rel 屬性：noopener 與 noreferrer 的差異及安全性應用
01-07
2025
理解 Web Vitals | 提升網站效能與使用者體驗的關鍵指標
12-18
JavaScript WeakMap 與 Map 的差異及實際應用
12-17
CSS 選擇器權重 | Specificity
12-16
JavaScript 事件傳遞機制：Capturing 與 Bubbling 的執行順序
12-15
CSS 動畫的渲染成本（Layout、Paint、Composite）
12-13
JavaScript 垃圾回收機制：理解 Mark and Sweep 演算法與記憶體管理
12-12
HTTP Cache：快取指令與應用
12-11
從輸入網址到頁面載入：PerformanceNavigationTiming
12-10
JavaScript 展開運算子的淺拷貝陷阱：物件參考問題解析
12-09
前端資源預加載：dns-prefetch、preconnect、prefetch、preload
12-08
瀏覽器的呼叫堆疊與事件循環 | Call Stack & Event Loop
12-04
DNS 解析流程 | Resolving Domain Requests
12-04
渲染流程與合成 | Rendering Pipeline & Compositing
12-02
async vs. defer
12-01
bfcache 是什麼？為什麼 unload 會讓頁面失去 bfcache 資格
02-15