前端八股文面经大全：携程前端暑期实习一面（2026-05-14）·面经深度解析

前言

大家好，我是木斯佳。

相信很多人都感受到了，在AI浪潮的席卷之下，前端领域的门槛在变高，纯粹的"增删改查"岗位正在肉眼可见地减少。曾经热闹非凡的面经分享，如今也沉寂了许多。但我们都知道，市场的潮水退去，留下的才是真正在踏实准备、努力沉淀的人。学习的需求，从未消失，只是变得更加务实和深入。

这个专栏的初衷很简单：拒绝过时的、流水线式的PDF引流贴，专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上，尝试从面试官的角度去拆解问题背后的逻辑，而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招，目标是中大厂还是新兴团队，只要是真实发生、有价值的面试经历，我都会在这个专栏里为你沉淀下来。专栏快速地址

温馨提示：市面上的面经鱼龙混杂，甄别真伪、把握时效，是我们对抗内卷最有效的武器。

面经原文内容

📍面试公司：携程

🕐面试时间：近期

💻面试岗位：前端暑期实习一面

⏱️面试时长：30分钟（无手撕）

❓面试问题：

讲讲原型链
用过的es6新特性
es7新特性
为什么要用typescript，怎么用的
vue2、vue3的区别，技术演进
components、utils、hooks的区别，实现一个功能，应该用三者中的哪一个，判断依据是什么
用过webpack吗为什么用vite
tree shaking 代码分割的原理
说说按需加载
esm和cjs区别
sass和less区别为什么用sass
node用过吗，怎么用的，中间件
洋葱模型
讲讲项目性能优化
chunk是什么，你们用的什么命名方式，chunk的命名有什么具体含义
ai怎么用的
claude code用的什么套餐价格
页面空白然后报错，怎么和ai交互修复bug，怎么保证他修的是对的呢
印象比较深的bug，ai帮你解决的
最近学了什么新技术

反问

岗位对候选人的要求
对面技术栈（react）
给我的建议

来源：牛客网牛客410201986号

💡 木木有话说（刷前先看）

没有新题，收录补充。

📝 携程前端暑期实习一面·深度解析

🎯 面试整体画像

维度	特征
面试风格	基础全面型 + 工程化深挖型 + AI协作实战型
难度评级	⭐⭐⭐⭐（四星，覆盖面广，工程化细节多）
考察重心	JS基础、ES6/7、Vue原理、模块化、构建工具、Node、AI协作
特殊之处	问到了Claude Code套餐价格，非常细节；AI协作部分考察如何验证AI修复的正确性

🔍 逐题深度解析

一、原型链

回答思路：参考之前面经。

核心要点：

每个对象都有__proto__指向其原型
每个函数都有prototype属性
属性查找沿原型链向上，直到Object.prototype.__proto__ === null

二、用过的ES6新特性

回答思路：列举5-8个常用特性。

let / const
箭头函数
模板字符串
解构赋值
展开运算符（...）
Promise
class语法
模块化（import/export）
Set / Map
Symbol

三、ES7新特性

ES7（ES2016）新增：

Array.prototype.includes()：判断数组是否包含某元素
指数运算符（**）：2 ** 3 === 8

ES8（ES2017）（可补充）：

async/await
Object.values() / Object.entries()
字符串补全：padStart() / padEnd()

四、为什么要用TypeScript，怎么用的

为什么用TS：

静态类型检查：编译时发现错误，减少运行时bug
代码可读性：类型即文档，IDE智能提示
重构安全：修改类型定义，编译器自动提示所有引用处
大型项目必备：团队协作时降低沟通成本

怎么用的：

为API响应定义interface
为函数参数和返回值添加类型
使用unknown替代any
配置tsconfig.json（strict: true）

五、Vue2和Vue3的区别及技术演进

回答思路：参考之前面经。

维度	Vue2	Vue3
响应式	defineProperty	Proxy
API风格	Options API	Composition API
TypeScript	弱	强
体积	大	小（tree-shaking）
性能	初始化递归	懒递归

技术演进：从Options API到Composition API，解决了逻辑复用困难、代码组织散乱的问题。

六、components、utils、hooks的区别及选择依据

类型	职责	特点
components	UI渲染	可复用视图单元，接收props，可包含自己的状态
utils	纯函数工具	无副作用，输入输出确定，如时间格式化、数据转换
hooks	逻辑封装	可复用的状态逻辑（Vue composables / React hooks）

选择依据：

