跳至主要内容

4 篇文章 含有標籤「前端工程師」

檢視所有標籤

常見 Web Frontend 前端工程師面試準備題目清單

· 閱讀時間約 15 分鐘
kdchang

  1. 掌握基礎知識：在開始解決複雜問題之前，您需要確保對前端開發的基礎知識有扎實的理解，包括 HTML、CSS 和 JavaScript，以及它們如何協作來創建響應式和互動式的網頁。如果您認為自己在這些主題上仍需學習，請參考前端學習路線圖。

  2. 練習寫程式：通過小型專案或在 LeetCode 和 HackerRank 等平台上解決問題，來提升您的前端寫程式技能。專注於與前端開發相關的挑戰。

  3. 學習現代框架（framework）和函式庫（library）：了解如 React、Angular 或 Vue.js 等流行的框架和函式庫。掌握這些工具對於現代前端開發職位至關重要。

  4. 熟悉開發工作流程中的基礎工具：確保您對基本工具和實踐（例如版本控制工具 Git、測試工具（單元測試和整合測試）以及建構工具如 Vite）感到熟悉。這些對於任何前端角色來說都至關重要。

  5. 理解 UI/UX 原則：掌握基本的設計和用戶體驗概念可以讓您在前端開發者中脫穎而出。學習無障礙設計、響應式設計，以及如何創建直觀的界面。

  6. 準備作品集：設計和開發作品集或是 side project 可以幫助你展現你在前端的技術能力。

  7. 研究不同公司和產業：透過了解您面試的公司業務和產品，表現出對公司的興趣。準備一些問題在面試時提出，展示您對該角色的重視。

  8. 提升溝通能力：雖然這並非特定於前端開發，但好的溝通能力可以幫助我們與設計師和 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 中為元素生成的矩形框。盒模型由以下幾層組成：

  1. 內容（Content）： 最內層，用於顯示文字和圖片。
  2. 內邊距（Padding）： 內容與邊框之間的空間。
  3. 邊框（Border）： 包圍元素的外緣，位於內邊距的外側。
  4. 外邊距（Margin）： 邊框外部的空間，用於將該元素與其他元素分隔開。

通過分別控制每一層，您可以定義使用者介面中每個元素的外觀。

3. CSS 中 inline、inline-block 和 block 元素的區別​

在 CSS 中，inline、inline-block 和 block 元素的區別在於它們在網頁中的呈現方式：

  1. Inline（行內元素）：

    • 不具有寬度或高度的屬性。
    • 不會換行，僅佔據其內容所需的寬度。
    • 範例：<span>、<a>。

  2. Inline-block（行內區塊元素）：

    • 與 inline 元素類似，不會換行，但允許設定寬度和高度。
    • 範例：<img>。

  3. Block（區塊元素）：

    • 會從新行開始，默認佔據可用寬度的整行。
    • 可以自訂寬度和高度。
    • 範例：<div>、<p>。

4. HTML 結構中的 SEO 最佳實踐​

純 HTML 方面：

  1. 使用語義化的 HTML： 使用 <header>、<nav>、<main>、<article>、<section> 和 <footer> 等標籤，提供有意義的結構。
  2. 正確的標題層級： 正確使用 <h1> 到 <h6>，每個頁面僅使用一次 <h1> 作為主標題，其次是 <h2>、<h3> 至 <h6>等。
  3. Meta 標籤： 包含相關的 <meta> 標籤，例如描述（description）、關鍵字（keywords）和視口（viewport），提供網站的元數據。
  4. 圖片的 Alt 屬性： 為圖片添加描述性的 alt 屬性，以提高無障礙性和搜尋引擎的理解能力。

其他最佳實踐：

  1. 內部連結： 使用內部鏈接連接網站內的內容，幫助搜尋引擎爬取並了解網站結構。
  2. 行動裝置友好設計： 以行動優先的方式設計網站和 CSS，確保響應式設計以提升用戶體驗和搜尋引擎排名。
  3. 快速載入時間： 優化圖片、使用高效的代碼並利用快取來提升頁面載入速度，載入速度越快，在搜尋結果中越具競爭力。

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. 瀏覽器如何渲染網站？​

