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

• 文章28
• 標籤23

標籤查看更多

• #程式筆記
• #frontendMaster
• #advancedWebDevelopmentQuiz
• #javascript
• #html
• #css
• #javaScript
• #JS地下城
• #performance

分類查看更多

• 學習經歷 (2)
  • 我該早點學的前端技術|不學無術也該有個限度
  • 線下不能群聚? 那線上總可以吧! 200人六角線上前端切版直播課程
• 生活亂談 (2)
  • Hi 👋 我是許文修 歡迎來到我的部落格
  • 《1917》最佳影片與導演獎熱門首選 | 電影雜談
• 程式筆記 (24)
  • 理解 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
  • 聰明的處理前端表單 | 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

2025-05-093 分鐘閱讀

Hi 👋 我是許文修 歡迎來到我的部落格

這裡主要寫一些網頁前端相關的文章，主要是為了作為個人的紀錄留存用，「可能」會偶爾寫電影、音樂、遊戲類的文章，反正就是寫好玩的。有任何問題歡迎聯絡我!

生活亂談

#關於

2026-01-0916 分鐘閱讀

理解 JavaScript Generator 函式與 yield 運作原理

探討 JavaScript Generator 函式的運作原理與應用。透過實際範例解析 Generator 的基本語法、yield 關鍵字的使用、以及如何搭配 try-catch-finally 進行錯誤處理。文章從一個實務問題出發，詳細說明 Generator 如何透過 next() 方法控制執行流程，並介紹其在 ID 生成器等實際場景的應用。

程式筆記

#程式筆記 #generator #javaScript #frontendMaster

2026-01-079 分鐘閱讀

HTML rel 屬性：noopener 與 noreferrer 的差異及安全性應用

說明 HTML a 標籤 rel 屬性的各種值，重點探討 noopener 和 noreferrer 在防止 tabnabbing 攻擊和保護用戶隱私中的作用，並說明 Referrer-Policy 預設值的變更及其安全含義。

程式筆記

#程式筆記 #security #frontendMaster

2025-12-1814 分鐘閱讀

理解 Web Vitals | 提升網站效能與使用者體驗的關鍵指標

本篇文章介紹 Google 提出的 Web Vitals 指標，解釋各個效能衡量方式（TTFB、FID、TTI、TBT、CLS、INP）的意義與差異，幫助前端開發者提升網站的互動性、穩定性與載入速度，並理解它們對 SEO 的影響

程式筆記

#程式筆記 #performance

2025-12-1711 分鐘閱讀

JavaScript WeakMap 與 Map 的差異及實際應用

探討 JavaScript WeakMap 的特性與使用場景，包含與 Map 的關鍵差異、垃圾回收機制，以及如何利用 WeakMap 實作 DOM 元素資料儲存和 Class 私有變數的實用範例

程式筆記

#程式筆記 #javaScript #frontendMaster

2025-12-169 分鐘閱讀

CSS 選擇器權重 | Specificity

解析 CSS Specificity 權重計算機制，說明 ID、CLASS、TYPE 等選擇器的權重規則，寫出更易維護的 CSS 程式碼

程式筆記

#程式筆記 #css

2025-12-157 分鐘閱讀

JavaScript 事件傳遞機制：Capturing 與 Bubbling 的執行順序

說明 JavaScript 的事件傳遞機制，包含事件捕獲 (Capturing) 與事件冒泡 (Bubbling) 的執行順序，以及 stopPropagation 如何阻止事件傳播。透過 Frontend Masters 課程實例，完整理解 addEventListener 的第三個參數與事件傳遞三階段。

程式筆記

#程式筆記 #javaScript #frontendMaster

2025-12-137 分鐘閱讀

CSS 動畫的渲染成本（Layout、Paint、Composite）

整理 CSS 動畫會觸發的瀏覽器渲染階段（Layout / Paint / Composite），說明哪些屬性較適合做動畫以提升效能，並附上常見屬性分類、優化原則與參考資料。

程式筆記

#程式筆記 #css #performance #frontendMaster

2025-12-1210 分鐘閱讀

JavaScript 垃圾回收機制：理解 Mark and Sweep 演算法與記憶體管理

了解 JavaScript 的垃圾回收機制（Garbage Collection），說明 Mark and Sweep 演算法的運作原理，開發者在記憶體管理上應該注意的細節，避免記憶體洩漏問題

程式筆記

#程式筆記 #javaScript #memory #advancedWebDevelopmentQuiz

2025-12-1117 分鐘閱讀

HTTP Cache：快取指令與應用

解析 HTTP Cache 的運作原理，說明 Cache-Control 各項指令 (no-cache、no-store、must-revalidate、stale-while-revalidate、private) 的差異與使用情境，幫助前端開發者掌握瀏覽器快取機制，提升網站效能與使用者體驗

程式筆記

#程式筆記 #cache #frontendMaster #advancedWebDevelopmentQuiz

123

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