程式碼之外，還有生活的藝術 前端工程師 / 攝影 / 生活紀錄

• 文章50
• 標籤34

標籤查看更多

• #frontendMasters
• #JavaScript
• #advancedWebDevelopmentQuiz
• #HTML
• #javaScriptTheHardPartsV3
• #CSS
• #Performance
• #ExecutionContext
• #HigherOrderFunction

分類查看更多

• Advanced Web Dev Quiz (27)
  • CORS Config 解析：Preflight、Credentials 與 Response Headers
  • 圖片格式完整比較：JPEG、PNG、WebP、AVIF 的壓縮、透明與色域差異
  • CSS Render Layer
  • 從 HSTS 看網站安全：理解 Strict-Transport-Security Header
  • CSS 選擇器：如何只選中第一個 <li> 元素
  • 理解 Set-Cookie 與 Cookie 的運作機制
  • CSS font-display 五種策略（auto/block/swap/fallback/optional）
  • XSS／CSRF／Clickjacking／MITM 名詞整理
  • HTML rel 屬性：noopener 與 noreferrer 的差異及安全性應用
  • 理解 JavaScript Promise 方法：all、race、any、allSettled
  • 理解 JavaScript Generator 函式與 yield 運作原理
  • HTML rel 屬性：noopener 與 noreferrer 的差異及安全性應用
  • 理解 Web Vitals | 提升網站效能與使用者體驗的關鍵指標
  • JavaScript WeakMap 與 Map 的差異及實際應用
  • CSS 選擇器權重 | Specificity
  • JavaScript 事件傳遞機制：Capturing 與 Bubbling 的執行順序
  • CSS 動畫的渲染成本（Layout、Paint、Composite）
  • JavaScript 垃圾回收機制：理解 Mark and Sweep 演算法與記憶體管理
  • HTTP Cache：快取指令與應用
  • 從輸入網址到頁面載入：PerformanceNavigationTiming
  • JavaScript 展開運算子的淺拷貝陷阱：物件參考問題解析
  • 前端資源預加載：dns-prefetch、preconnect、prefetch、preload
  • 瀏覽器的呼叫堆疊與事件循環 | Call Stack & Event Loop
  • DNS 解析流程 | Resolving Domain Requests
  • 渲染流程與合成 | Rendering Pipeline & Compositing
  • async vs. defer
  • bfcache 是什麼？為什麼 unload 會讓頁面失去 bfcache 資格
• JavaScript Hard Parts v3 (11)
  • JavaScript Closure 的核心問題：變數存取由定義位置還是呼叫位置決定？
  • JavaScript 函式回傳函式：執行環境 (Execution Context) 與 Call Stack 運作解析
  • JavaScript Closure（閉包）：原理與核心應用
  • JavaScript 陣列變異方法與 ES2023 非變異替代方案（Pure Function、Side Effect）
  • 箭頭函式（Arrow Function）、匿名函式與 map 方法
  • JavaScript 一級函式與高階函式（Higher-Order Function）入門
  • 以 copyArrayAndManipulate 拆解高階函式 (Higher-Order Function) 的執行原理
  • JavaScript 執行上下文與高階函式：從重複程式碼到通用化設計
  • JavaScript 的 Higher-Order Functions：從 DRY 到函式作為參數
  • Call Stack 是什麼？理解 JavaScript 的呼叫堆疊機制
  • JavaScript 執行原理：執行緒、記憶體與執行環境（Execution Context）
• 學習經歷 (2)
  • 我該早點學的前端技術|不學無術也該有個限度
  • 線下不能群聚? 那線上總可以吧! 200人六角線上前端切版直播課程
• 生活亂談 (2)
  • Hi 👋 我是許文修 歡迎來到我的部落格
  • 《1917》最佳影片與導演獎熱門首選 | 電影雜談
• 程式筆記 (8)
  • 聰明的處理前端表單 | FormData API | handling-form-without-any-dependencies
  • Teachable 的 Sidebar 你的時辰到了 | Tampermonkey Userscript
  • 幹嘛不自己上網查就好的 JavaScript 世界時鐘 | JS地下城 - 004
  • 不負責任的 JavaScript 計算機 | JS地下城 - 003
  • gulp-gh-pages deploy 失敗QQ | 程式筆記 - 001
  • 俄羅斯方塊謎題 | JS地下城 - 番外篇 - 001
  • CSS、JS切個時鐘吧 | JS地下城 - 002
  • 用 JavaScript 切出九九乘法表 | JS地下城 - 001