瀏覽器渲染網頁的過程包括以下幾個步驟：

  1. 解析 HTML。
  2. 解析 CSS 並應用樣式。
  3. 計算頁面佈局中每個元素的位置。
  4. 將實際像素繪製到屏幕上，並將它們排序到不同的圖層中。
  5. 組合所有圖層，根據 z-index 值、不透明度等渲染到屏幕上。
  6. 執行 JavaScript 代碼。
  7. 加載非同步資源。

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 布局需要兩個主要步驟：

  1. 設置容器元素： 將 display: flex; 屬性應用到容器元素上。
  2. 設定子元素的 Flex 屬性： 對容器內的每個元素設置 Flexbox 屬性，例如 flex: 1。

3. CSS 特殊性（Specificity）的解釋及其運作原理​

CSS 特殊性用於決定在樣式衝突時應該應用哪一組樣式。它遵循以下優先順序：

  1. 行內樣式（Inline style）： 擁有最高優先權，會覆蓋其他樣式。
  2. ID 選擇器： 僅次於行內樣式，覆蓋其他類型的樣式。
  3. 類別選擇器（Class-based selectors）： 覆蓋類型選擇器，但低於 ID 選擇器和行內樣式。
  4. 類型選擇器（Type selectors）： 優先級最低，會被其他選擇器覆蓋。

4. 如何建立 CSS Grid 布局​

建立 Grid 布局的步驟：

  1. 將包含元素設置為 display: grid。
  2. 使用 grid-template-rows 和 grid-template-columns 屬性定義網格的結構。
  3. 將元素放置於網格容器內，並使用 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> 元素中：

  1. 方法： 將頁面渲染所需的關鍵樣式直接嵌入到 HTML 文件的 <head> 中。
  2. 好處： 關鍵樣式能立即加載，減少渲染時間；非關鍵樣式則隨後加載（如主 CSS 文件）。

3. JavaScript 中的事件循環（Event Loop）是如何運作的？​

事件循環是 JavaScript 的核心概念，允許執行非同步代碼。
運作過程：

  1. 調用棧（Call Stack）： JavaScript 使用單線程執行代碼，函數按順序添加到調用棧，執行完畢後移除。
  2. 非同步操作： 非同步操作由瀏覽器的 Web API 處理，從調用棧中移除，單獨執行。
  3. 任務隊列（Task Queue）： 當非同步操作完成後，回調函數被放入任務隊列中等待執行。
  4. 事件循環： 檢查調用棧是否為空，若為空，將任務隊列中的回調函數推入調用棧執行。

4. JavaScript 中的非同步操作處理方式有哪些？​

JavaScript 提供了 4 種主要方法處理非同步操作：

  1. 回調函數（Callbacks）： 當非同步操作完成後調用指定函數。
  2. Promises： 表示非同步操作最終完成的結果，使用 .then() 和 .catch() 處理成功或失敗情況。
  3. Async/Await： Promise 的進化語法，讓非同步代碼看起來像同步代碼，易於閱讀和維護。
  4. 事件監聽器（Event Listeners）： 當特定事件（如用戶操作）觸發時調用回調函數。

5. 如何在單頁應用程式中管理狀態？​

在沒有使用函式庫或是框架（如 React 或 Vue.js）的情況下，管理狀態相對複雜，可考慮以下方法：

  1. 全局變數： 使用全域變數或全域對象集中管理狀態，但大型應用難以維護。
  2. 模組模式（Module Pattern）： 將狀態封裝到模組內，提供清晰的 API 來管理狀態。
  3. 發布/訂閱模式（Pub/Sub Pattern）： 基於事件驅動的架構，分離狀態變更邏輯，更靈活但更複雜。
  4. 狀態管理庫： 使用像 Redux 這樣的庫，幫助統一管理應用的狀態。

6. 虛擬 DOM 的運作方式及其優勢​

