這是我為準備前端/全棧開發工程師面試整理的第27天每日三題練習，涵蓋了：

• CSS選擇器的優先級與權重計算機制
• Angular中的依賴注入（Dependency Injection）機制
• 設計一個支持實時協作編輯（如Google Docs）的前端系統

---

? 題目1：CSS選擇器優先級與權重計算機制

權重等級表（從高到低）

選擇器類型	權重值	示例
行內樣式	1000	<div style="color:red"/>
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原理
• 大規模表單性能優化方案

---

💪 堅持每日三題，未來更進一步！如果你也在準備面試，歡迎一起刷題打卡！