附录1：常见面试题解析

附录1：常见面试题解析

JavaScript 技术栈的面试往往涵盖从语言基础到系统设计的全方位考察，本附录将分类解析高频面试题及其考察要点。

一、语言核心篇

1. 事件循环机制

题目：解释以下代码输出顺序并说明原因

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');

解析：

1. 执行顺序：1 → 4 → 3 → 2
2. 核心要点：
   • 同步任务立即执行（1、4）
   • 微任务（Promise）优先于宏任务（setTimeout）
   • Node11+与浏览器行为统一
3. 延伸考点：

   graph LR
       A[调用栈] --> B[微任务队列]
       A --> C[宏任务队列]
       B -->|优先| A
       C --> A
   

2. 闭包与内存泄漏

题目：以下代码存在什么问题？如何解决？

function init() {
  const data = new Array(1000000).fill('大数据');
  return function() {
    console.log(data.length);
  };
}
const handler = init();
document.getElementById('btn').addEventListener('click', handler);

解析：

1. 问题：data变量被闭包引用无法释放
2. 解决方案：

   function init() {
     const data = new Array(1000000).fill('大数据');
     return {
       getSize: () => data.length,
       destroy: () => data = null
     };
   }
   

二、异步编程篇

3. Promise实现超时控制

题目：实现带超时的fetch请求

参考答案：

function fetchWithTimeout(url, options, timeout = 5000) {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('请求超时')), timeout)
  ]);
}

考察点：

• Promise.race的运用
• 异步任务取消模式
• 错误处理完整性

4. async/await底层原理

题目：如何用Generator实现async/await？

解析：

function asyncToGenerator(generatorFunc) {
  return function(...args) {
    const gen = generatorFunc.apply(this, args);
    return new Promise((resolve, reject) => {
      function step(key, arg) {
        let result;
        try {
          result = gen[key](arg);
        } catch (error) {
          return reject(error);
        }
        const { value, done } = result;
        if (done) return resolve(value);
        return Promise.resolve(value).then(
          val => step("next", val),
          err => step("throw", err)
        );
      }
      step("next");
    });
  };
}

三、框架原理篇

5. Virtual DOM Diff算法

题目：简述React/Vue的diff算法优化策略

核心要点：

1. 树比对：仅同层比较，时间复杂度O(n)
2. key的作用：

   // 没有key时将导致不必要的重建
   [<li>A</li>, <li>B</li>] 
   // 插入新元素时
   [<li>C</li>, <li>A</li>, <li>B</li>]
   

3. 组件级优化：shouldComponentUpdate/PureComponent

6. Vue响应式原理

题目：实现一个简易响应式系统

参考答案：

class Dep {
  constructor() {
    this.subscribers = [];
  }
  depend() {
    if (target && !this.subscribers.includes(target)) {
      this.subscribers.push(target);
    }
  }
  notify() {
    this.subscribers.forEach(sub => sub());
  }
}

function reactive(obj) {
  Object.keys(obj).forEach(key => {
    const dep = new Dep();
    let value = obj[key];
    Object.defineProperty(obj, key, {
      get() {
        dep.depend();
        return value;
      },
      set(newVal) {
        value = newVal;
        dep.notify();
      }
    });
  });
  return obj;
}

四、工程化篇

7. Webpack优化策略

题目：列举Webpack构建优化手段

解决方案：

8. 微前端沙箱实现

题目：如何实现JS/CSS隔离？

技术方案：

1. JS沙箱：

   class Sandbox {
     constructor() {
       this.fakeWindow = Object.create(null);
       this.proxy = new Proxy(this.fakeWindow, {
         set: (target, p, value) => {
           target[p] = value;
           return true;
         },
         get: (target, p) => p in target ? target[p] : window[p]
       });
     }
   }
   

2. CSS隔离：
   • Shadow DOM
   • 前缀命名规范（app1-btn）
   • PostCSS处理

五、系统设计篇

9. 前端监控系统

题目：设计一个前端异常监控方案

架构设计：

graph TD
    A[客户端] -->|错误捕获| B[SDK]
    B --> C{错误分类}
    C -->|JS错误| D[window.onerror]
    C -->|资源加载| E[performance.getEntries]
    C -->|Promise异常| F[unhandledrejection]
    B --> G[数据上报]
    G --> H[日志服务]
    H --> I[可视化看板]

关键实现：

class Monitor {
  constructor() {
    this.initErrorCapture();
    this.initPerformance();
  }
  
  initErrorCapture() {
    window.addEventListener('error', (e) => {
      this.report({
        type: 'JS_ERROR',
        message: e.message,
        stack: e.error?.stack
      });
    }, true);
  }
  
  report(data) {
    navigator.sendBeacon('/api/log', JSON.stringify(data));
  }
}

10. 权限控制系统

题目：设计前端路由权限方案

实现模式：

// 路由配置
const routes = [
  {
    path: '/admin',
    component: AdminPage,
    meta: { requiresAuth: true, roles: ['ADMIN'] }
  }
];

// 路由守卫
router.beforeEach((to, from) => {
  const { hasToken, user } = store.state.auth;
  
  if (to.meta.requiresAuth && !hasToken) {
    return '/login';
  }
  
  if (to.meta.roles && !to.meta.roles.includes(user.role)) {
    return '/403';
  }
});

六、开放性问题

11. 前端技术趋势

题目：谈谈你对Web3.0前端开发的理解

回答要点：

1. 技术栈变化：
   • 以太坊交互：ethers.js/web3.js
   • IPFS文件存储
   • 智能合约调用
2. 典型模式：

   // 连接MetaMask
   const accounts = await window.ethereum.request({ 
     method: 'eth_requestAccounts' 
   });
   

3. 安全考量：
   • 私钥保管方案
   • 交易签名验证
   • 防钓鱼措施

12. 性能优化案例

题目：描述你解决过最复杂的性能问题

结构化回答：

1. 问题现象：
   • 商品列表页首屏加载>5s
   • 交互卡顿明显
2. 分析工具：
   • Lighthouse评分32分
   • Chrome Performance火焰图
3. 优化措施：
   • 图片懒加载+WebP格式
   • 虚拟滚动实现
   • WebWorker处理计算
4. 最终效果：
   • LCP从4.2s降至1.1s
   • FPS从12提升到55+

本附录覆盖了从基础到高级的面试考察点，建议读者结合自身项目经验准备具体案例。对于系统设计类问题，推荐使用STAR法则（Situation-Task-Action-Result）结构化回答，既能展示技术深度，又能体现解决问题的能力。