web前端面試問答題有哪些

Web前端面試問答題有哪些

目錄

1. HTML
2. CSS
3. JavaScript
4. 前端框架
5. 性能優化
6. 網絡協議
7. 瀏覽器原理
8. 前端安全
9. 工程化
10. 數據結構與算法
11. 設計模式
12. 其他

HTML

1. HTML5 有哪些新特性？

HTML5 引入了許多新特性，主要包括： - 語義化標簽：如 <header>、<footer>、<article>、<section> 等。 - 表單增強：新增了 <input> 類型如 email、date、range 等。 - 多媒體支持：<audio> 和 <video> 標簽。 - Canvas 和 SVG：用于繪制圖形和動畫。 - 本地存儲：localStorage 和 sessionStorage。 - Web Workers：允許在后臺運行 JavaScript 代碼。 - WebSocket：實現全雙工通信。 - Geolocation API：獲取用戶地理位置。

2. 什么是語義化標簽？為什么要使用語義化標簽？

語義化標簽是指使用具有明確含義的 HTML 標簽來描述頁面的結構和內容。例如，使用 <header> 表示頁面的頭部，使用 <footer> 表示頁面的底部。

優點： - 提高可讀性：代碼更易于理解和維護。 - SEO 優化：搜索引擎更容易理解頁面內容，提高搜索排名。 - 無障礙訪問：屏幕閱讀器等輔助工具可以更好地解析頁面內容。

3. 什么是 DOCTYPE？它的作用是什么？

DOCTYPE 是文檔類型聲明，用于告訴瀏覽器當前文檔使用的是哪種 HTML 或 XHTML 規范。它位于 HTML 文檔的最頂部。

作用： - 觸發標準模式：確保瀏覽器以標準模式渲染頁面，避免兼容性問題。 - 驗證文檔類型：幫助驗證工具檢查文檔是否符合指定的 HTML 或 XHTML 規范。

4. HTML 中的 data-* 屬性是什么？

data-* 屬性是 HTML5 引入的自定義數據屬性，允許開發者在 HTML 元素中存儲自定義數據。這些屬性可以通過 JavaScript 訪問和操作。

示例：

<div id="user" data-user-id="123" data-role="admin"></div>

const user = document.getElementById('user');
console.log(user.dataset.userId); // 輸出 "123"
console.log(user.dataset.role); // 輸出 "admin"

5. HTML 中的 meta 標簽有哪些常見用途？

meta 標簽用于提供頁面的元數據，常見的用途包括： - 字符編碼：<meta charset="UTF-8"> - 頁面描述：<meta name="description" content="頁面描述"> - 關鍵詞：<meta name="keywords" content="關鍵詞1, 關鍵詞2"> - 視口設置：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 作者信息：<meta name="author" content="作者名"> - 刷新頁面：<meta http-equiv="refresh" content="5;url=http://example.com">

6. HTML 中的 script 標簽的 async 和 defer 屬性有什么區別？

• async：腳本異步加載，加載完成后立即執行，不保證執行順序。
• defer：腳本異步加載，但在文檔解析完成后按順序執行。

區別： - async 適用于不依賴其他腳本的獨立腳本。 - defer 適用于需要按順序執行的腳本。

7. HTML 中的 iframe 標簽有什么作用？

iframe 標簽用于在當前頁面中嵌入另一個網頁。常見的用途包括： - 嵌入第三方內容：如地圖、視頻等。 - 實現跨域通信：通過 postMessage API。 - 創建沙盒環境：通過 sandbox 屬性限制嵌入頁面的行為。

8. HTML 中的 canvas 和 SVG 有什么區別？

• canvas：基于像素的繪圖 API，適合處理復雜的圖形和動畫，但無法直接操作 DOM。
• SVG：基于矢量的圖形格式，適合處理簡單的圖形和圖標，可以直接操作 DOM。

區別： - canvas 適合處理大量動態圖形，性能較高。 - SVG 適合處理靜態圖形，支持縮放和交互。

9. HTML 中的 Web Components 是什么？

Web Components 是一組允許開發者創建可重用的自定義 HTML 元素的技術，主要包括： - Custom Elements：允許定義新的 HTML 元素。 - Shadow DOM：提供封裝樣式和結構的機制。 - HTML Templates：允許定義可復用的 HTML 模板。

優點： - 組件化：提高代碼的可重用性和可維護性。 - 封裝性：避免樣式和腳本的全局污染。

10. HTML 中的 ARIA 是什么？

ARIA（Accessible Rich Internet Applications）是一組用于增強網頁可訪問性的屬性，主要用于輔助技術（如屏幕閱讀器）理解網頁內容。

常見屬性： - role：定義元素的角色，如 button、menu 等。 - aria-label：為元素提供可訪問的標簽。 - aria-hidden：隱藏元素，使其對輔助技術不可見。

CSS

1. CSS 盒模型是什么？

