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

• 文章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-12-1117 分鐘閱讀

HTTP Cache：快取指令與應用

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

程式筆記

#程式筆記 #cache #frontendMaster #advancedWebDevelopmentQuiz

2025-12-1013 分鐘閱讀

從輸入網址到頁面載入：PerformanceNavigationTiming

解析 PerformanceNavigationTiming API 的各個階段，從文件卸載、DNS 查詢、TCP 連線到 DOM 處理與渲染，說明瀏覽器載入網頁的時間線。適合準備前端面試或想了解 Web 效能監控的開發者。

程式筆記

#程式筆記 #performanceNavigationTiming #performance #frontendMaster #advancedWebDevelopmentQuiz

2025-12-0911 分鐘閱讀

JavaScript 展開運算子的淺拷貝陷阱：物件參考問題解析

探討 JavaScript 展開運算子（spread operator）的淺拷貝特性，透過實際範例說明物件參考問題，並比較 structuredClone()、JSON 方法等多種深拷貝解決方案，幫助開發者避免常見的物件複製陷阱。

程式筆記

#javaScript #程式筆記 #frontendMaster #advancedWebDevelopmentQuiz

2025-12-089 分鐘閱讀

前端資源預加載：dns-prefetch、preconnect、prefetch、preload

前端資源預加載的四種技術：dns-prefetch、preconnect、prefetch 與 preload。如何使用這些 Resource Hints 優化網頁效能，提升資源載入速度與使用者體驗。

程式筆記

#performance #frontendMaster #程式筆記 #advancedWebDevelopmentQuiz

2025-12-0413 分鐘閱讀

瀏覽器的呼叫堆疊與事件循環 | Call Stack & Event Loop

解析 JavaScript 的 Call Stack 與 Event Loop 機制，透過實際程式碼範例說明 Microtask 和 Macrotask 的執行順序，掌握非同步任務的處理邏輯。

程式筆記

#event-loop #frontendMaster #程式筆記 #advancedWebDevelopmentQuiz

2025-12-049 分鐘閱讀

DNS 解析流程 | Resolving Domain Requests

瀏覽器發起請求前是怎麼透過網站的 Domain Name 來獲取該網站的伺服器 IP 位址的？

程式筆記

#frontendMaster #javascript #dns #html #程式筆記 #advancedWebDevelopmentQuiz

2025-12-0216 分鐘閱讀

渲染流程與合成 | Rendering Pipeline & Compositing

瀏覽器是如何渲染的呢？聊解了瀏覽器渲染過程可以更明白如何為突破網站效能的瓶頸

程式筆記

#javascript #html #程式筆記 #frontendMaster #advancedWebDevelopmentQuiz

2025-12-014 分鐘閱讀

async vs. defer

HTML 的 script 標籤上 async 與 defer 的差別是什麼

程式筆記

#javascript #html #程式筆記 #frontendMaster #advancedWebDevelopmentQuiz

2022-04-158 分鐘閱讀

聰明的處理前端表單 | FormData API | handling-form-without-any-dependencies

透過 FormData API 處理表單可以很輕鬆!

程式筆記

#javascript #程式筆記

2021-04-1413 分鐘閱讀

Teachable 的 Sidebar 你的時辰到了 | Tampermonkey Userscript

那個 Sidebar 甚麼的給我立刻消失 !!!

程式筆記

#Tampermonkey #程式筆記

123

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