前端八股文面经大全：MetaAPP前端一面（2026-03-03）·面经深度解析

前言

大家好，我是木斯佳。

在这个春节假期，当大家都在谈论返乡、团圆与休息时，作为一名技术人，我的思考却不由自主地转向了行业的「冬」与「春」。

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

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

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

在这个假期，让我们一起充电，为下一个技术春天做好准备。

面经原文内容

📍面试公司：MetaAPP

🕐面试时间：近期，用户上传于2026-03-03 💻面试岗位：前端

💬面试状态：很有压力，面试官1请假叫2来面，但问题很有启发

❓面试问题：

项目相关

CSS/动画 4. css如何做响应式设计移动端PC段iPad端？ 5. rem的原理是什么 6. 用css实现一个抛物线 7. 复杂运动怎么办？

JS进阶 8. let a=5经过一系列操作之后，if(a.b=100 && a=5)是true，这一系列操作是什么？（面试官举例number强转对象然后原型链类似） 9. promise.all跟allseted区别

Vue原理 10. vue组件都是一个实例吗？ 11. a组件定时器跳转到b，a的会销毁吗？ 12. vue3响应式 13. 副作用函数知道吗？数据改变原理是什么？在源码的数据格式是什么？ 14. 为什么使用weakmap 15. nexttick是微任务吗？ 16. 低版本浏览器还能用吗？

反问

• 业务：游戏业务，都是h5跟官网
• 规模：10个人

来源：牛客网 天降大厂offer

📝 MetaAPP前端一面·深度解析

🎯 面试整体画像

🔍 逐题深度解析

二、组件封装与API兼容性

问题：讲一个最牛逼的组件 + 怎么确保API兼容性？

发散性问题，需要平时多做积累，这里我们只复盘一下API兼容性设计的内容

// 1. 组件封装的核心原则

// 1.1 组件设计思路
// 以弹窗组件为例
<Modal
v–model="visible" // 控制显隐
title="提示" // 标题
width="500" // 宽度
:before–close="handleClose" // 关闭前钩子
:on–ok="handleOk" // 确定回调
:on–cancel="handleCancel" // 取消回调
>
<div>内容</div>
</Modal>

// 1.2 API兼容性设计

// 方案1：属性透传
// 让用户可以传递任意原生属性
<Button
type="primary"
:loading="loading"
@click="handleClick"
custom–prop="value" // 自定义属性
>
按钮
</Button>

// 组件内部
<button
v–bind="$attrs" // 透传所有属性
:class="buttonClass"
>
<slot />
</button>

// 方案2：默认值 + 扩展
props: {
size: {
type: String,
default: 'medium',
validator: (value) => ['small', 'medium', 'large'].includes(value)
},
type: {
type: String,
default: 'default'
}
}

// 方案3：版本兼容
// 同时支持新旧API
props: {
// 新API
modelValue: {},
// 兼容旧API
value: {}
},
emits: ['update:modelValue', 'input']

三、响应式设计

问题：css如何做响应式设计移动端PC段iPad端？

/* 1. 媒体查询 */
/* 移动端 */
@media (max-width: 767px) {
.container {
width: 100%;
padding: 10px;
}
}

/* iPad端 */
@media (min-width: 768px) and (max-width: 1024px) {
.container {
width: 750px;
margin: 0 auto;
}
}

/* PC端 */
@media (min-width: 1025px) {
.container {
width: 1200px;
margin: 0 auto;
}
}

/* 2. 弹性布局 */
.container {
display: flex;
flex-wrap: wrap;
}

.item {
flex: 1 1 300px; /* 基础300px，可伸缩 */
}

/* 3. 栅格系统 */
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}

.col-4 {
grid-column: span 4;
}

/* 4. 视口单位 */
.hero {
height: 100vh; /* 视口高度 */
width: 100vw; /* 视口宽度 */
font-size: clamp(16px, 4vw, 24px); /* 动态字体 */
}

/* 5. 图片响应式 */
img {
max-width: 100%;
height: auto;
}

picture {
display: block;
}

source {
/* 根据屏幕宽度加载不同图片 */
media: "(max-width: 767px)"
}

/* 6. 容器查询（新特性） */
@container (max-width: 500px) {
.card {
flex-direction: column;
}
}

四、rem原理

问题：rem的原理是什么

// 1. rem定义
// rem = root em，相对于根元素(html)的字体大小