CSS 盒模型描述了元素在頁面中的布局方式，主要包括： - 內容區：元素的實際內容。 - 內邊距：內容區與邊框之間的空間。 - 邊框：圍繞內容和內邊距的邊界。 - 外邊距：元素與其他元素之間的空間。

盒模型類型： - 標準盒模型：width 和 height 只包括內容區。 - IE 盒模型：width 和 height 包括內容區、內邊距和邊框。

2. CSS 中的 position 屬性有哪些值？

position 屬性用于指定元素的定位方式，常見的值包括： - static：默認值，元素按照正常文檔流排列。 - relative：相對定位，元素相對于其正常位置進行偏移。 - absolute：絕對定位，元素相對于最近的定位祖先元素進行偏移。 - fixed：固定定位，元素相對于視口進行偏移。 - sticky：粘性定位，元素在滾動到特定位置時固定。

3. CSS 中的 flexbox 是什么？

flexbox 是一種一維布局模型，用于在容器內靈活地排列子元素。主要屬性包括： - display: flex：將容器設置為 flex 容器。 - flex-direction：指定主軸方向（row、column 等）。 - justify-content：指定主軸上的對齊方式。 - align-items：指定交叉軸上的對齊方式。 - flex-grow：指定子元素的放大比例。 - flex-shrink：指定子元素的縮小比例。 - flex-basis：指定子元素的初始大小。

4. CSS 中的 grid 是什么？

grid 是一種二維布局模型，用于在容器內創建復雜的網格布局。主要屬性包括： - display: grid：將容器設置為 grid 容器。 - grid-template-columns：定義列的大小和數量。 - grid-template-rows：定義行的大小和數量。 - grid-gap：定義網格之間的間距。 - grid-column 和 grid-row：指定子元素在網格中的位置。

5. CSS 中的 BEM 命名規范是什么？

BEM（Block, Element, Modifier）是一種 CSS 命名規范，用于提高代碼的可讀性和可維護性。

命名規則： - Block：獨立的組件，如 .header。 - Element：塊的一部分，如 .header__logo。 - Modifier：塊或元素的狀態，如 .header--fixed。

優點： - 模塊化：提高代碼的可重用性。 - 清晰性：明確元素之間的關系和狀態。

6. CSS 中的 偽類 和 偽元素 有什么區別？

• 偽類：用于選擇元素的特定狀態，如 :hover、:focus 等。
• 偽元素：用于創建不在 DOM 中的虛擬元素，如 ::before、::after 等。

區別： - 偽類選擇的是元素的特定狀態。 - 偽元素創建的是虛擬元素。

7. CSS 中的 z-index 是什么？

z-index 屬性用于控制元素的堆疊順序，值越大，元素越靠前。

注意： - z-index 只對定位元素（position 值為 relative、absolute、fixed 或 sticky）有效。 - 如果兩個元素的 z-index 相同，則后出現的元素會覆蓋前面的元素。

8. CSS 中的 媒體查詢 是什么？

媒體查詢 用于根據設備的特性（如屏幕寬度、分辨率等）應用不同的樣式。

示例：

@media screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

常見用途： - 響應式設計：根據屏幕大小調整布局。 - 打印樣式：為打印設備提供特定的樣式。

9. CSS 中的 動畫 和 過渡 有什么區別？

• 動畫：通過 @keyframes 定義復雜的動畫效果，可以控制多個關鍵幀。
• 過渡：通過 transition 定義簡單的狀態變化效果，只能控制開始和結束狀態。

區別： - 動畫適合復雜的、多階段的效果。 - 過渡適合簡單的、單階段的效果。

10. CSS 中的 預處理器 是什么？

CSS 預處理器是一種腳本語言，擴展了 CSS 的功能，常見的預處理器包括 Sass、Less 和 Stylus。

優點： - 變量：定義可重用的值。 - 嵌套：簡化選擇器的書寫。 - 混合：定義可重用的樣式塊。 - 函數：實現復雜的計算和邏輯。

JavaScript

1. JavaScript 中的 閉包 是什么？

閉包是指函數能夠訪問其詞法作用域中的變量，即使函數在其詞法作用域之外執行。

示例：

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const counter = outer();
console.log(counter()); // 輸出 1
console.log(counter()); // 輸出 2

優點： - 數據封裝：保護變量不被外部訪問。 - 函數工廠：創建具有特定行為的函數。

2. JavaScript 中的 原型鏈 是什么？

原型鏈是 JavaScript 實現繼承的機制，每個對象都有一個原型對象，通過 __proto__ 屬性指向其原型對象，直到 null。

