前端面試常見問題及解析大綱

核心技術篇

HTML相關問題

1. HTML5新特性解析

• 語義化標簽（<header>、<section>等）的作用與示例
• 本地存儲（localStorage與sessionStorage）的差異

localStorage.setItem('key', 'value');
console.log(localStorage.getItem('key')); // 輸出 'value'

2. 跨域問題與解決方案

• CORS機制及服務器端配置示例
• JSONP原理及代碼實現

function handleResponse(data) {console.log(data);
}
const script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
document.body.appendChild(script);

---

CSS相關問題

1. 盒模型詳解

• 標準模型與怪異模型的區別
• 通過box-sizing屬性控制

.box {box-sizing: border-box; /* 寬度包含padding和border */
}

2. Flex布局實戰

• 主軸與交叉軸概念
• 常見屬性如justify-content、align-items的應用

.container {display: flex;justify-content: center;
}

---

JavaScript核心問題

1. 閉包與作用域鏈

• 閉包的內存泄漏風險及規避方法

function outer() {let count = 0;return function() {return ++count;};
}
const counter = outer();
counter(); // 1

2. Promise與異步編程

• 手寫Promise.all實現

Promise.myAll = function(promises) {return new Promise((resolve, reject) => {let results = [];promises.forEach(promise => {promise.then(res => {results.push(res);if (results.length === promises.length) resolve(results);}).catch(reject);});});
};

---

框架篇

React高頻問題

1. Virtual DOM diff算法

• Key屬性的重要性及優化策略

2. Hooks使用規范

• useEffect依賴項數組的注意事項

useEffect(() => {fetchData();
}, [id]); // 僅當id變化時執行

---

Vue核心考點

1. 響應式原理

• Object.defineProperty與Proxy的對比

2. 生命周期鉤子

• created與mounted階段的數據操作差異

---

工程化篇

Webpack優化策略

• Tree Shaking生效條件
• 分包加載配置示例

optimization: {splitChunks: {chunks: 'all',},
}

---

算法與網絡

1. 防抖與節流實現

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

2. HTTP/2特性

• 多路復用與頭部壓縮機制

---

實戰案例分析

1. 性能優化方案

• 圖片懶加載實現

const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {entry.target.src = entry.target.dataset.src;observer.unobserve(entry.target);}});
});
document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));

前端面試題技術知識點大綱

HTML 部分

• HTML5 新特性
• 語義化標簽的作用
• 跨域問題及解決方案
• 本地存儲（LocalStorage、SessionStorage、Cookie）
• SEO 優化技巧

<!-- 語義化標簽示例 -->
<header><nav><a href="/">Home</a></nav>
</header>
<main><article><h1>Article Title</h1></article>
</main>
<footer><p>Copyright 2023</p>
</footer>

JavaScript 部分

• 閉包原理及應用場景
• 原型鏈與繼承
• 事件循環機制
• ES6+ 新特性（Promise、async/await、箭頭函數等）
• 防抖與節流實現

// 防抖函數實現
function debounce(func, delay) {let timer;return function() {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, arguments);}, delay);};
}

Vue 部分

• 響應式原理
• 生命周期鉤子函數
• 組件通信方式
• Vuex 核心概念
• Vue Router 實現原理

// Vue 組件通信示例
// 父組件
<template><child-component @custom-event="handleEvent" />
</template>// 子組件
methods: {triggerEvent() {this.$emit('custom-event', data);}
}

UniApp 部分

• 跨平臺開發原理
• 條件編譯使用場景
• 頁面路由管理
• 原生插件開發流程
• 性能優化方案

// 條件編譯示例
// #ifdef H5
console.log('只在H5平臺執行');
// #endif

React 部分

• Virtual DOM 原理
• Hooks 使用規則
• 狀態管理方案對比（Redux、MobX）
• Fiber 架構理解
• 高階組件應用

// React Hooks 示例
import { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;}, [count]);
}

TypeScript 部分

• 類型系統優勢
• 接口與類型別名區別
• 泛型應用場景
• 裝飾器原理
• 模塊聲明方式

// 泛型示例
function identity<T>(arg: T): T {return arg;
}let output = identity<string>("myString");

綜合問題

• 前端性能優化方案
• Web 安全防護措施
• 前端工程化實踐
• 微前端架構理解
• 常見設計模式應用

// 性能優化示例：虛擬列表
// 僅渲染可視區域內的列表項
function VirtualList({ items, itemHeight, visibleCount }) {const [startIndex, setStartIndex] = useState(0);// 計算需要渲染的itemsconst visibleItems = items.slice(startIndex, startIndex + visibleCount);return (<div style={{ height: items.length * itemHeight }}><div style={{ transform: `translateY(${startIndex * itemHeight}px)` }}>{visibleItems.map(item => (<div key={item.id} style={{ height: itemHeight }}>{item.content}</div>))}</div></div>);
}

實戰案例分析

• 復雜狀態管理方案設計
• 大型項目架構設計
• 性能問題排查流程
• 組件庫設計原則
• 新技術調研方法論

// 狀態管理方案示例
interface AppState {user: User | null;loading: boolean;
}const initialState: AppState = {user: null,loading: false
};function reducer(state: AppState, action: Action): AppState {switch(action.type) {case 'SET_USER':return { ...state, user: action.payload };case 'SET_LOADING':return { ...state, loading: action.payload };default:return state;}
}