web开发面试题总结

（2024年企业招聘雷达图）

当前主流互联网企业对web开发工程师的能力要求已从单一编码能力，演进为“技术深度+工程思维+业务理解”的三维评估体系：

：2023年阿里、腾讯、字节等大厂前端岗中，87%的终面考官会要求现场手写“防抖/节流”或“Promise并发控制”；63%的中高级岗位会考察跨域方案的原理级差异；仅12%的候选人能完整说出HTTP缓存策略的校验流程。

• 陷阱1：死记硬背八股文 → 面试官更关注“为什么这样设计”（如：为什么CSS选择器不支持向上匹配？）
• 陷阱2：只练基础题忽略场景题 → 例如：“页面首屏1s内加载失败，如何设计降级方案？”（涉及CDN回源、骨架屏、离线包）
• 陷阱3：忽视软技能评分项 → 在“技术方案评审”环节，清晰表达技术权衡（如：选Vue3还是React18？为什么？）比语法细节更重要

（2009-2024）

：2023年后大厂面试中，“ESM与CommonJS差异”出现频率提升40%；“为什么Vite开发启动快”成为中高级岗必问题目。

：请说明<article>、<section>、<div>的语义边界，并给出一个包含三者的正确示例。

标准答案框架：

• <article>：独立可分发内容单元（如博客、新闻）
• <section>：文档中的主题性分组（需有标题）
• <div>：无语义容器，仅用于样式/脚本绑定

完整示例：

<main>
  <article class="blog-post">
    <header><h2>Web开发面试避坑指南</h2></header>
    <section>
      <h3>语义化重要性</h3>
      <p>语义标签提升SEO和无障碍访问...</p>
    </section>
    <aside>相关阅读：<a href="/seo">SEO优化指南</a></aside>
  </article>
</main>

：当动态加载内容（如搜索下拉列表）时，如何保证屏幕阅读器可访问？

解决方案：

• 给搜索框添加 aria-expanded="true/false" 表示下拉状态
• 给结果列表容器添加 role="listbox" 和 aria-label="搜索建议"
• 每个选项设置 role="option" 和唯一 id
• 键盘导航时，用 aria-activedescendant 指向当前高亮项

真实代码片段：

<div class="search-box" role="search">
  <input
    type="text"
    aria-label="搜索关键词"
    aria-expanded="false"
    aria-owns="suggestions"
    aria-controls="suggestions"
    @input="handleInput"
  >
  <ul id="suggestions" role="listbox" aria-label="搜索建议">
    <li role="option" id="opt1" aria-selected="false">HTML面试题</li>
    <li role="option" id="opt2" aria-selected="false">CSS布局技巧</li>
  </ul>
</div>

面试加分点：提及“ARIA属性需配合JS动态更新”，避免静态写死导致无障碍体验失效。

考点分析：考察对Promise状态管理、错误处理、异步控制的综合理解

// 2024年腾讯前端岗真题
function myAllSettled(promises) {
  return new Promise((resolve) => {
    const results = [];
    let completed = 0;
    const total = promises.length;
    if (total === 0) resolve(results);
    promises.forEach((promise, index) => {
      Promise.resolve(promise).then(
        value => {
          results[index] = { status: 'fulfilled', value };
          completed++;
          if (completed === total) resolve(results);
        },
        reason => {
          results[index] = { status: 'rejected', reason };
          completed++;
          if (completed === total) resolve(results);
        }
      );
    });
  });
}
// 测试
myAllSettled([
  Promise.resolve(1),
  Promise.reject('error'),
  new Promise(resolve => setTimeout(() => resolve(3), 100))
]).then(console.log);
// 输出：
// [
//   { status: 'fulfilled', value: 1 },
//   { status: 'rejected', reason: 'error' },
//   { status: 'fulfilled', value: 3 }
// ]

面试官追问：

• “如果传入非Promise对象会怎样？” → 自动调用Promise.resolve包装
• “如何支持异步函数（async）？” → async函数返回Promise，自动兼容

正确答案：

