2025年在职前端面试题汇总（求职必备）

最新推荐文章于 2025-08-09 21:35:33 发布

AIWeb前端

最新推荐文章于 2025-08-09 21:35:33 发布

阅读量658

点赞数 26

CC 4.0 BY-SA版权

分类专栏：前端技术专栏文章标签：前端 node.js typescript json angular.js react.js vue.js

公众号：猫头虎技术团队

本文链接：https://blog.csdn.net/libin9iOak/article/details/150000244

前端技术专栏专栏收录该内容

30 篇文章

订阅专栏

2025年在职前端面试题汇总（求职必备）

导读：2025年前端岗位竞争激烈，本篇技术博客从核心概念、原理、实践到代码示例，全方位深入讲解 JavaScript、HTML、CSS、Vue、ES6 等面试高频考点，帮助你系统梳理知识、突出实战经验，赢在面试。

在这里插入图片描述

JavaScript 深度解析
HTML5 特性与优化
CSS 布局、选择器与性能
Vue 全家桶实战
ES6+ 语法与异步编程
常见 UI 框架与扩展（ElementUI / jQuery）
版本管理与敏捷开发
网络协议与安全
Webpack 与前端工程化
页面性能优化
Node.js 与后端交互
Linux 常用命令与运维基础
计算机原理简述
移动端与大屏可视化
算法与数据结构

一、JavaScript 深度解析

1. 闭包（Closure）

定义：闭包是指内层函数可以访问外层函数的变量，并在外层函数执行完毕后，依然保留对这些变量的引用。

function outer() {
  let count = 0;
  return function inner() {
    count += 1;
    console.log(count);
  };
}
const fn = outer();
fn(); // 1
fn(); // 2

优点：

隔离作用域，保护私有变量
可实现函数工厂、模块化
用于回调、事件处理、数据缓存

缺点：

容易造成内存泄漏
调试与维护成本高

优化策略：

使用后及时释放，例如手动将引用置为 null
合理避免过度嵌套

2. 浅拷贝与深拷贝

拷贝类型	作用	方法示例
浅拷贝	复制第一层属性	`Object.assign({}, obj)`，`[...arr]`
深拷贝	复制所有嵌套层级	`JSON.parse(JSON.stringify(obj))` `lodash.cloneDeep(obj)`

缺陷：JSON 方法无法拷贝函数、undefined、会丢失原型链。

// 自定义深拷贝递归示例
function deepClone(target, map = new WeakMap()) {
  if (typeof target !== 'object' || target === null) return target;
  if (map.has(target)) return map.get(target);
  const clone = Array.isArray(target) ? [] : {};
  map.set(target, clone);
  for (const key in target) {
    if (target.hasOwnProperty(key)) {
      clone[key] = deepClone(target[key], map);
    }
  }
  return clone;
}

3. 类型检测与空对象判断

类型检测：

Object.prototype.toString.call(value); // '[object Array]'、'[object Object]' …
typeof 索引基本类型； instanceof 检测构造函数；

空对象：

Object.keys(obj).length === 0;
JSON.stringify(obj) === '{}';

4. this 指向

默认绑定：普通函数，指向全局/undefined（严格模式）。
隐式绑定：obj.method()，指向调用者 obj。
显示绑定：call、apply、bind。
new 绑定：构造函数，指向新实例。

function greet(g) { console.log(this.name + ' ' + g); }
const ctx = { name: '张三' };
greet.call(ctx, '你好');  // 张三 你好
greet.apply(ctx, ['早上好']);  // 张三 早上好
const bound = greet.bind(ctx, '下午好');
bound(); // 张三 下午好

5. 存储方案对比

存储方式	大小	生命周期	可读写位置
`localStorage`	~5MB	持久	所有同源页面
`sessionStorage`	~5MB	会话（关闭即清）	当前标签页
`Cookie`	~4KB	自定义过期	HTTP 请求头 + JS 访问
服务端 Session	——	服务端控制	服务端 + 客户端 Cookie 标识

6. 常用数组方法

改变原数组：push、pop、shift、unshift、sort、reverse、splice
不改变原数组：map、filter、reduce、slice、concat
去重：[...new Set(arr)]

const arr = [1,2,2,3];
const uniq = Array.from(new Set(arr)); // [1,2,3]

7. 事件流与委托

事件流模型：捕获 → 目标 → 冒泡
事件委托：将事件绑定在父层，通过 event.target 判断具体子元素

document.querySelector('#list').addEventListener('click', e => {
  if (e.target.matches('li')) {
    console.log('点击了', e.target.textContent);
  }
});

8. 原型链与继承

原型链：对象访问属性时，会沿着 __proto__ 链查找。
ES5 继承：原型继承、构造函数继承、组合继承。
ES6 Class：class Child extends Parent {}

class Parent {
  constructor(name) { this.name = name; }
  hello() { console.log('Hello ' + this.name); }
}
class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}
const c = new Child('李四', 18);
c.hello(); // Hello 李四

9. 防抖（Debounce）与节流（Throttle）

