【无标题】前端面试题AI版

HTML 部分

**HTML5 有哪些新特性？**

**参考答案**：
语义化标签（如 `<header>`、`<footer>`、`<article>` 等）
本地存储（localStorage 和 sessionStorage）
音视频支持（`<audio>` 和 `<video>`）
Canvas 绘图
WebSocket 通信
表单增强（如 `input` 的 `type` 新增 `email`、`date`、`range` 等）

**什么是语义化标签？**

**参考答案**：
语义化标签是指用有意义的标签来描述内容结构，例如 `<header>` 表示页眉，`<nav>` 表示导航，`<article>` 表示文章内容等。语义化标签有助于SEO和代码可读性。

**`<meta>` 标签的作用是什么？**

**参考答案**：
`<meta>` 标签用于定义页面的元数据，例如字符集、视口设置、页面描述等。常见用法：

```html

```

CSS 部分

**盒模型是什么？**

**参考答案**：
盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。标准盒模型的宽度计算公式为：

```

宽度 = content + padding + border

```

通过 `box-sizing: border-box` 可以将盒模型设置为IE盒模型，此时宽度包括内容、内边距和边框。

**Flexbox 和 Grid 布局的区别是什么？**

**参考答案**：
Flexbox 是一维布局模型，适合处理单行或单列的布局（如导航栏、居中布局）。
Grid 是二维布局模型，适合处理复杂的网格布局（如整个页面的布局）。

**如何实现一个元素的垂直居中？**

**参考答案**：
方法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%);

}

```

**CSS 选择器的优先级是如何计算的？**

**参考答案**：
优先级从高到低依次为：

`!important`
内联样式（如 `style="color: red;"`）
ID 选择器（如 `#id`）
类选择器、属性选择器、伪类（如 `.class`、`[type="text"]`、`:hover`）
元素选择器、伪元素（如 `div`、`::before`）
**什么是BFC（块级格式化上下文）？**

**参考答案**：
BFC 是一个独立的渲染区域，内部元素的布局不会影响外部元素。触发 BFC 的条件包括：
`float` 不为 `none`
`position` 为 `absolute` 或 `fixed`
`display` 为 `inline-block`、`table-cell`、`flex` 等
`overflow` 不为 `visible`

JavaScript 部分

**闭包是什么？**

**参考答案**：
闭包是指函数可以访问其词法作用域中的变量，即使函数在其词法作用域之外执行。例如：

```javascript

function outer() {

let count = 0;

return function inner() {

count++;

console.log(count);

};

}

const fn = outer();

fn(); // 输出 1

fn(); // 输出 2

```

**事件循环（Event Loop）是什么？**

**参考答案**：
事件循环是 JavaScript 处理异步任务的机制。它分为宏任务（如 `setTimeout`、`setInterval`）和微任务（如 `Promise.then`）。事件循环的执行顺序为：

执行同步代码。
执行所有微任务。
执行一个宏任务。
重复上述步骤。
**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);

}

```

**什么是原型链？**

**参考答案**：
原型链是 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"

```

**如何实现深拷贝？**

**参考答案**：
使用递归或 `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;

}

```

框架部分

**React 和 Vue 的区别是什么？**

**参考答案**：
React 使用 JSX，Vue 使用模板语法。
React 是单向数据流，Vue 是双向数据绑定。
React 生态更丰富，Vue 更易上手。

**React Hooks 的作用是什么？**

**参考答案**：
Hooks 是 React 16.8 引入的特性，用于在函数组件中使用状态和生命周期。例如：

```javascript

const [count, setCount] = useState(0);

useEffect(() => {

console.log("Component mounted");

}, []);

```

**Vue 中的双向绑定是如何实现的？**

**参考答案**：
Vue 使用 `v-model` 实现双向绑定，其原理是通过 `Object.defineProperty` 或 `Proxy` 监听数据变化并更新视图。

**什么是虚拟DOM？**

**参考答案**：
虚拟DOM是一个轻量级的JavaScript对象，用于描述真实DOM的结构。通过对比新旧虚拟DOM的差异，可以高效地更新真实DOM。

工具与工程化

**Webpack 的作用是什么？**

**参考答案**：
Webpack 是一个模块打包工具，用于将多个模块打包成一个或多个文件。它支持代码分割、加载器（loader）和插件（plugin）。

**如何优化前端性能？**

**参考答案**：
使用CDN加速资源加载。
压缩代码和图片。
使用懒加载和代码分割。
减少HTTP请求。
使用缓存（如Service Worker）。

**什么是Tree Shaking？**

**参考答案**：
Tree Shaking 是一种通过静态分析移除未使用代码的优化技术，通常用于ES6模块。

**如何解决跨域问题？**

**参考答案**：
使用CORS（跨域资源共享）。
使用JSONP（仅限GET请求）。
使用代理服务器。

算法与数据结构

**手写一个快速排序算法。**

**参考答案**：

```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)];

}

```

**如何判断一个链表是否有环？**

**参考答案**：

```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;

}

```

**实现一个函数，将字符串中的空格替换为`%20`。**

**参考答案**：

```javascript

function replaceSpace(str) {

return str.replace(/\s/g, "%20");

}

```

开放性问题

**你如何理解前端工程化？**

**参考答案**：
前端工程化是指通过工具和流程规范化前端开发，包括模块化、组件化、自动化构建、代码规范等。

**你最近学习了哪些前端新技术？**

**参考答案**：
例如：WebAssembly、Web Components、Vite、Tailwind CSS 等。

**如何设计一个可复用的前端组件？**

**参考答案**：
通过解耦逻辑和视图、使用插槽（slot）或 props 传递数据、提供默认值和配置项等方式设计高复用性组件。

附加题（选做）

**请实现一个简单的React/Vue组件。**

**参考答案**（React 示例）：

```javascript

function Counter() {

const [count, setCount] = useState(0);

return (

<div>

<p>{count}</p>

<button onClick={() => setCount(count + 1)}>Increment</button>

</div>

);

}

```

**请解释HTTP/2和HTTP/1.1的区别。**

**参考答案**：
HTTP/2 支持多路复用、头部压缩、服务器推送等特性，性能优于 HTTP/1.1。

**如何实现一个前端路由？**

**参考答案**：

```javascript

class Router {

constructor() {

this.routes = {};

window.addEventListener("hashchange", this.handleHashChange.bind(this));

}

addRoute(path, callback

【无标题】前端面试题AI版

**HTML 部分**

**CSS 部分**

**JavaScript 部分**

**框架部分**

**工具与工程化**

**算法与数据结构**

**开放性问题**

**附加题（选做）**

HTML 部分

CSS 部分

JavaScript 部分

框架部分

工具与工程化

算法与数据结构

开放性问题

附加题（选做）