前端面试每日三题 - Day 29

这是我为准备前端/全栈开发工程师面试整理的第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编译器优化原理
• 分布式链路追踪系统设计

---

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