防抖：延迟执行，适合输入搜索
节流：固定频率执行，适合滚动、resize

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
function throttle(fn, interval) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last >= interval) {
      fn.apply(this, args);
      last = now;
    }
  };
}

10. 作用域（Scope）

全局作用域、函数作用域、块级作用域（let/const）。
执行上下文与作用域链：变量解析顺序 .

11. 字符串与控制语句

常用方法：slice、substring、replace、split、trim。不改变原值。
break：结束循环；continue：跳过本次循环；return：结束函数并返回。

二、HTML5 特性与优化

1. 重绘（Repaint） vs 重排（Reflow）

触发重绘：样式变化，如 color、background。
触发重排：布局变化，如 width、margin。

优化：

批量修改 DOM；
使用文档碎片、visibility 替代 display；
减少读取强制同步布局属性（如 offsetWidth）。

2. 语义化标签

<header>、<nav>、<main>、<section>、<article>、<footer>。
优势：可访问性增强、SEO 更友好、代码可读性提升。

3. 新增 API

本地存储：localStorage、sessionStorage；
Canvas / SVG：绘图、交互；
Web Worker：子线程计算；
Form 特性：<input type="date">、<datalist>；
拖放 API：dragstart、drop。

三、CSS 布局、选择器与性能

1. 自适应居中方案

绝对定位+margin：

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  max-width: 90%; max-height: 90%;
}

Flex 布局：

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal { width: 300px; }

Grid 布局：

.wrapper { display: grid; place-items: center; }

2. 选择器与优先级

类型：ID > 类/伪类 > 标签/伪元素。
继承：文本属性可继承，布局属性不可。
权重计算：inline > #id > .class, :pseudo-class > tag。

3. 伪类 vs 伪元素

:hover、:nth-child()（伪类）;
::before、::after（伪元素）;
示例：
```
.btn::before { content: '▶'; }
```

4. CSS 性能优化

合并/精简选择器；
减少自定义字体请求；
使用硬件加速（transform: translateZ(0)）；
避免过度嵌套与 @import。

四、Vue 全家桶实战

1. SPA / SSR / CSR

SPA：单页应用；
SEO 劣势：需 SSR 或 Prerender；
Nuxt.js：开箱 SSR 支持；

2. 组件化与通信

Props：父 → 子；
$emit：子 → 父；
Event Bus：全局事件；
Vuex：集中式状态管理；
Provide/Inject：祖孙组件；

3. 响应式原理

Vue 2：Object.defineProperty；
Vue 3：Proxy；
异步更新队列，批量 DOM 更新。

4. 路由 & 状态管理

vue-router：动态路由、嵌套路由、路由守卫；
Vuex：State、Getters、Mutations、Actions、Modules；

5. 性能优化

路由懒加载、组件按需引入；
列表渲染 key；
v-if/v-show 权衡；
keep-alive 缓存。

五、ES6+ 语法与异步编程

1. 模块化

import / export；
Tree-shaking 支持。

2. Promise / async-await

Promise：链式调用；
async/await：语法糖，可读性强；

async function fetchData() {
  const [a, b] = await Promise.all([api1(), api2()]);
  const c = await api3(a, b);
}

3. Generator 与协程

function*；
yield 控制流；

4. Proxy vs defineProperty

Proxy：拦截整个对象；
defineProperty：需对单个属性。

5. 新增数据结构 & 语法

Set、Map、WeakMap、WeakSet；
解构赋值、模板字符串、扩展运算符；
箭头函数、默认参数、rest/spread。

六、常见 UI 框架与扩展

ElementUI

全局主题定制：通过 theme-chalk 包或自定义 SCSS 变量覆盖样式。
样式穿透：在 Vue 单文件组件中使用深度选择器 /deep/ 或 ::v-deep 覆盖内部样式。
继承扩展：
1. HOC（高阶组件）：包装原组件，向其注入额外属性与方法；
2. Slot 插槽：利用作用域插槽调整内部布局与行为；
3. mixin：将通用逻辑抽取复用。

<template>
  <el-button v-bind="$attrs" @click="$listeners.click">
    <slot />
  </el-button>
</template>
<script>
export default {
  name: 'MyButton',
  inheritAttrs: false,
};
</script>

jQuery

DOM 操作：$('.class')、.find()、.eq()。
事件绑定：.on('click', handler)、.off()。
动画效果：.fadeIn()、.slideUp()、.animate()。
Ajax：$.ajax()、$.get()、$.post()。

$('#list').on('click', 'li', function() {
  console.log('选中：', $(this).text());
});

七、版本管理与敏捷开发

Git 常用操作

代码拉取与推送：

git clone <repo>
git pull origin main
git push origin feature-branch

分支管理：
创建分支：git checkout -b feature-x
合并：git merge feature-x
回退：git reset --soft <commit> / --hard
暂存：git stash / git stash pop
协作流程：Fork → Pull Request → Code Review → Merge。

敏捷开发流程

迭代计划：产品需求拆解、优先级排序；
日常站立：汇报进度、风险、阻碍；
评审与回顾：Sprint 评审、Retrospective；
持续集成：自动化测试、CI/CD。

八、网络协议与安全

HTTP vs HTTPS