示例：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}`);
};

const person = new Person('Alice');
person.sayHello(); // 輸出 "Hello, Alice"

優點： - 共享方法：減少內存占用。 - 動態繼承：可以在運行時修改原型鏈。

3. JavaScript 中的 this 是什么？

this 是函數執行時的上下文對象，其值取決于函數的調用方式。

常見情況： - 全局上下文：this 指向 window（瀏覽器）或 global（Node.js）。 - 對象方法：this 指向調用該方法的對象。 - 構造函數：this 指向新創建的對象。 - 箭頭函數：this 繼承自外層函數的 this。

4. JavaScript 中的 Promise 是什么？

Promise 是一種用于處理異步操作的對象，表示一個可能在未來完成或失敗的操作。

示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 輸出 "Success"
}).catch((error) => {
  console.error(error);
});

優點： - 鏈式調用：簡化異步操作的處理。 - 錯誤處理：通過 catch 方法統一處理錯誤。

5. JavaScript 中的 async/await 是什么？

async/await 是 Promise 的語法糖，用于簡化異步代碼的書寫。

示例：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

優點： - 同步風格：使異步代碼看起來像同步代碼。 - 錯誤處理：通過 try/catch 處理錯誤。

6. JavaScript 中的 事件循環 是什么？

事件循環是 JavaScript 處理異步操作的機制，主要包括： - 調用棧：用于存儲同步任務的執行上下文。 - 任務隊列：用于存儲異步任務的回調函數。 - 微任務隊列：用于存儲 Promise 的回調函數。

執行順序： 1. 執行同步任務。 2. 執行微任務隊列中的所有任務。 3. 執行任務隊列中的一個任務。 4. 重復上述步驟。

7. JavaScript 中的 模塊化 是什么？

模塊化是將代碼分割成獨立的模塊，每個模塊具有特定的功能，通過 import 和 export 進行依賴管理。

常見模塊化方案： - CommonJS：Node.js 使用的模塊化方案，使用 require 和 module.exports。 - ES Modules：ES6 引入的模塊化方案，使用 import 和 export。

優點： - 代碼復用：提高代碼的可重用性。 - 依賴管理：明確模塊之間的依賴關系。

8. JavaScript 中的 垃圾回收 是什么？

垃圾回收是 JavaScript 自動管理內存的機制，主要包括： - 標記清除：標記不再使用的對象并清除。 - 引用計數：記錄對象的引用次數，當引用次數為 0 時清除。

優點： - 自動管理：減少內存泄漏的風險。 - 提高效率：開發者無需手動管理內存。

9. JavaScript 中的 深拷貝 和 淺拷貝 有什么區別？

• 淺拷貝：只復制對象的引用，不復制對象本身。
• 深拷貝：復制對象及其所有嵌套對象。

示例：

const obj = { a: 1, b: { c: 2 } };

// 淺拷貝
const shallowCopy = { ...obj };
shallowCopy.b.c = 3;
console.log(obj.b.c); // 輸出 3

// 深拷貝
const deepCopy = JSON.parse(JSON.stringify(obj));
deepCopy.b.c = 4;
console.log(obj.b.c); // 輸出 3

區別： - 淺拷貝只復制一層，深拷貝復制所有層。

10. JavaScript 中的 防抖 和 節流 有什么區別？

• 防抖：在事件觸發后等待一段時間再執行，如果在這段時間內再次觸發事件，則重新計時。
• 節流：在事件觸發后立即執行，但在指定的時間間隔內只執行一次。

示例：

// 防抖
function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

// 節流
function throttle(fn, delay) {
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, arguments);
      lastTime = now;
    }
  };
}

區別： - 防抖適合處理頻繁觸發的事件，如輸入框輸入。 - 節流適合處理連續觸發的事件，如滾動事件。

前端框架

1. React 中的 虛擬 DOM 是什么？

虛擬 DOM 是 React 用于提高性能的一種機制，通過將真實的 DOM 抽象為 JavaScript 對象，減少直接操作 DOM 的次數。

優點： - 提高性能：減少 DOM 操作的次數。 - 跨平臺：可以在不同的平臺上使用相同的虛擬 DOM。

2. React 中的 組件生命周期 有哪些？

React 組件的生命周期主要包括以下幾個階段： - 掛載階段：componentDidMount - 更新階段：componentDidUpdate - 卸載階段：componentWillUnmount

注意：React 16.3 引入了新的生命周期方法，如 getDerivedStateFromProps 和 getSnapshotBeforeUpdate。

3. React 中的 Hooks 是什么？

Hooks 是 React 16.8 引入的新特性，允許在函數組件中使用狀態和生命周期方法。

常見 Hooks： - useState：用于管理狀態。 - useEffect：用于處理副作用。 - useContext：用于訪問上下文。 - useReducer：用于管理復雜狀態。

優點： - 簡化代碼：減少類組件的使用。 - 提高可讀性：使代碼更易于理解和維護。

4. Vue 中的 響應式原理 是什么？

Vue 的響應式原理是通過 Object.defineProperty 或 Proxy 監聽對象屬性的變化，并在變化時更新視圖。

優點： - 自動更新：減少手動操作 DOM 的次數。 - 提高性能：通過虛擬 DOM 減少不必要的更新