前端面试每日三题 - Day 29

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


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

核心三要素

  1. 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);
  2. Shadow DOM(影子DOM)

    javascript 复制代码
    <!-- 使用示例 -->
    <my-button>点击我</my-button>
  3. 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并发模式原理剖析

并发模式核心机制

  1. 可中断渲染

    javascript 复制代码
    // 使用startTransition标记非紧急更新
    import { startTransition } from 'react';
    
    function handleInput(text) {
      startTransition(() => {
        setSearchText(text); // 低优先级更新
      });
    }
  2. 自动批处理优化

    javascript 复制代码
    // React 17及之前:多次渲染
    setCount(c => c + 1);
    setFlag(f => !f);
    
    // React 18自动批处理:单次渲染
  3. 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)

核心功能设计

  1. 动态路由配置

    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 });
    });
  2. 熔断降级策略

    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('服务暂不可用')
      });
    });
  3. 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编译器优化原理
  • 分布式链路追踪系统设计

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

相关推荐
小兵张健2 小时前
价值1000的 AI 工作流:Codex 通用前端协作模式
前端·aigc·ai编程
sunny_2 小时前
面试踩大坑!同一段 Node.js 代码,CJS 和 ESM 的执行顺序居然是反的?!99% 的人都答错了
前端·面试·node.js
拉不动的猪3 小时前
移动端调试工具VConsole初始化时的加载阻塞问题
前端·javascript·微信小程序
ayqy贾杰4 小时前
Agent First Engineering
前端·vue.js·面试
IT_陈寒4 小时前
SpringBoot实战:5个让你的API性能翻倍的隐藏技巧
前端·人工智能·后端
iceiceiceice5 小时前
iOS PDF阅读器段评实现:如何从 PDFSelection 精准还原一个自然段
前端·人工智能·ios
大金乄5 小时前
封装一个vue2的elementUI 表格组件(包含表格编辑以及多级表头)
前端·javascript
葡萄城技术团队6 小时前
【性能优化篇】面对万行数据也不卡顿?揭秘协同服务器的“片段机制 (Fragments)”
前端
程序员阿峰6 小时前
2026前端必备:TensorFlow.js,浏览器里的AI引擎,不写Python也能玩转智能
前端
Jans6 小时前
Shipfe — Rust 写的前端静态部署工具:一条命令上线 + 零停机 + 可回滚 + 自动清理
前端