HTTP：明文传输，端口 80；
HTTPS：SSL/TLS 加密，端口 443；
握手过程：TCP 3 次握手 + TLS 9 包交换。

常见状态码

类别	常见码	含义
2xx	200	请求成功
3xx	301/302	重定向
4xx	400/404	客户端错误
5xx	500	服务器内部错误

TCP vs UDP

特性	TCP	UDP
连接	面向连接	无连接
可靠性	高(重传、校验)	不保证可靠交付
适用	文件传输、Web 请求	实时通信、视频直播
开销	头部 20 字节	头部 8 字节

九、Webpack 与前端工程化

核心概念

Entry：入口文件；
Output：输出配置；
Loader：处理非 JS 文件；
Plugin：扩展功能，如打包优化、环境变量注入。

优化配置

Code Splitting：entry.splitChunks；
Tree Shaking：ES6 模块；
Cache：[contenthash] 缓存 busting；
并行编译：thread-loader、HappyPack；
Source Map：开发环境 eval-source-map，生产环境 source-map。

十、页面性能优化

分析工具

Chrome DevTools：Network、Performance、Memory；
Lighthouse 报告、WebPageTest。

优化手段

资源管理：压缩、合并 JS/CSS，图片 WebP；
缓存策略：Cache-Control、Service Worker；
懒加载：动态 import()、Intersection Observer；
关键渲染路径：内联关键 CSS，延迟非关键脚本；
减少重排重绘：批量 DOM 更新，避免读取强制布局属性；

十一、Node.js 与后端交互

常用中间件

express：Web 框架；
cors：跨域；
body-parser：解析请求体；
jsonwebtoken：JWT 验证；
multer：文件上传。

数据库对接

MongoDB：mongoose ODM；
MySQL：sequelize ORM；

// Express 示例
const express = require('express');
const app = express();
app.use(require('cors')());
app.use(express.json());

app.post('/login', async (req, res) => {
// 验证用户，签发 JWT
});

十二、Linux 常用命令与运维基础

操作	命令示例	说明
列表	`ls -al`	显示详细列表
查找	`find / -name "*.js"`	按名称查找
文本搜索	`grep -R "keyword" .`	递归搜索
压缩/解压	`tar -zxvf file.tar.gz`	打包 & 解包
权限	`chmod 755 file`	修改文件权限
进程	`ps aux \| grep node`	查看并过滤进程
管理	`kill -9 <pid>`	强制结束

十三、计算机原理简述

进程 vs 线程：
- 进程：资源分配单位；
- 线程：CPU 调度单位，共享进程资源；
内存管理：栈 (Stack)、堆 (Heap)；
网络模型：OSI 七层 & TCP/IP 四层。

十四、移动端与大屏可视化

响应式布局

Viewport 设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

相对单位：%、vw、vh；
Flex / Grid 结合 Media Queries。

数据可视化

Canvas / SVG / D3.js：自由绘制图表；
ECharts / Chart.js：开箱即用；
定时刷新：setInterval(fetchData, interval) 或 WebSocket 实时推送。

十五、算法与数据结构

常见数据结构：数组、链表、栈、队列、树、图、哈希表；
算法范式：排序、搜索、递归、分治、动态规划；
实践平台：LeetCode、LintCode、CodeSignal。

完
本部分涵盖 UI 框架、协作流程、网络协议、工程化、运维、原理、大屏与算法，助你面试中全场发挥！

2025年在职前端面试题汇总（求职必备）

2025年在职前端面试题汇总（求职必备）

目录

一、JavaScript 深度解析

1. 闭包（Closure）

2. 浅拷贝与深拷贝

3. 类型检测与空对象判断

4. this 指向

5. 存储方案对比

6. 常用数组方法

7. 事件流与委托

8. 原型链与继承

9. 防抖（Debounce）与节流（Throttle）

10. 作用域（Scope）

11. 字符串与控制语句

二、HTML5 特性与优化

1. 重绘（Repaint） vs 重排（Reflow）

2. 语义化标签

3. 新增 API

三、CSS 布局、选择器与性能

1. 自适应居中方案

2. 选择器与优先级

3. 伪类 vs 伪元素

4. CSS 性能优化

四、Vue 全家桶实战

1. SPA / SSR / CSR

2. 组件化与通信

3. 响应式原理

4. 路由 & 状态管理

5. 性能优化

五、ES6+ 语法与异步编程

1. 模块化

2. Promise / async-await

3. Generator 与协程

4. Proxy vs defineProperty

5. 新增数据结构 & 语法

六、常见 UI 框架与扩展

ElementUI

jQuery

七、版本管理与敏捷开发

Git 常用操作

敏捷开发流程

八、网络协议与安全

HTTP vs HTTPS

常见状态码

TCP vs UDP

九、Webpack 与前端工程化

核心概念

优化配置

十、页面性能优化

分析工具

优化手段

十一、Node.js 与后端交互

常用中间件

数据库对接

十二、Linux 常用命令与运维基础

十三、计算机原理简述

十四、移动端与大屏可视化

响应式布局

数据可视化

十五、算法与数据结构