最新文章

混合 Dev 和 Life 的所有最新內容

50 篇

2026-04-218 分鐘閱讀

Call Stack 是什麼？理解 JavaScript 的呼叫堆疊機制

介紹 JavaScript Call Stack（呼叫堆疊）的運作原理，包含 Global Execution Context 的建立、函式呼叫與 return 時堆疊的變化，以及與 Thread of Execution、Memory 的關係。

JavaScript Hard Parts v3

#JavaScript #CallStack #frontendMasters #javaScriptTheHardPartsV3

2026-04-2010 分鐘閱讀

JavaScript 執行原理：執行緒、記憶體與執行環境（Execution Context）

深入解析 JavaScript 執行時的兩個核心機制：執行緒（Thread of Execution）與記憶體（Memory）。透過程式碼範例，說明全域與函式執行環境的運作方式、parameter 與 argument 的差異，以及區域記憶體的生命週期。

JavaScript Hard Parts v3

#javaScriptTheHardPartsV3 #frontendMasters #JavaScript #ExecutionContext

2026-04-1712 分鐘閱讀

CORS Config 解析：Preflight、Credentials 與 Response Headers

解析一道 CORS 設定題，涵蓋 Same-Origin Policy、Simple Request 與 Preflighted Request 的判斷條件，以及各 CORS Response Header 的作用與限制。

Advanced Web Dev Quiz

#advancedWebDevelopmentQuiz #frontendMasters #CORS #HTTP

2026-04-1612 分鐘閱讀

圖片格式完整比較：JPEG、PNG、WebP、AVIF 的壓縮、透明與色域差異

比較 JPEG、PNG、WebP、AVIF 四種圖片格式的壓縮方式、透明支援與色域能力，涵蓋有損／無損壓縮、Progressive Rendering、HDR、WCG 等特性，釐清各格式的適用場景與限制。

Advanced Web Dev Quiz

#frontendMasters #advancedWebDevelopmentQuiz #WebP #AVIF #Performance

2026-02-276 分鐘閱讀

CSS Render Layer

說明瀏覽器在繪製畫面時 Render Layer 的概念，何種 CSS 屬性會導致元素被「提升」為自己的 Render Layer，以及這樣做對效能的影響與應用場景。

Advanced Web Dev Quiz

#frontendMasters #CSS #Performance

2026-02-266 分鐘閱讀

從 HSTS 看網站安全：理解 Strict-Transport-Security Header

本文介紹 HTTP 安全性標頭 Strict-Transport-Security (HSTS) 的作用與設定方式，說明它如何強制使用 HTTPS 連線並保護網站免於中間人攻擊

Advanced Web Dev Quiz

#Security #HTTP #frontendMasters #advancedWebDevelopmentQuiz

2026-02-255 分鐘閱讀

CSS 選擇器：如何只選中第一個 <li> 元素

如何使用 CSS 的各種 (pseudo) 選擇器，例如 first-child、first-of-type、> 與 +，並透過程式範例解析如何正確鎖定網頁結構中的第一個

元素

Advanced Web Dev Quiz

#CSS #frontendMasters #advancedWebDevelopmentQuiz

2026-02-209 分鐘閱讀

理解 Set-Cookie 與 Cookie 的運作機制

介紹 HTTP Header 中的 Set-Cookie 如何影響瀏覽器與伺服器間的資訊傳遞，說明 Cookie 的生命週期、Domain 與 Path 的作用，以及 Secure、HttpOnly、SameSite 等屬性的安全意涵

Advanced Web Dev Quiz

#Security #Cookie #HTTP #frontendMasters #advancedWebDevelopmentQuiz

2026-02-179 分鐘閱讀

CSS font-display 五種策略（auto/block/swap/fallback/optional）

整理 @font-face 的 font-display 五種值，說明 FOIT/FOUT、swap period 差異

Advanced Web Dev Quiz

#CSS #Performance #frontendMasters #advancedWebDevelopmentQuiz

2026-02-168 分鐘閱讀

XSS／CSRF／Clickjacking／MITM 名詞整理

XSS、CSRF、UI Redressing（Clickjacking）、MITM 的定義、常見攻擊手法與防範方式

Advanced Web Dev Quiz

#Security #frontendMasters #advancedWebDevelopmentQuiz

12345

MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog