【无标题】前端面试题AI版
### **HTML 部分**
1. **HTML5 有哪些新特性？**
- **参考答案**：
- 语义化标签（如 `<header>`、`<footer>`、`<article>` 等）
- 本地存储（localStorage 和 sessionStorage）
- 音视频支持（`<audio>` 和 `<video>`）
- Canvas 绘图
- WebSocket 通信
- 表单增强（如 `input` 的 `type` 新增 `email`、`date`、`range` 等）
2. **什么是语义化标签？**
- **参考答案**：
- 语义化标签是指用有意义的标签来描述内容结构，例如 `<header>` 表示页眉，`<nav>` 表示导航，`<article>` 表示文章内容等。语义化标签有助于SEO和代码可读性。
3. **`<meta>` 标签的作用是什么？**
- **参考答案**：
- `<meta>` 标签用于定义页面的元数据，例如字符集、视口设置、页面描述等。常见用法：
```html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这是一个示例页面">
```
---
### **CSS 部分**
1. **盒模型是什么？**
- **参考答案**：
- 盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。标准盒模型的宽度计算公式为：
```
宽度 = content + padding + border
```
通过 `box-sizing: border-box` 可以将盒模型设置为IE盒模型，此时宽度包括内容、内边距和边框。
2. **Flexbox 和 Grid 布局的区别是什么？**
- **参考答案**：
- Flexbox 是一维布局模型，适合处理单行或单列的布局（如导航栏、居中布局）。
- Grid 是二维布局模型，适合处理复杂的网格布局（如整个页面的布局）。
3. **如何实现一个元素的垂直居中？**
- **参考答案**：
- 方法1：使用 Flexbox
```css
.container {
display: flex;
justify-content: center;
align-items: center;
}
```
- 方法2：使用 Grid
```css
.container {
display: grid;
place-items: center;
}
```
- 方法3：使用绝对定位和 transform
```css
.container {
position: relative;
}
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
4. **CSS 选择器的优先级是如何计算的？**
- **参考答案**：
- 优先级从高到低依次为：
1. `!important`
2. 内联样式（如 `style="color: red;"`）
3. ID 选择器（如 `#id`）
4. 类选择器、属性选择器、伪类（如 `.class`、`[type="text"]`、`:hover`）
5. 元素选择器、伪元素（如 `div`、`::before`）
5. **什么是BFC（块级格式化上下文）？**
- **参考答案**：
- BFC 是一个独立的渲染区域，内部元素的布局不会影响外部元素。触发 BFC 的条件包括：
- `float` 不为 `none`
- `position` 为 `absolute` 或 `fixed`
- `display` 为 `inline-block`、`table-cell`、`flex` 等
- `overflow` 不为 `visible`
---
### **JavaScript 部分**
1. **闭包是什么？**
- **参考答案**：
- 闭包是指函数可以访问其词法作用域中的变量，即使函数在其词法作用域之外执行。例如：
```javascript
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
};
}
const fn = outer();
fn(); // 输出 1
fn(); // 输出 2
```
2. **事件循环（Event Loop）是什么？**
- **参考答案**：
- 事件循环是 JavaScript 处理异步任务的机制。它分为宏任务（如 `setTimeout`、`setInterval`）和微任务（如 `Promise.then`）。事件循环的执行顺序为：
1. 执行同步代码。
2. 执行所有微任务。
3. 执行一个宏任务。
4. 重复上述步骤。
3. **Promise 和 async/await 的区别是什么？**
- **参考答案**：
- `Promise` 是一种处理异步操作的对象，而 `async/await` 是基于 `Promise` 的语法糖，使异步代码看起来像同步代码。例如：
```javascript
// Promise
fetchData().then(response => console.log(response));
// async/await
async function getData() {
const response = await fetchData();
console.log(response);
}
```
4. **什么是原型链？**
- **参考答案**：
- 原型链是 JavaScript 实现继承的机制。每个对象都有一个 `__proto__` 属性指向其原型对象，原型对象也有自己的原型，直到 `null`。例如：
```javascript
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log(`Hello, ${this.name}`);
};
const person = new Person("Alice");
person.sayHello(); // 输出 "Hello, Alice"
```
5. **如何实现深拷贝？**
- **参考答案**：
- 使用递归或 `JSON.parse(JSON.stringify(obj))`（注意：后者无法处理函数和循环引用）。例如：
```javascript
function deepCopy(obj) {
if (typeof obj !== "object" || obj === null) return obj;
const newObj = Array.isArray(obj) ? [] : {};
for (let key in obj) {
newObj[key] = deepCopy(obj[key]);
}
return newObj;
}
```
---
### **框架部分**
1. **React 和 Vue 的区别是什么？**
- **参考答案**：
- React 使用 JSX，Vue 使用模板语法。
- React 是单向数据流，Vue 是双向数据绑定。
- React 生态更丰富，Vue 更易上手。
2. **React Hooks 的作用是什么？**
- **参考答案**：
- Hooks 是 React 16.8 引入的特性，用于在函数组件中使用状态和生命周期。例如：
```javascript
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Component mounted");
}, []);
```
3. **Vue 中的双向绑定是如何实现的？**
- **参考答案**：
- Vue 使用 `v-model` 实现双向绑定，其原理是通过 `Object.defineProperty` 或 `Proxy` 监听数据变化并更新视图。
4. **什么是虚拟DOM？**
- **参考答案**：
- 虚拟DOM是一个轻量级的JavaScript对象，用于描述真实DOM的结构。通过对比新旧虚拟DOM的差异，可以高效地更新真实DOM。
---
### **工具与工程化**
1. **Webpack 的作用是什么？**
- **参考答案**：
- Webpack 是一个模块打包工具，用于将多个模块打包成一个或多个文件。它支持代码分割、加载器（loader）和插件（plugin）。
2. **如何优化前端性能？**
- **参考答案**：
- 使用CDN加速资源加载。
- 压缩代码和图片。
- 使用懒加载和代码分割。
- 减少HTTP请求。
- 使用缓存（如Service Worker）。
3. **什么是Tree Shaking？**
- **参考答案**：
- Tree Shaking 是一种通过静态分析移除未使用代码的优化技术，通常用于ES6模块。
4. **如何解决跨域问题？**
- **参考答案**：
- 使用CORS（跨域资源共享）。
- 使用JSONP（仅限GET请求）。
- 使用代理服务器。
---
### **算法与数据结构**
1. **手写一个快速排序算法。**
- **参考答案**：
```javascript
function quickSort(arr) {
if (arr.length <= 1) return arr;
const pivot = arr[0];
const left = [];
const right = [];
for (let i = 1; i < arr.length; i++) {
if (arr[i] < pivot) left.push(arr[i]);
else right.push(arr[i]);
}
return [...quickSort(left), pivot, ...quickSort(right)];
}
```
2. **如何判断一个链表是否有环？**
- **参考答案**：
```javascript
function hasCycle(head) {
let slow = head;
let fast = head;
while (fast && fast.next) {
slow = slow.next;
fast = fast.next.next;
if (slow === fast) return true;
}
return false;
}
```
3. **实现一个函数，将字符串中的空格替换为`%20`。**
- **参考答案**：
```javascript
function replaceSpace(str) {
return str.replace(/\s/g, "%20");
}
```
---
### **开放性问题**
1. **你如何理解前端工程化？**
- **参考答案**：
- 前端工程化是指通过工具和流程规范化前端开发，包括模块化、组件化、自动化构建、代码规范等。
2. **你最近学习了哪些前端新技术？**
- **参考答案**：
- 例如：WebAssembly、Web Components、Vite、Tailwind CSS 等。
3. **如何设计一个可复用的前端组件？**
- **参考答案**：
- 通过解耦逻辑和视图、使用插槽（slot）或 props 传递数据、提供默认值和配置项等方式设计高复用性组件。
---
### **附加题（选做）**
1. **请实现一个简单的React/Vue组件。**
- **参考答案**（React 示例）：
```javascript
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
```
2. **请解释HTTP/2和HTTP/1.1的区别。**
- **参考答案**：
- HTTP/2 支持多路复用、头部压缩、服务器推送等特性，性能优于 HTTP/1.1。
3. **如何实现一个前端路由？**
- **参考答案**：
```javascript
class Router {
constructor() {
this.routes = {};
window.addEventListener("hashchange", this.handleHashChange.bind(this));
}
addRoute(path, callback