前端面试每日三题 - Day 27

这是我为准备前端/全栈开发工程师面试整理的第27天每日三题练习，涵盖了：

• CSS选择器的优先级与权重计算机制
• Angular中的依赖注入（Dependency Injection）机制
• 设计一个支持实时协作编辑（如Google Docs）的前端系统

---

✅ 题目1：CSS选择器优先级与权重计算机制

权重等级表（从高到低）

选择器类型	权重值	示例
行内样式	1000
ID选择器	100	#header
类/伪类/属性选择器	10	.active, :hover
元素/伪元素选择器	1	div, ::before
通配符/继承样式	0	*, 继承的font-size

优先级计算示例

/* 权重计算：1(id) + 1(class) + 1(element) = 100+10+1=111 */
#nav .item li { color: blue; }

/* 权重计算：2(class) + 1(element) = 10*2+1=21 */ 
.list.item span { color: red; }

特殊规则

• !important 最高优先级

  .title { color: black !important; }
  

• 相同权重时后定义的样式生效
• 继承样式权重最低，始终被其他规则覆盖

---

✅ 题目2：Angular依赖注入机制深度解析

核心概念解析：

• 注入器（Injector）：维护依赖关系的容器
• 提供商（Provider）：定义如何创建依赖对象

  @NgModule({
    providers: [
      { provide: Logger, useClass: FileLogger } // 接口映射实现
    ]
  })
  

• 依赖解析流程：
  • 查找组件级注入器
  • 向上查找模块级注入器
  • 找不到时抛出异常

高级用法示例

• 条件注入

  constructor(
    @Optional() private config: AppConfig,
    @Inject('API_URL') private apiUrl: string
  ) {}
  

• 工厂函数注入

  {
    provide: DataService,
    useFactory: (http: HttpClient) => {
      return environment.production 
        ? new ProdDataService(http)
        : new MockDataService();
    },
    deps: [HttpClient]
  }
  

DI优化策略：

• 层级隔离：在组件级提供服务实现局部实例
• Tree-shakable：使用@Injectable({ providedIn: ‘root’ })
• 依赖查找缓存：提升二次获取效率

---

✅ 题目3：实时协作编辑系统设计实战

核心技术方案：

• 实时同步机制

  • 操作转换（OT）：适用于文本协同

    // 客户端发送操作
    {
      type: 'insert',
      position: 15,
      text: 'Hello',
      version: 42 // 当前文档版本
    }
    

  • CRDT（无冲突复制数据类型）：适用于任意数据结构

• 冲突解决策略

  • 服务端版本校验

  • 客户端操作重放（自动合并冲突）

• 通信协议优化

  // WebSocket消息格式
  {
    "type": "text-update",
    "clientId": "abc123",
    "changes": [ 
      { "pos": 10, "text": "新增内容" }
    ],
    "timestamp": 1629876543210
  }
  

前端关键技术点：

1. 架构设计

   • Next.js/Nuxt.js：使用成熟框架处理路由、数据获取等
   • 流式渲染：通过renderToNodeStream分块输出HTML
   • CDN 缓存：对静态页面进行缓存

2. 关键技术点

   • 光标位置同步

     // 实时显示他人光标
     document.addEventListener('selectionchange', () => {
       const selection = window.getSelection();
       socket.emit('cursor-update', {
         position: selection.anchorOffset
       });
     });
     

   • 变化节流处理

     // 使用RxJS进行输入防抖
     textInput$.pipe(
       auditTime(300), // 300ms收集一次变化
       distinctUntilChanged()
     ).subscribe(sendToServer);
     

   • 版本控制

     class DocumentModel {
       constructor() {
         this.version = 0; // 当前版本号
         this.pendingOps = []; // 待确认操作队列
       }
     }
     

3. 性能优化

   • 组件级缓存：对高消耗组件进行LRU缓存
   • 代码分割：动态加载非关键组件
   • 服务端负载均衡：通过Kubernetes实现自动扩缩容

---

明日预告：

• HTTP缓存策略详解
• Vue3 Teleport原理
• 大规模表单性能优化方案

---

坚持每日三题，未来更进一步！如果你也在准备面试，欢迎一起刷题打卡！