// 2. 原理
// 设置根元素字体大小
html {
font–size: 16px; // 默认
}

// 1rem = 16px
.box {
width: 10rem; // 160px
height: 5rem; // 80px
}

// 3. 动态rem适配
// 根据屏幕宽度动态设置根元素字体大小
(function flexible() {
function setRem() {
const width = document.documentElement.clientWidth
// 设计稿宽度750px，分成7.5份，1rem = 100px
const rem = width / 7.5
document.documentElement.style.fontSize = rem + 'px'
}

setRem()
window.addEventListener('resize', setRem)
})()

// 4. postcss-pxtorem插件
// 在webpack中配置，自动将px转换为rem
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 75, // 设计稿宽度/10
propList: ['*']
}
}
}

// 5. rem vs vw/vh
// rem：基于根元素，需要JS动态设置
// vw：基于视口宽度，纯CSS，不需要JS

五、CSS实现抛物线

问题：用css实现一个抛物线

/* 1. 使用transform + 动画 */
.ball {
width: 50px;
height: 50px;
background: red;
border-radius: 50%;
animation: parabola 2s ease-out forwards;
}

@keyframes parabola {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(300px, 200px);
}
}

/* 2. 更精确的抛物线（使用贝塞尔曲线） */
@keyframes parabola-bezier {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(300px, 200px);
}
}

.ball-bezier {
animation: parabola-bezier 2s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

/* 3. 使用两个动画组合（水平匀速 + 竖直加速） */
.ball-combo {
animation:
horizontal 2s linear forwards,
vertical 2s ease-in forwards;
}

@keyframes horizontal {
to {
transform: translateX(300px);
}
}

@keyframes vertical {
to {
transform: translateY(200px);
}
}

/* 4. 使用JS动态计算（更精确） */
function parabola(element, start, end, duration) {
const startTime = performance.now()

function animate(currentTime) {
const elapsed = currentTime – startTime
const progress = Math.min(elapsed / duration, 1)

// 抛物线公式：y = ax² + bx
const x = start.x + (end.x – start.x) * progress
const y = start.y + (end.y – start.y) * Math.pow(progress, 2)

element.style.transform = `translate(${x}px, ${y}px)`

if (progress < 1) {
requestAnimationFrame(animate)
}
}

requestAnimationFrame(animate)
}

六、复杂运动处理

问题：复杂运动怎么办？

// 1. Web Animation API
const element = document.querySelector('.ball')

const animation = element.animate([
{ transform: 'translate(0, 0)' },
{ transform: 'translate(300px, 200px)' }
], {
duration: 2000,
easing: 'cubic-bezier(0.2, 0.8, 0.4, 1)',
iterations: 1
})

animation.onfinish = () => {
console.log('动画完成')
}

// 2. GSAP（GreenSock）
gsap.to('.ball', {
x: 300,
y: 200,
duration: 2,
ease: 'power2.out',
onUpdate: () => {
// 每一帧回调
},
onComplete: () => {
console.log('完成')
}
})

// 3. 使用Canvas（适合复杂物理模拟）
class Ball {
constructor(x, y) {
this.x = x
this.y = y
this.vx = 5
this.vy = –10
this.gravity = 0.5
}

update() {
this.x += this.vx
this.y += this.vy
this.vy += this.gravity

// 碰撞检测
if (this.y > canvas.height – 50) {
this.y = canvas.height – 50
this.vy *= –0.7 // 能量损失
}
}

draw(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, 25, 0, Math.PI * 2)
ctx.fillStyle = 'red'
ctx.fill()
}
}

// 4. 使用Framer Motion（React）
<motion.div
animate={{
x: 300,
y: 200,
rotate: 360,
scale: [1, 2, 1]
}}
transition={{
duration: 2,
ease: "easeInOut",
times: [0, 0.5, 1],
loop: Infinity
}}
/>

七、JS语言特性（第8题）

问题：let a=5，如何使 if(a.b=100 && a=5) 为 true？

// 这道题考察的是JS的包装对象和原型链

// 1. 背景知识
// JS中，基本类型（number、string、boolean）有对应的包装对象
// 当访问基本类型的属性时，JS会临时创建一个包装对象

let a = 5
console.log(a.toString()) // 临时创建Number对象

// 2. 解题思路
// 我们需要让a.b = 100这个赋值操作成功，同时不改变a本身的值

