前端面试题全集（深度实战版） 🔥 面试必备

知识点延伸

• margin 折叠：相邻垂直 margin 会取最大值合并
• BFC：块级格式化上下文，解决 margin 浮动穿透问题
• 逻辑属性：margin-inline-start 等，支持 RTL

知识点延伸

• Node.js 事件循环：分为 6 个阶段（timers → I/O callbacks → idle → poll → check → close）
• queueMicrotask()：手动创建微任务
• requestAnimationFrame：在渲染前执行，适合动画

1. 性能监控（Web Vitals）

2. 错误监控

• JS 错误：window.onerror + unhandledrejection
• 资源错误：PerformanceObserver + error 事件
• API 错误：Axios 拦截器统一上报
• 白屏检测：DOM 节点数量判断

3. 行为监控

• PV/UV：路由切换时上报
• 点击热力图：监听 click 事件
• 页面停留时间：visibilitychange 监听

1. 技术选型

2. 架构设计

客户端 → WebSocket 网关 → 协作服务 → Redis/MongoDB
                ↓
           消息队列 Kafka
                ↓
         历史版本服务 → 对象存储

3. 核心算法：CRDT

// 简化版 CRDT 实现
class CRDTDocument {
  constructor() {
    this.operations = [];
    this.version = 0;
  }
  
  insert(pos, char, clientId) {
    const op = { type: 'insert', pos, char, clientId, version: ++this.version };
    this.operations.push(op);
    return op;
  }
  
  delete(pos, clientId) {
    const op = { type: 'delete', pos, clientId, version: ++this.version };
    this.operations.push(op);
    return op;
  }
  
  // 合并远程操作（无冲突）
  merge(remoteOps) {
    for (const op of remoteOps) {
      if (op.version > this.version) {
        this.operations.push(op);
        this.version = op.version;
      }
    }
  }
}

1. 内部影响力

• 技术分享：双周技术沙龙，轮流主讲
• 代码评审：建立 CR 文化，互相学习
• 技术文档：沉淀最佳实践、踩坑记录
• 内部工具：开发提效工具，获得认可

2. 外部影响力

• 开源贡献：参与知名项目，发布内部工具
• 技术博客：掘金、知乎、公司技术博客
• 大会演讲：JSConf、GMTC、QCon
• 标准制定：参与 W3C、TC39 讨论

1. 架构愿景

构建"高可用、高性能、高扩展"的前端架构，支撑日均千万级 PV。

2. 分层架构

┌─────────────────────────────────────────┐
│  接入层：CDN / WAF / 负载均衡              │
├─────────────────────────────────────────┤
│  渲染层：SSR / SSG / CSR 混合             │
├─────────────────────────────────────────┤
│  应用层：微前端（主应用 + N 个子应用）      │
├─────────────────────────────────────────┤
│  服务层：BFF / API Gateway                │
├─────────────────────────────────────────┤
│  基础设施层：监控 / 日志 / 告警             │
└─────────────────────────────────────────┘

3. 关键技术决策

4. 演进路线

1. 核心能力模型

设计器（Editor）
  ├── 组件面板（物料库）
  ├── 画布（可视化编辑）
  ├── 属性面板（配置）
  └── 大纲树（层级）

渲染器（Renderer）
  ├── Schema 解析
  ├── 组件映射
  └── 数据绑定

物料库（Materials）
  ├── 基础组件（Input、Select）
  ├── 业务组件（商品卡片）
  └── 布局组件（Flex、Grid）

2. Schema 设计

{
  "version": "1.0",
  "componentName": "Page",
  "props": { "title": "活动页" },
  "children": [{
    "componentName": "Form",
    "props": {
      "layout": "vertical",
      "labelWidth": 100
    },
    "children": [{
      "componentName": "Input",
      "props": {
        "placeholder": "请输入姓名",
        "required": true,
        "rules": [{ "min": 2, "message": "至少2个字符" }]
      },
      "binding": { "field": "name" }
    }]
  }]
}

3. 技术难点

1. 成本分析

2. 降本策略

• 提效工具：AI 辅助开发、低代码平台，人效提升 30%
• 技术升级：SSR 减少服务器成本、CDN 优化带宽
• 结构优化：核心自研 + 边缘外包，减少 20% 人力
• 复用体系：组件库、工具库，减少重复开发

3. 保障业务增长

• 中台化：业务中台支撑多产品线
• 国际化：一套代码多语言，支撑海外业务
• 智能化：AI 推荐、个性化，提升转化率

1. 职级体系

2. 晋升评审

• 述职答辩：项目成果、技术深度、业务贡献
• 360 评估：上级、同事、下属多维评价
• 技术委员会：专家评审，确保公正
• 晋升比例：P6→P7 30%、P7→P8 20%、P8→P9 10%

1. 变革愿景

将 AI 融入产品全生命周期，从"功能驱动"转向"智能驱动"。

2. 变革路径

3. 关键成功因素

1. 资源分配模型

2. 决策框架

                    高紧急
                      │
         ┌────────────┼────────────┐
         │  立即执行   │  规划执行   │
         │  (Bug修复)  │  (架构升级) │
  高 ────┼────────────┼────────────┤ 低
  影     │  授权执行   │  延后/取消  │  影
  响     │  (小优化)   │  (低优先级) │  响
         └────────────┼────────────┘
                      │
                    低紧急

3. 保障机制

• 技术雷达：每季度评估技术趋势
• OKR 对齐：技术 OKR 与业务 OKR 挂钩
• 定期复盘：月度技术复盘会
• 向上管理：定期汇报技术价值