前端面试每日三题 - Day 29

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

✅ 题目1：Web Components技术全景解析

核心三要素

Custom Elements（自定义元素）

javascript 复制代码

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);

Shadow DOM（影子DOM）

javascript 复制代码

<!-- 使用示例 -->
<my-button>点击我</my-button>

HTML Templates（模板标签）

html 复制代码

<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
包体积	无运行时	需要框架运行时
学习曲线	较高	中等

浏览器兼容方案

javascript 复制代码

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

✅ 题目2：React 18并发模式原理剖析

并发模式核心机制

可中断渲染

javascript 复制代码

// 使用startTransition标记非紧急更新
import { startTransition } from 'react';

function handleInput(text) {
  startTransition(() => {
    setSearchText(text); // 低优先级更新
  });
}

自动批处理优化

javascript 复制代码

// React 17及之前：多次渲染
setCount(c => c + 1);
setFlag(f => !f);

// React 18自动批处理：单次渲染

Suspense数据流

html 复制代码

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

性能优化示例

javascript 复制代码

// 使用useTransition管理加载状态
function App() {
  const [isPending, startTransition] = useTransition();
  
  return (
    <div>
      {isPending && <Spinner />}
      <button onClick={() => {
        startTransition(() => {
          loadData();
        });
      }}>
        加载数据
      </button>
    </div>
  );
}

✅ 题目3：微服务网关设计实践指南（Nodejs）

核心功能设计

动态路由配置

javascript 复制代码

// 使用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 });
});

熔断降级策略

javascript 复制代码

// 使用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('服务暂不可用')
  });
});

JWT鉴权流程

javascript 复制代码

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编译器优化原理
分布式链路追踪系统设计