前端面试每日三题

前端面试每日三题 - Day 29

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

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

核心三要素

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

Shadow DOM（影子DOM）

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

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并发模式原理剖析

并发模式核心机制

可中断渲染

// 使用startTransition标记非紧急更新
import { startTransition } from 'react';function handleInput(text) {startTransition(() => {setSearchText(text); // 低优先级更新});
}

自动批处理优化

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

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）

核心功能设计

动态路由配置

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

熔断降级策略

// 使用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鉴权流程

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('无效凭证');}
});