1. 创建新对象： const obj = Object.create(Constructor.prototype)
2. 绑定this并执行构造函数： Constructor.apply(obj, args)
3. 返回对象：若构造函数返回非null对象，则返回该对象；否则返回新创建的对象

手写实现：

function myNew(Constructor, ...args) {
  // 1. 创建新对象
  const obj = Object.create(Constructor.prototype);
  // 2. 绑定this执行
  const result = Constructor.apply(obj, args);
  // 3. 返回对象（优先返回构造函数的返回值）
  return (result && typeof result === 'object') ? result : obj;
}
// 测试
function Person(name) {
  this.name = name;
}
Person.prototype.sayHi = function() { console.log(`Hi, I'm ${this.name}`); };
const p = myNew(Person, 'Alice');
p.sayHi(); // 输出：Hi, I'm Alice

常见错误：忽略“构造函数返回对象”的边界情况（如返回Date/Array等），导致实例原型链断裂。

典型场景：全局状态管理、弹窗控制器、日志系统

class ModalManager {
  constructor() {
    if (ModalManager.instance) return ModalManager.instance;
    this.modals = [];
    ModalManager.instance = this;
  }
  create(title, content) {
    const id = `modal-${Date.now()}`;
    this.modals.push({ id, title, content });
    console.log(`Modal created: ${id}`);
    return id;
  }
}
// 实际使用
const modal1 = new ModalManager();
const modal2 = new ModalManager();
console.log(modal1 === modal2); // true
modal1.create('提示', '操作成功'); // 输出：Modal created: modal-1704067200000

面试加分点：提及“单例与依赖注入的结合”——通过工厂模式解耦单例创建，避免全局污染。

断点设计逻辑：

关键CSS技术：

• 用 minmax() 实现自动填充： grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
• 用 clamp() 实现流体字体： font-size: clamp(16px, 2vw, 24px)
• 用 container queries 实现组件级响应（2024新趋势）

避坑指南：“避免在移动端使用fixed定位”——iOS 13+已修复，但Android仍存在键盘弹出遮挡问题。

真实优化案例：

某电商首页优化前后对比：

关键措施：

• 图片：WebP + 懒加载 + srcset响应式图片
• JS：动态import + 骨架屏替代Loading动画
• 资源：HTTP/2多路复用 + DNS预解析

面试高频追问：

• “Vue3如何解决数组响应式问题？” → 重写数组7个变更方法（push/splice等），通过原型链劫持
• “React如何处理高优先级更新？” → 通过Lane模型划分优先级，高优任务可打断低优任务

错误回答：“我熟悉Webpack配置，能写Loader”

正确示范：

“在上个项目中，我通过分析构建报告发现第三方库体积占比达62%，于是：
① 用webpack-bundle-analyzer定位大模块；
② 将moment.js替换为day.js（体积从200KB→2KB）；
③ 实现路由级懒加载，首屏资源减少40%；
④ 配置CDN+缓存策略，二次访问速度提升3.2倍。
最终LCP从4.8s降至1.6s，获团队技术改进奖。”

加分点：用STAR法则（Situation-Task-Action-Result）结构化表达，量化结果。

实操建议：

1. 开源贡献：修复简单Issue（如文档错别字、单元测试补充）
2. 技术博客：用Mermaid画架构图，附真实代码片段
3. 模拟项目：用Vite搭建脚手架，实现完整CRUD+权限控制
4. 性能报告：用Lighthouse生成报告，对比优化前后数据

真实案例：某候选人通过GitHub提交ant-design的TypeScript类型修复，被列为“社区贡献者”，成功通过字节面试。

避坑：“3年成为架构师” → 显得不切实际

推荐话术：

“短期（0-1年）：深入掌握前端基础，独立负责模块开发，熟悉公司技术栈；
中期（1-3年）：主导跨团队协作项目，沉淀通用组件库，输出技术文档；
长期：探索前沿技术（如WebAssembly、WebGPU），推动业务创新。”

关键：强调“技术成长与业务价值结合”，避免空谈技术。

：2024年起，大厂面试新增“技术方案设计题”（如：设计一个支持万人并发的在线文档系统），建议提前准备。