運作方式：

  1. 將用戶界面複製到記憶體中的「虛擬 DOM」，這是一個輕量級的 DOM 副本。
  2. 當狀態變化時，創建新的虛擬 DOM 並與舊版本進行比較（Diff 算法）。
  3. 系統計算出最小的更新操作，僅修改需要變更的節點，減少真實 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）用來移除未使用代碼的技術。

優勢：

  • 減少打包大小： 移除無用代碼，減少發送給客戶端的資源量，加速加載。
  • 性能提升： 更小的打包大小使解析和執行代碼更快，提升應用響應速度。
  • 資源最佳化： 開發者可撰寫模組化代碼，而無需擔心未使用的依賴影響打包體積。

參考文件

  1. github developer-roadmap
  2. Top 30 Popular Front End Developer Interview Questions
  3. 2020 資深前端工程師面試心得（4y, 100k+）
  4. 最常見的前端面試題目
  5. 前端工程師面試問題集 - H5BP
  6. 前端工程師面試問題集
  7. 前端面試問題
  8. 前端面試技術考實戰分享-JS 篇
  9. QNAP/雷技/Yahoo/Synology-前端工程師-面試經驗分享
  10. 2024 資深前端工程師面試心得
  11. JavaScript Questions

常見軟體工程師/Web 開發技術面試及學習資源整理

· 閱讀時間約 2 分鐘
kdchang

以下彙整常見軟體工程師技術面試及學習資源整理：

程式解題網站​

  1. coderbyte
  2. codility
  3. hackerrank
  4. leetcode
  5. codewars
  6. testgorilla
  7. WeHelp Coding 程式解題系統

線上程式學習網站​

  1. scrimba
  2. codecademy
  3. pluralsight
  4. teamtreehouse
  5. udemy
  6. freecodecamp
  7. MDN Curriculum
  8. frontendmentor
  9. JavaScript Tutorial
  10. React Tutorial

常見程式題目​

  1. lydiahallie JavaScript Questions
  2. Front End Interview Handbook
  3. BigFrontEnd.dev
  4. greatfrontend
  5. explainthis 最常見的前端面試題目
  6. leetcode 30 Days of JavaScript
  7. leetcode Top Interview 150
  8. react hackerrank
  9. coderbyte Challenges

技術面試題目​

  1. [面試] 中英對照之 TS 面試題
  2. 2024 資深前端工程師面試心得
  3. Three Ways to Reverse a String in JavaScript

系統設計​

  1. 最完整的系統設計面試題
  2. 後端工程師面試考什麼 - 系統設計(system design)心法篇
  3. The RADIO Framework

參考文件​

  1. 【Day 13】什麼是工程師的技術面試？為什麼技術面試看的不只是技術？

關於 Web 網頁前端工程師 Frontend Engineer 的 10 個關鍵字

· 閱讀時間約 2 分鐘
kdchang

以下整理了前端工程師相關的 10 個關鍵字，涵蓋技能、工具與工作方式：

  1. HTML：前端結構的基礎語言，用於定義網頁的內容和結構。

  2. CSS：用於設計網頁的樣式，包括佈局、配色和字體。

  3. JavaScript：前端開發的核心語言，為網頁添加互動性。

  4. React / Vue / Angular：主流的前端框架和函式庫，用於構建動態、模組化的應用程式。

  5. Responsive Design（響應式設計）：確保網站在不同裝置和螢幕大小下的最佳顯示效果。

  6. REST API / GraphQL：前端與後端通訊的重要工具，用於前後端資料請求與傳輸。

  7. Webpack / Vite / Parcel：模組打包工具，用於構建和優化前端資源。

  8. Git / GitHub / GitLab：版本控制工具，用於協作開發與代碼管理。

  9. Cross-Browser Compatibility（跨瀏覽器相容性）：確保網站在不同瀏覽器上的一致性表現。

  10. UI/UX Design（使用者介面/使用者體驗設計）：理解使用者需求，優化網頁的易用性與美觀度。

以上關鍵字為前端工程師平常工作或是職涯的核心工作內容和技能樹，透過不斷累積相關經驗和專案開發能力，可以讓自己成為更優秀的軟體工程師。