初中階 1. requestAnimationFrame 和 setTimeout 的差異? // setTimeout:固定時間後執行,不管瀏覽器在不在渲染 setTimeout(() => updateDOM(), 16); // 希望模擬 60fps // rAF:在瀏覽器下一次渲染前執行 requestAnimationFrame(() =>
read more
初中階 1. requestAnimationFrame 和 setTimeout 的差異? // setTimeout:固定時間後執行,不管瀏覽器在不在渲染 setTimeout(() => updateDOM(), 16); // 希望模擬 60fps // rAF:在瀏覽器下一次渲染前執行 requestAnimationFrame(() =>
read more
Canvas 元素的縮放策略 Canvas 比較特殊,Transform 和 Scroll 策略都不是最佳選擇。最適合的是 Canvas 原生重繪。 三種方案比較 1. Transform 策略(可用,但有缺點) transform: scale3d(2, 2, 1); 放
read more
為什麼 Transform 策略適合 img 等不可捲動元素 單張圖片沒有「溢出內容需要捲動」的需求。放大後只需要: 視覺上放大圖片 手指拖曳平移到圖片的不同區域 這正好是 CSS transform:
read more
1. CSS Transform 不影響 Layout 這是最關鍵的概念: transform: scale(2); /* 視覺上放大 2 倍,但元素在 layout 中的尺寸不變 */ 瀏覽器的排版引擎(layout engine)完全忽略 trans
read moreHoward Lee is a Staff Software Engineer based in Taipei, specializing in frontend architecture, CI/CD, and production-quality engineering for enterprise web applications. With 13+ years of software development experience, Howard has worked across B2B SaaS, IoT energy-management platforms, online travel marketplaces, and Android applications. His work focuses on modernizing large frontend systems, improving delivery quality, and building reliable product workflows with automated testing, observability, and practical cloud/platform integration. Core Expertise Frontend architecture: Angular 5 to 19 modernization, TypeScript, JavaScript, React, Next.
Know More