MetaAPP 前端一面面经深度解析

响应式设计

/* 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;}

/* 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 原理

// 1. rem 定义
// rem = root em，相对于根元素(html)的字体大小
// 2. 原理
html { font-size: 16px; }
.box {width: 10rem;height: 5rem;}

// 3. 动态 rem 适配
(function flexible(){
  function setRem(){
    const width = document.documentElement.clientWidth;
    const rem = width / 7.5;
    document.documentElement.style.fontSize = rem + 'px';
  }
  setRem();
  window.addEventListener('resize', setRem);
})();

// 4. postcss-pxtorem 插件配置
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*']
    }
  }
};

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

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);}}

复杂运动处理

// 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(); }
}

JS 语言特性（包装对象）

// 这道题考察的是 JS 的包装对象和原型链
// 1. 背景知识
// JS 中，基本类型（number、string、boolean）有对应的包装对象
let a = 5;
console.log(a.toString()); // 临时创建 Number 对象

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

// 3. 解决方案：修改 Number 原型
Object.defineProperty(Number.prototype,'b',{
  set(value){ console.log('设置 b 为', value); },
  get(){ return 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. 整个条件为真

Promise.all vs allSettled

// 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：依赖所有请求结果的场景
// Promise.allSettled：不关心个别失败，需要所有结果的场景

Vue 组件实例

// 1. 组件与实例的关系
// 每个组件在使用时都会创建一个实例
// 2. 不同情况
// 2.1 单次使用<MyComponent /> -> 创建一个实例
// 2.2 多次使用<div v-for="item in 3"><MyComponent /></div> -> 创建 3 个独立实例
// 2.3 动态组件<component :is="currentComponent"/> -> 每次切换创建新实例或复用

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

组件销毁与定时器

// 1. 路由切换时的组件生命周期
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 虽然销毁了，但定时器还在执行，造成内存泄漏

// 3. 最佳实践
export default {
  mounted(){ this.timer = setInterval(this.tick,1000); },
  beforeDestroy(){ clearInterval(this.timer); },
  deactivated(){ clearInterval(this.timer); },
  activated(){ this.timer = setInterval(this.tick,1000); }
}

Vue3 响应式原理

// 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 是弱引用，不影响垃圾回收
// - 防止内存泄漏

// 4. 源码中的数据结构
// targetMap: WeakMap<target, Map<key, Set<effect>>>

// 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 机制

// 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;
if(typeof Promise !=='undefined'){
  timerFunc=()=>{ Promise.resolve().then(flushCallbacks); } // 微任务
}else if(typeof MutationObserver !=='undefined'){
  // 微任务
  timerFunc=()=>{ /* ... */ } 
}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(); }
}

低版本浏览器兼容

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

// 2. 解决方案
// 2.1 使用 Vue2 (支持 IE9+)
// 2.2 引入 polyfill
// 2.3 配置 babel
module.exports = {
  presets: [['@babel/preset-env',{targets:{ie:'11'},useBuiltIns:'usage',corejs:3}]]
};
// 2.4 动态降级
if(isIEBrowser()){
  import('./vue2-app.js');
}else{
  import('./vue3-app.js');
}

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

面试复盘

知识点速查表