AI 時代的前端升級術｜前 TikTok 面試官親授面試必考題

JavaScript 核心觀念

🎯 學習目標

• 釐清 JS 面試最常考的基礎與陷阱題，從變數作用域到非同步流程全面掌握。
• 能用清楚的邏輯，回答各種「為什麼會這樣」的問題。

💡 能獲得的知識

• 變數提升與作用域：理解 var、let、const 的差異，不再掉進 Hoisting 陷阱。
• 比較陷阱：分清楚 == 與 ===，懂得背後的隱式轉型原理。
• 事件循環：搞懂 Event Loop，面試時能清楚解釋同步、非同步、Promise 與微任務。
• 閉包：能舉生活化例子，解釋 closure 的實際用途。
• 資料結構：Map 與 Set 的正確使用情境。
• this 與原型鏈：會解釋 this 的指向邏輯，搞懂原型鏈、new、Class 的本質。
• 模組化：理解 CommonJS、ESM 與前端模組演進。

👉 學完後，你能用最清晰的邏輯，回答面試官「這段程式碼輸出是什麼？為什麼？」

前端性能優化

🎯 學習目標

• 理解網站為何快或慢，能明確指出「哪裡卡」「怎麼優化」。
• 學會面試官最愛問的前端效能題目。

💡 能獲得的知識

• 渲染過程 (CRP)：瀏覽器載入網頁的完整流程，能精準拆解 performance bottleneck。
• script defer/async：懂得如何加快頁面速度。
• SSR vs SSG vs CSR：清楚差別與實戰選擇。
• Lazy Loading / Code Splitting：前端拆分、加速的核心手法。
• Prefetch & Preload：最佳化資源載入策略。
• CDN 與 Utility-first CSS：理解 CDN 加速與 TailwindCSS 這類工具的價值。
• 用戶互動優化：Throttle、Debounce、requestAnimationFrame、硬體加速動畫。
• React 優化：避免不必要的重渲染。

👉 學完後，你能自信回答「這個網頁載入太慢怎麼辦？」

React 核心觀念

🎯 學習目標

• 讓面試官知道你不只會用 React，還懂 原理與最佳實踐。
• 能從 hook、Virtual DOM 到 Server Component 一路解析。

💡 能獲得的知識

• Hook 限制原因：理解 Hook 為什麼只能在頂層呼叫。
• useRef 原理：知道它如何保持跨 render 的值。
• useEffect vs useLayoutEffect：差別、使用時機。
• React Key：理解 key 為何對渲染正確性重要。
• Server Component & Hydration：最新 React 架構趨勢，懂得怎麼應用。
• 狀態管理框架：Redux、Zustand、Recoil… 什麼情境該用？
• Virtual DOM 與 React Fiber：理解 React 為何能高效渲染。

👉 學完後，你能清楚解釋 React 內部原理，不再只會「套 code」。

HTML、CSS、瀏覽器必會觀念

🎯 學習目標

• 搞懂前端基礎三劍客，避免被問倒在最基本的題目上。
• 從語意化、排版到事件模型，全面掌握瀏覽器核心知識。

💡 能獲得的知識

• HTML 語意化：為何不能亂用 div？SEO 與可維護性。
• Box Model & Display：從 margin 到 inline-block，徹底搞懂。
• CSS 優先級：正確處理衝突問題。
• Flexbox：最常考的排版題目，快速解決佈局問題。
• px / rem / em：響應式開發必備。
• 定位 & React Portal：絕對定位與跨 DOM 層級渲染。
• 事件冒泡原理：捕獲、冒泡與事件代理。
• 正確開啟外部連結：安全性與 SEO 注意事項。

👉 學完後，你不會再因「太基本」的題目被淘汰。

網路安全

🎯 學習目標

• 知道面試官最常問的安全漏洞，能解釋「怎麼攻擊、怎麼防禦」。
• 把理論轉化成實際前端開發要注意的細節。

💡 能獲得的知識

• XSS 攻擊：原理、案例、防禦方式。
• CSP (Content Security Policy)：如何避免惡意程式。
• CSRF：攻擊流程、如何防止跨站請求偽造。
• SQL Injection：雖然是後端題，但前端也該懂。

👉 學完後，你能用簡單例子，讓面試官知道「你很懂安全」。

HTTP 通訊協定

🎯 學習目標

• 完整掌握網路傳輸與通訊協定，從輸入網址到瀏覽器渲染。
• 面試官問到「HTTP 狀態碼、跨域、HTTPS」時能輕鬆回答。

💡 能獲得的知識

• 網址到網頁的過程：DNS、TCP、HTTP、渲染全過程。
• HTTP vs HTTPS：安全性與加密。
• HTTP/1 vs HTTP/2：差異與為何更快。
• 常見狀態碼：200、301、404、500… 必懂面試題。
• Cookie 與 Session：存放機制、安全問題。
• 跨域 (CORS)：為何會發生、如何解決。

👉 學完後，你能在網路協定題上，回答得比一般工程師更專業。

作業設計與注意事項

• 針對課程問答區的問題，老師將以一週一次的頻率進行回覆。
• 本課程的作業將不會進行批改回饋，鼓勵同學們完課後進行練習。