网站数据库如何导入数据库文件,信息公开和网站建设工作总结,深圳响应式网站建设,如何做好电商这是我为准备前端/全栈开发工程师面试整理的第29天每日三题练习#xff1a; ✅ 题目1#xff1a;Web Components技术全景解析
核心三要素 Custom Elements#xff08;自定义元素#xff09; class MyButton extends HTMLElement {constructor() {super();this.attachShado…这是我为准备前端/全栈开发工程师面试整理的第29天每日三题练习 ✅ 题目1Web Components技术全景解析
核心三要素 Custom Elements自定义元素 class MyButton extends HTMLElement {constructor() {super();this.attachShadow({ mode: open });this.shadowRoot.innerHTML buttonslot/slot/buttonstylebutton { padding: 8px 16px; }/style;}
}
customElements.define(my-button, MyButton);Shadow DOM影子DOM !-- 使用示例 --
my-button点击我/my-buttonHTML Templates模板标签 template iduser-carddiv classcardh2slot namename/slot/h2/div
/template与主流框架对比
特性WebComponentsReact/Vue渲染引擎浏览器原生虚拟DOM样式隔离Shadow DOM天然支持CSS-in-JS/Scoped包体积无运行时需要框架运行时学习曲线较高中等
浏览器兼容方案
// 动态加载polyfill
if (!(customElements in window)) {await import(https://unpkg.com/webcomponents/webcomponentsjs);
}✅ 题目2React 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(无效凭证);}
});高可用设计方案
方案类型实现方式适用场景集群部署NginxKeepalived双活百万级QPS系统流量染色Header携带环境标识灰度发布动态限流Redis令牌桶算法秒杀活动 明日预告
TypeScript类型体操技巧Vue3编译器优化原理分布式链路追踪系统设计 坚持每日三题未来更进一步如果你也在准备面试欢迎一起刷题打卡