// 3. 解决方案：修改Number原型
// 给Number原型添加setter
Object.defineProperty(Number.prototype, 'b', {
set(value) {
console.log('设置b为', value)
// 这里可以什么都不做，或者返回什么
},
get() {
return 100 // 让a.b返回100
}
})

let a = 5

// 现在执行
if (a.b = 100 && a === 5) {
console.log('true')
}

// 执行过程
// 1. a.b = 100：访问a.b，触发getter返回100，赋值操作成功
// 2. 100 && a === 5：100为真，继续判断a === 5
// 3. a === 5 为真
// 4. 整个条件为真

// 4. 更完整的解法
Number.prototype.b = 100 // 直接设置属性

let a = 5
console.log(a.b) // 100（临时包装对象访问到原型上的b）

// 现在条件成立
if (a.b = 100 && a === 5) {
console.log('条件成立')
}

// 5. 原理总结
// – 基本类型访问属性时，会创建临时包装对象
// – 包装对象从原型链上继承属性
// – 通过修改原型，可以控制基本类型的属性访问行为

八、Promise.all vs allSettled

问题：promise.all跟allseted区别

// 1. Promise.all
// – 全部成功才成功
// – 一个失败就失败
const promises = [
fetch('/api/user'),
fetch('/api/posts'),
fetch('/api/comments')
]

try {
const [user, posts, comments] = await Promise.all(promises)
// 全部成功才能走到这里
} catch (error) {
// 任何一个失败就会进入catch
}

// 2. Promise.allSettled
// – 等待所有完成
// – 返回每个promise的状态和结果
const results = await Promise.allSettled(promises)

results.forEach((result, index) => {
if (result.status === 'fulfilled') {
console.log(`请求${index}成功:`, result.value)
} else {
console.log(`请求${index}失败:`, result.reason)
}
})

// 3. 返回结果对比
// Promise.all
[userData, postsData, commentsData]

// Promise.allSettled
[
{ status: 'fulfilled', value: userData },
{ status: 'rejected', reason: error },
{ status: 'fulfilled', value: commentsData }
]

// 4. 适用场景
// Promise.all：依赖所有请求结果的场景
// 如：需要用户信息和帖子信息才能渲染页面

// Promise.allSettled：不关心个别失败，需要所有结果的场景
// 如：批量上传文件，想看看哪些成功了哪些失败了

九、Vue组件实例

问题：vue组件都是一个实例吗？

// 1. 组件与实例的关系
// 每个组件在使用时都会创建一个实例

// 2. 不同情况

// 2.1 单次使用
<MyComponent />
// 创建一个实例

// 2.2 多次使用
<div v–for="item in 3" :key="item">
<MyComponent />
</div>
// 创建3个独立实例

// 2.3 动态组件
<component :is="currentComponent" />
// 每次切换创建新实例或复用（取决于keep-alive）

// 3. 实例标识
export default {
mounted() {
console.log(this._uid) // 每个实例有唯一id
console.log(this === this.$root) // 判断是否是根实例
}
}

// 4. 单例组件特殊情况
// 通过Vue.extend创建的可复用构造函数
const ComponentClass = Vue.extend({
data() {
return { count: 0 }
}
})

// 每次new都会创建新实例
const instance1 = new ComponentClass()
const instance2 = new ComponentClass()

十、组件销毁与定时器

问题：a组件定时器跳转到b，a的会销毁吗？

// 1. 路由切换时的组件生命周期

// 组件A
export default {
data() {
return {
timer: null
}
},
mounted() {
this.timer = setInterval(() => {
console.log('A组件定时器执行')
}, 1000)
},
// 路由离开时会调用
beforeDestroy() {
// 需要手动清理定时器
if (this.timer) {
clearInterval(this.timer)
console.log('定时器已清理')
}
},
destroyed() {
console.log('A组件已销毁')
}
}

// 2. 如果不清理会发生什么？
// 组件A虽然销毁了，但定时器还在执行
// 造成内存泄漏，定时器回调中的this会报错

