前端面试每日三题 - 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>
   

与主流框架对比

浏览器兼容方案

// 动态加载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('无效凭证');
     }
   });
   

高可用设计方案

📅 明日预告：

• TypeScript类型体操技巧
• Vue3编译器优化原理
• 分布式链路追踪系统设计

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