前端面试常见问题及解析大纲
核心技术篇
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;}
}
如何使用DROP TABLE删除表？)