// 3. 最佳实践
export default {
mounted() {
// 方案1：在beforeDestroy中清理
this.timer = setInterval(this.tick, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
},

// 方案2：使用$once监听hook事件
mounted() {
const timer = setInterval(this.tick, 1000)
this.$once('hook:beforeDestroy', () => {
clearInterval(timer)
})
},

// 方案3：使用keep-alive的特殊处理
deactivated() {
// 组件被缓存时暂停定时器
clearInterval(this.timer)
},
activated() {
// 组件被激活时重启
this.timer = setInterval(this.tick, 1000)
}
}

十一、Vue3响应式

问题：vue3响应式 + 副作用函数 + 数据格式 + WeakMap

// 1. 副作用函数
// 副作用函数是指会对外部环境产生影响的函数
let activeEffect

function effect(fn) {
activeEffect = fn
fn() // 执行时会触发依赖收集
activeEffect = null
}

// 2. 响应式原理
const targetMap = new WeakMap()

function track(target, key) {
if (!activeEffect) return

let depsMap = targetMap.get(target)
if (!depsMap) {
targetMap.set(target, (depsMap = new Map()))
}

let dep = depsMap.get(key)
if (!dep) {
depsMap.set(key, (dep = new Set()))
}

dep.add(activeEffect)
}

function trigger(target, key) {
const depsMap = targetMap.get(target)
if (!depsMap) return

const effects = depsMap.get(key)
effects && effects.forEach(fn => fn())
}

// 3. 为什么使用WeakMap？
// – WeakMap的key是弱引用，不影响垃圾回收
// – 当target对象不再被使用时，可以被正常回收
// – 防止内存泄漏

// 4. 源码中的数据结构
// targetMap: WeakMap<target, Map<key, Set<effect>>>
{
target1: Map{
'name': Set[effect1, effect2],
'age': Set[effect3]
},
target2: Map{
'title': Set[effect4]
}
}

// 5. Vue3响应式完整示例
function reactive(target) {
return new Proxy(target, {
get(target, key, receiver) {
const value = Reflect.get(target, key, receiver)
track(target, key) // 依赖收集
return value
},
set(target, key, value, receiver) {
const oldValue = target[key]
const result = Reflect.set(target, key, value, receiver)
if (oldValue !== value) {
trigger(target, key) // 触发更新
}
return result
}
})
}

十二、nextTick

问题：nexttick是微任务吗？

// 1. nextTick的作用
// 在下次DOM更新循环结束后执行回调

// 2. 实现原理
// Vue的nextTick会根据环境选择不同的实现
// 优先使用微任务，降级使用宏任务

let callbacks = []
let pending = false

function flushCallbacks() {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
copies.forEach(cb => cb())
}

let timerFunc

// 优先级：Promise > MutationObserver > setImmediate > setTimeout
if (typeof Promise !== 'undefined') {
// 微任务
timerFunc = () => {
Promise.resolve().then(flushCallbacks)
}
} else if (typeof MutationObserver !== 'undefined') {
// 微任务
let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, { characterData: true })
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
} else if (typeof setImmediate !== 'undefined') {
// 宏任务
timerFunc = () => {
setImmediate(flushCallbacks)
}
} else {
// 宏任务
timerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}

export function nextTick(cb, ctx) {
callbacks.push(() => {
if (cb) {
cb.call(ctx)
}
})

if (!pending) {
pending = true
timerFunc()
}
}

// 3. 使用示例
this.message = 'updated'
this.$nextTick(() => {
console.log('DOM已更新')
})

十三、低版本浏览器兼容

问题：低版本浏览器还能用吗？

// 1. Vue3的浏览器兼容性
// Vue3不支持IE11
// 支持：Chrome、Firefox、Edge、Safari等现代浏览器

// 2. 解决方案

// 2.1 使用Vue2
// Vue2支持IE9+

// 2.2 引入polyfill
// 在index.html中引入
<!—[if IE]>
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
<![endif]—>

// 2.3 配置babel
module.exports = {
presets: [
['@babel/preset-env', {
targets: {
ie: '11'
},
useBuiltIns: 'usage',
corejs: 3
}]
]
}

// 2.4 动态降级
if (isIEBrowser()) {
// 加载Vue2版本
import('./vue2-app.js')
} else {
// 加载Vue3版本
import('./vue3-app.js')
}

// 3. 需要支持的ES6特性
// – Promise: 需要polyfill
// – Proxy: 无法polyfill（Vue3核心）
// – Map/Set: 可polyfill
// – Symbol: 可polyfill

🧠 面试复盘

面试特点总结

业务方向

• 游戏业务，H5和官网开发
• 团队规模10人

📚 知识点速查表

📌 最后一句：

这种面试不是为了难倒你，而是为了激发你对技术的深度思考。 即使有压力，也要感谢这样的面试经历，因为它让你知道自己还能往哪个方向成长。