前端工程面試準備清單
掌握基礎知識：在開始解決複雜問題之前，您需要確保對前端開發的基礎知識有扎實的理解，包括 HTML、CSS 和 JavaScript，以及它們如何協作來創建響應式和互動式的網頁。如果您認為自己在這些主題上仍需學習，請參考前端學習路線圖。
練習寫程式：通過小型專案或在 LeetCode 和 HackerRank 等平台上解決問題，來提升您的前端寫程式技能。專注於與前端開發相關的挑戰。
學習現代框架（framework）和函式庫（library）：了解如 React、Angular 或 Vue.js 等流行的框架和函式庫。掌握這些工具對於現代前端開發職位至關重要。
熟悉開發工作流程中的基礎工具：確保您對基本工具和實踐（例如版本控制工具 Git、測試工具（單元測試和整合測試）以及建構工具如 Vite）感到熟悉。這些對於任何前端角色來說都至關重要。
理解 UI/UX 原則：掌握基本的設計和用戶體驗概念可以讓您在前端開發者中脫穎而出。學習無障礙設計、響應式設計，以及如何創建直觀的界面。
準備作品集：設計和開發作品集或是 side project 可以幫助你展現你在前端的技術能力。
研究不同公司和產業：透過了解您面試的公司業務和產品，表現出對公司的興趣。準備一些問題在面試時提出，展示您對該角色的重視。
提升溝通能力：雖然這並非特定於前端開發，但好的溝通能力可以幫助我們與設計師和 PM 在工作上更容易溝通協調。
前端工程面試問題清單
Beginner Level
1. 什麼是 HTML/CSS 中的 id 和 class 的差別？
id 是用於唯一標識單個 HTML 元素的識別符號。class 則是一個可重複使用的識別符號，可以應用於多個元素。
HTML 中 id 與 class 的區別
- 當需要通過 CSS 或 JavaScript 操作單個元素時，應該使用 id。
- 當需要操作一組 DOM 元素時，應該使用 class。
在 CSS 中：
#id選擇具有該 id 的特定元素。.class選擇具有該 class 的所有元素。
2. 什麼是 CSS 中的盒模型（Box Model）？
CSS 盒模型描述了在 DOM 中為元素生成的矩形框。盒模型由以下幾層組成：
- 內容（Content）： 最內層，用於顯示文字和圖片。
- 內邊距（Padding）： 內容與邊框之間的空間。
- 邊框（Border）： 包圍元素的外緣，位於內邊距的外側。
- 外邊距（Margin）： 邊框外部的空間，用於將該元素與其他元素分隔開。
通過分別控制每一層，您可以定義使用者介面中每個元素的外觀。
3. CSS 中 inline、inline-block 和 block 元素的區別
在 CSS 中，inline、inline-block 和 block 元素的區別在於它們在網頁中的呈現方式：
Inline（行內元素）：
- 不具有寬度或高度的屬性。
- 不會換行，僅佔據其內容所需的寬度。
- 範例：
<span>、<a>。
Inline-block（行內區塊元素）：
- 與 inline 元素類似，不會換行，但允許設定寬度和高度。
- 範例：
<img>。
Block（區塊元素）：
- 會從新行開始，默認佔據可用寬度的整行。
- 可以自訂寬度和高度。
- 範例：
<div>、<p>。
4. HTML 結構中的 SEO 最佳實踐
純 HTML 方面：
- 使用語義化的 HTML： 使用
<header>、<nav>、<main>、<article>、<section>和<footer>等標籤，提供有意義的結構。 - 正確的標題層級： 正確使用
<h1>到<h6>，每個頁面僅使用一次<h1>作為主標題，其次是<h2>、<h3>至<h6>等。 - Meta 標籤： 包含相關的
<meta>標籤，例如描述（description）、關鍵字（keywords）和視口（viewport），提供網站的元數據。 - 圖片的 Alt 屬性： 為圖片添加描述性的
alt屬性，以提高無障礙性和搜尋引擎的理解能力。
其他最佳實踐：
- 內部連結： 使用內部鏈接連接網站內的內容，幫助搜尋引擎爬取並了解網站結構。
- 行動裝置友好設計： 以行動優先的方式設計網站和 CSS，確保響應式設計以提升用戶體驗和搜尋引擎排名。
- 快速載入時間： 優化圖片、使用高效的代碼並利用快取來提升頁面載入速度，載入速度越快，在搜尋結果中越具競爭力。
5. 什麼是文件物件模型（DOM）？
文件物件模型（Document Object Model，DOM）是用於網頁文件的 API，它將 HTML 網頁的結構表示為一棵樹，其中每個節點對應於文檔中的一部分（例如元素、屬性或文本）。
6. 如何為元素添加事件監聽器？
要為元素添加事件監聽器，首先需要通過文檔物件的某種方法（如 getElementById）獲取該元素，然後使用該物件的 addEventListener 方法。
此方法需要接收三個參數：事件名稱（如 click、keyup、mouseup 等）、事件處理函數，以及可選的 boolean（指示是否在捕獲階段觸發事件）。
7. null 和 undefined 的區別是什麼？
在 JavaScript 中：
- undefined 是新變數的默認值，表示變數已被定義，但尚未賦值。
- null 是一個值，表示
沒有值或沒有物件，需要由開發者明確賦值給變數。
8. cookies、sessionStorage 和 localStorage 的區別是什麼？
Cookies：
小型資料片段，存儲於瀏覽器中，主要用於在 HTTP 請求之間保留資訊，例如用戶身份驗證、會話管理和追蹤用戶行為。sessionStorage：
用於臨時存儲，只能在同一個session中訪問（即瀏覽器視窗或標籤頁開著時）。當瀏覽器視窗關閉時，數據會丟失。localStorage：
與sessionStorage類似，但資料在瀏覽器窗口或標籤頁關閉後依然存在，提供長期存儲功能。相較於cookies，localStorage的大小限制更大，更適合存儲大資料集。
9. 瀏覽器如何渲染網站？
瀏覽器渲染網頁的過程包括以下幾個步驟：
- 解析 HTML。
- 解析 CSS 並應用樣式。
- 計算頁面佈局中每個元素的位置。
- 將實際像素繪製到屏幕上，並將它們排序到不同的圖層中。
- 組合所有圖層，根據
z-index值、不透明度等渲染到屏幕上。 - 執行 JavaScript 代碼。
- 加載非同步資源。
10. 什麼是媒體查詢（Media Queries）？
媒體查詢是 CSS 中的一項功能，允許前端開發者根據設備或視口的各種特性應用不同的樣式。例如，根據設備的寬度、高度、方向或類型設定不同的樣式。
通過媒體查詢，可以實現響應式設計，使樣式適應不同的屏幕尺寸和設備能力。
中級知識
1. em 和 rem 單位的區別
EM 和 REM 在 CSS 中的比較
它們都是相對單位，但相對於的基準不同：
- em：相對於父元素的字體大小。如果父元素的字體大小是 20px，設定
font-size: 2em則等於 40px。 - rem：相對於頁面根元素（
<html>元素）的字體大小。例如，若<html>的字體大小是 16px，則1rem等於 16px。
2. 如何建立 Flexbox 布局
建立 Flexbox 布局需要兩個主要步驟：
- 設置容器元素： 將
display: flex;屬性應用到容器元素上。 - 設定子元素的 Flex 屬性： 對容器內的每個元素設置 Flexbox 屬性，例如
flex: 1。
3. CSS 特殊性（Specificity）的解釋及其運作原理
CSS 特殊性用於決定在樣式衝突時應該應用哪一組樣式。它遵循以下優先順序：
- 行內樣式（Inline style）： 擁有最高優先權，會覆蓋其他樣式。
- ID 選擇器： 僅次於行內樣式，覆蓋其他類型的樣式。
- 類別選擇器（Class-based selectors）： 覆蓋類型選擇器，但低於 ID 選擇器和行內樣式。
- 類型選擇器（Type selectors）： 優先級最低，會被其他選擇器覆蓋。
4. 如何建立 CSS Grid 布局
建立 Grid 布局的步驟：
- 將包含元素設置為
display: grid。 - 使用
grid-template-rows和grid-template-columns屬性定義網格的結構。 - 將元素放置於網格容器內，並使用
grid-column或grid-row屬性指定位置。
5. 什麼是閉包（Closures），以及如何使用它們？
閉包是指當一個函數定義在另一個函數內時，即使外部函數已執行完畢，內部函數仍然可以訪問外部函數的變數和參數。
閉包的用途：
- 創建私有變數： 內部函數可以訪問，但外部無法直接存取。
- 實現複雜對象： 創建只有內部上下文可用的豐富數據結構。
6. 什麼是事件委派（Event Delegation）？
事件委派是一種在父元素上定義事件處理器的技術，用來處理子元素觸發的事件。
事件委派原理：
當事件被觸發時，它會沿著 DOM 層次結構向上冒泡，直到到達父元素的事件處理器。
7. 什麼是 Promise，如何運作？
Promise 是 JavaScript 中用於表示非同步操作最終完成（或失敗）的對象。
- 用途： 通過 Promise，可以處理非同步操作的成功結果或失敗情況。
- 工作原理： Promise 提供
.then()和.catch()方法，分別用於處理成功和失敗的結果。
8. 如何優化網站資源以加快加載時間？
根據資源類型，使用不同的優化技術：
- CSS 和 JavaScript 文件： 最小化並壓縮代碼。
- 圖片： 使用如 JPEGOptim 或 ImageOptim 等工具壓縮圖片，確保過程中不損失質量。
9. 什麼是 Service Workers？它們的用途是什麼？
Service Workers 是在網頁應用程序背景中執行的腳本，與網頁主線程分開運作，提供以下功能：
- 離線快取。
- 推送通知。
- 背景同步。
10. 什麼是同源政策（Same-Origin Policy）？
同源政策是瀏覽器中的一項安全功能，用於防止網站從其他網站訪問數據（如導入腳本或 API 請求）。
- 用途： 防止惡意腳本竊取其他網站的敏感數據（如 cookies、本地存儲或內容）。
- 解決方案： 使用跨源資源共享（CORS）。服務器需指定允許訪問的域名，並且客戶端應發送正確的標頭，雙方即可進行互動，即使不在同一域名下。
進階知識
1. 什麼是 CSS 變數？什麼時候會用到？
CSS 變數類似於前端程式語言中的變數，可以由開發者設置並在整個 CSS 樣式表中重複使用。
- 優點： 將全局使用的值（如顏色）集中管理。例如，CSS 框架常用變數設置常量（如將黑色設置為
#222而非#000）。 - 應用場景： 當網站需要一致性的設計風格或易於更新的全局樣式時。
2. 如何實現 Critical CSS 優化網頁的加載時間？
Critical CSS 是指將關鍵 CSS 規則從 CSS 文件中移除，並內嵌到網站的 <head> 元素中：
- 方法： 將頁面渲染所需的關鍵樣式直接嵌入到 HTML 文件的
<head>中。 - 好處： 關鍵樣式能立即加載，減少渲染時間；非關鍵樣式則隨後加載（如主 CSS 文件）。
3. JavaScript 中的事件循環（Event Loop）是如何運作的？
事件循環是 JavaScript 的核心概念，允許執行非同步代碼。
運作過程：
- 調用棧（Call Stack）： JavaScript 使用單線程執行代碼，函數按順序添加到調用棧，執行完畢後移除。
- 非同步操作： 非同步操作由瀏覽器的 Web API 處理，從調用棧中移除，單獨執行。
- 任務隊列（Task Queue）： 當非同步操作完成後，回調函數被放入任務隊列中等待執行。
- 事件循環： 檢查調用棧是否為空，若為空，將任務隊列中的回調函數推入調用棧執行。
4. JavaScript 中的非同步操作處理方式有哪些？
JavaScript 提供了 4 種主要方法處理非同步操作：
- 回調函數（Callbacks）： 當非同步操作完成後調用指定函數。
- Promises： 表示非同步操作最終完成的結果，使用
.then()和.catch()處理成功或失敗情況。 - Async/Await： Promise 的進化語法，讓非同步代碼看起來像同步代碼，易於閱讀和維護。
- 事件監聽器（Event Listeners）： 當特定事件（如用戶操作）觸發時調用回調函數。
5. 如何在單頁應用程式中管理狀態？
在沒有使用函式庫或是框架（如 React 或 Vue.js）的情況下，管理狀態相對複雜，可考慮以下方法：
- 全局變數： 使用全局變數或全局對象集中管理狀態，但大型應用難以維護。
- 模組模式（Module Pattern）： 將狀態封裝到模組內，提供清晰的 API 來管理狀態。
- 發布/訂閱模式（Pub/Sub Pattern）： 基於事件驅動的架構，分離狀態變更邏輯，更靈活但更複雜。
- 狀態管理庫： 使用像 Redux 這樣的庫，幫助統一管理應用的狀態。
6. 虛擬 DOM 的運作方式及其優勢
運作方式：
- 將用戶界面複製到內存中的「虛擬 DOM」，這是一個輕量級的 DOM 副本。
- 當狀態變化時，創建新的虛擬 DOM 並與舊版本進行比較（Diff 算法）。
- 系統計算出最小的更新操作，僅修改需要變更的節點，減少真實 DOM 操作。
優勢：
- 性能優化： 通過減少 DOM 更新次數，降低 UI 的重排和重繪成本。
- 跨平台支持： 虛擬 DOM 提供了應用與渲染 API 的抽象層，支持跨平台實現。
- 一致性： 確保 UI 與內部狀態同步，減少錯誤和不一致情況。
7. 什麼是伺服器端渲染（SSR）？何時使用？
伺服器端渲染（SSR）： 是由伺服器生成完整的 HTML，並將其發送給客戶端，而非在客戶端動態生成內容（即客戶端渲染，CSR）。
適用場景：
- 內容驅動型網站： 如新聞網站、部落格等需要快速呈現內容的網站。
- SEO 重視應用： 如果網站依賴於搜索引擎流量，SSR 可以改善 SEO 表現。
- 漸進式 Web 應用： 需要快速加載的應用可使用 SSR 初始渲染，並在客戶端進行後續交互。
8. 如何分析並改進 Web 應用性能？
需要監控的核心指標包括：
- 首次內容繪製（FCP）： 首次內容呈現所需時間。
- 最大內容繪製（LCP）： 最大內容元素呈現所需時間。
- 可交互時間（TTI）： 網頁完全可交互所需時間。
- 總阻塞時間（TBT）： 主線程被阻塞的總時間。
- 累積佈局偏移（CLS）： 測量視覺穩定性。
9. 什麼是內容安全政策（CSP）？如何提高應用的安全性？
CSP（Content Security Policy）： 一種安全標準，用於防止跨站腳本（XSS）和代碼注入攻擊。它通過定義和執行允許的資源來源白名單來運作。
優勢：
- 增強安全性： 有效防禦 XSS 和數據注入攻擊。
- 更高控制權： 開發者可細化政策來控制內容來源。
- 符合規範： 幫助達成 OWASP Top 10 等安全合規要求。
10. 什麼是 Tree Shaking？如何提升 Web 應用性能？
Tree Shaking： 是 JavaScript 模組打包工具（如 Webpack、Vite）用來移除未使用代碼的技術。
優勢：
- 減少打包大小： 移除無用代碼，減少發送給客戶端的資源量，加速加載。
- 性能提升： 更小的打包大小使解析和執行代碼更快，提升應用響應速度。
- 資源最佳化： 開發者可撰寫模組化代碼，而無需擔心未使用的依賴影響打包體積。