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

---

? 題目1：Web Components技術全景解析

核心三要素

1. Custom Elements（自定義元素）

   class MyButton extends HTMLElement {constructor() {super();this.attachShadow({ mode: 'open' });this.shadowRoot.innerHTML = `<button><slot></slot></button><style>button { padding: 8px 16px; }</style>`;}
   }
   customElements.define('my-button', MyButton);
   

2. Shadow DOM（影子DOM）

   <!-- 使用示例 -->
   <my-button>點擊我</my-button>
   

3. HTML Templates（模板標簽）

   <template id="user-card"><div class="card"><h2><slot name="name"></slot></h2></div>
   </template>
   

與主流框架對比

特性	WebComponents	React/Vue
渲染引擎	瀏覽器原生	虛擬DOM
樣式隔離	Shadow DOM天然支持	CSS-in-JS/Scoped
包體積	無運行時	需要框架運行時
學習曲線	較高	中等

瀏覽器兼容方案

// 動態加載polyfill
if (!('customElements' in window)) {await import('https://unpkg.com/@webcomponents/webcomponentsjs');
}

---

? 題目2：React 18并發模式原理剖析

并發模式核心機制

1. 可中斷渲染

   // 使用startTransition標記非緊急更新
   import { startTransition } from 'react';function handleInput(text) {startTransition(() => {setSearchText(text); // 低優先級更新});
   }
   

2. 自動批處理優化

   // React 17及之前：多次渲染
   setCount(c => c + 1);
   setFlag(f => !f);// React 18自動批處理：單次渲染
   

3. Suspense數據流

   <Suspense fallback={<Loading />}><LazyComponent />
   </Suspense>
   

性能優化示例

// 使用useTransition管理加載狀態
function App() {const [isPending, startTransition] = useTransition();return (<div>{isPending && <Spinner />}<button onClick={() => {startTransition(() => {loadData();});}}>加載數據</button></div>);
}

---

? 題目3：微服務網關設計實踐指南（Nodejs）

核心功能設計

1. 動態路由配置

   // 使用Express實現
   const gateway = express();
   const routeTable = {'/user-service/*': 'http://user-cluster:3000','/order-service/*': 'http://order-cluster:3001'
   };gateway.all('*', (req, res) => {const path = req.path;const target = Object.entries(routeTable).find(([prefix]) => path.startsWith(prefix))?.[1];if (!target) return res.status(404).send();// 代理請求httpProxy.web(req, res, { target });
   });
   

2. 熔斷降級策略

   // 使用circuit-breaker-js
   const CircuitBreaker = require('circuit-breaker-js');
   const breaker = new CircuitBreaker({timeoutDuration: 5000,failureThreshold: 3
   });app.get('/api', (req, res) => {breaker.run(() => fetchService(), {success: data => res.send(data),failure: err => res.status(503).send('服務暫不可用')});
   });
   

3. JWT鑒權流程

   const jwt = require('jsonwebtoken');
   gateway.use((req, res, next) => {try {const token = req.headers.authorization.split(' ')[1];req.user = jwt.verify(token, SECRET_KEY);next();} catch (err) {res.status(401).send('無效憑證');}
   });
   

高可用設計方案

方案類型	實現方式	適用場景
集群部署	Nginx+Keepalived雙活	百萬級QPS系統
流量染色	Header攜帶環境標識	灰度發布
動態限流	Redis令牌桶算法	秒殺活動

---

📅 明日預告：

• TypeScript類型體操技巧
• Vue3編譯器優化原理
• 分布式鏈路追蹤系統設計

---

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