涉及UI渲染 → components
纯函数、无副作用 → utils
封装状态逻辑（如请求、缓存）→ hooks

七~八：Webpack vs Vite & Tree Shaking

为什么用Vite：开发环境利用ESM不打包，秒启动；HMR只更新变更模块。

Tree Shaking原理：静态分析ESM，标记未使用的导出，打包时删除。CJS无法Tree Shaking。

九、按需加载

回答思路：代码分割的一种策略，只加载当前需要的代码。

实现方式：

路由懒加载：() => import('./views/Home.vue')
组件懒加载：defineAsyncComponent
UI组件库按需引入：import { Button } from 'ant-design-vue'

十、ESM和CJS的区别

维度	ESM	CJS
加载时机	编译时静态	运行时动态
输出	值引用	值拷贝
Tree Shaking	支持	不支持
浏览器支持	原生	需打包
同步/异步	异步	同步

十一、Sass和Less的区别

维度	Sass	Less
环境	Ruby（早期）/ Dart	Node.js
变量符	`$`	`@`
条件语句	`@if` / `@else`	不支持
循环	`@for` / `@each`	不支持
函数	丰富	有限

为什么用Sass：功能更强大（条件、循环），社区成熟。

十二~十三：Node中间件与洋葱模型

中间件：在请求和响应之间执行的处理函数。

洋葱模型：请求从外向内经过中间件，响应从内向外返回。

javascript 复制代码

// Express中间件示例
app.use((req, res, next) => {
  console.log('1. 请求进入')
  next()
  console.log('4. 响应返回')
})
app.use((req, res, next) => {
  console.log('2. 处理请求')
  res.send('OK')
  console.log('3. 准备返回')
})
// 输出顺序：1 → 2 → 3 → 4

十四、项目性能优化

回答思路：参考之前面经。

方向	手段
加载	代码分割、图片懒加载、预加载
渲染	虚拟滚动、transform动画
网络	CDN、Gzip、HTTP缓存
运行时	防抖节流、Web Worker

十五、chunk命名方式与含义

chunk：Webpack/Vite打包后输出的代码块文件。

命名方式：

javascript 复制代码

// webpack配置
output: {
  filename: '[name].[contenthash:8].js',
  chunkFilename: '[name].[contenthash:8].chunk.js'
}

命名含义：

[name]：chunk名称（如main、vendor、home）
[contenthash]：内容哈希，内容变化时哈希变化，解决强缓存问题

十六~十九：AI使用细节

16. AI怎么用的：代码生成、调试、代码审查、文档生成

17. Claude Code套餐价格：Claude Code是Anthropic的命令行工具，套餐信息需实时查看官网。

18. 页面空白报错，怎么和AI交互修复，怎么保证他修的是对的：

提供完整错误信息、堆栈、相关代码
问AI可能原因和解决方案
验证方法：运行修复后的代码，写单元测试，边界条件测试

19. 印象比较深的bug，AI帮你解决的：准备一个真实案例。

二十、最近学了什么新技术

回答思路：诚实回答，可包括：

AI工程化：MCP、Skills
新框架：SolidJS、Svelte
构建工具：Rspack、Turbopack
后端：Nest.js、Bun

📚 知识点速查表

知识点	核心要点
原型链	`__proto__` → `prototype` → `Object.prototype` → `null`
ES6+	let/const、箭头函数、解构、Promise、class、includes、指数运算符
TS	静态类型、接口、编译时检查、`unknown`替代`any`
Vue2 vs Vue3	defineProperty vs Proxy、Options vs Composition
components/utils/hooks	UI渲染 / 纯函数 / 状态逻辑
Tree Shaking	静态分析ESM，未使用代码删除
ESM vs CJS	编译时/运行时、值引用/拷贝、支持/不支持Tree Shaking
Sass vs Less	Sass功能更强（条件、循环）
洋葱模型	请求经过中间件，形如洋葱
chunk	代码块，`[name].[contenthash].js`
AI协作	提供完整上下文，运行测试验证修复

📌 最后一句：

携程这场一面，是一场"工程化全栈"的快速检阅。从原型链、ES6/7到Vue演进，从模块化方案（ESM/CJS）到构建工具（Webpack/Vite），从CSS预处理器到Node中间件，再到AI协作的细节（甚至问到Claude Code套餐价格），面试官在30分钟内快速扫描了你的技术雷达。能答好这套题，说明你的知识体系广而不泛，深而不偏，这正是大厂暑期实习面试的核心竞争力。