钉子的生活日记
文章目录

牛客字节 Data AML 前端一面整理（CSS Grid/Flex / TS / AIGC / MCP / LLM 记忆）（二十一）

收录日期：2026-05-06
关键词：前端、CSS、Grid、Flex、TypeScript、AIGC、MCP、LLM、Prompt、工程化

1. CSS Grid vs Flex 的差异？各自适合什么场景？

参考答案

  • 维度：Flex 更偏“一维布局”（一行或一列的主轴排列）；Grid 是“二维布局”（行列同时控制）。
  • 对齐与分配：Flex 擅长在主轴/交叉轴做对齐、分配剩余空间；Grid 擅长精确网格划分与区域布局（grid-template-areas）。
  • 典型选择：
    • 导航栏、按钮组、标签、卡片列表（简单流式）优先 Flex。
    • 页面整体栅格、复杂仪表盘、多行多列对齐严格的组件优先 Grid。

2. 为什么很多时候 Flex 会更“好用”？Grid 什么时候反而更清晰？

参考答案

  • Flex 适配内容尺寸变化（自适应）更直观：flex-grow/shrink/basis 能快速实现“某些元素占满剩余空间”。
  • Grid 更清晰的场景：
    • 需要同时约束行列，并让元素在“网格区域”内定位（比如左侧固定栏 + 右侧两行内容 + 底部通栏）。
    • 多个组件需要严格对齐同一条列线（例如表单多列对齐、后台列表栅格）。

3. 大型系统如何避免 CSS 污染？

参考答案

  • 作用域隔离：CSS Modules / Scoped CSS（Vue SFC）/ Shadow DOM（Web Components）。
  • 命名约束：BEM + 统一前缀；避免无约束的全局 tag/通配选择器。
  • 层级控制：减少深层选择器；用 :where() 降低优先级；用层叠层 @layer（支持时）管理覆盖顺序。
  • 工程化约束：Stylelint 规则（禁用 !important、限制选择器深度、限制全局样式目录）。
  • 组件库策略：基础样式（reset/主题变量）集中；业务样式尽量组件内封装。

4. TypeScript 中 interface 与 type 的区别？如何选择？

参考答案

  • interface：
    • 更适合描述“对象形状”，支持 extends，并支持声明合并（同名 interface 会合并）。
    • 常用于公共 API、库类型、可扩展的对象契约。
  • type：
    • 更通用：可做联合/交叉、条件类型、映射类型、模板字面量类型等；可为任意类型起别名。
    • 更适合表达“组合/运算”出来的类型。
  • 实务建议：
    • 对象公共契约优先 interface；复杂运算/联合表达优先 type。
    • 团队统一风格比“绝对优劣”更重要。

5. 机器学习 / 深度学习 / AIGC 的关系？

参考答案

  • 机器学习（ML）：从数据中学习规律的总称，包含监督/无监督/强化学习等。
  • 深度学习（DL）：ML 的子集，用深层神经网络（CNN/RNN/Transformer 等）学习表示。
  • AIGC：更偏“应用范畴/任务类型”（生成文本/图像/音频/代码等），通常依赖 DL（尤其是大模型）。

6. MCP 是什么？解决什么问题？

参考答案

  • MCP（Model Context Protocol）是让模型“以统一协议访问外部上下文与工具”的一种标准化方式。
  • 价值：
    • 统一工具调用与数据访问（文件、数据库、搜索、内部系统等）的接口形态；
    • 让 Agent/应用在不同工具与模型之间更可移植、可组合；
    • 通过“受控能力暴露”降低把敏感能力直接塞进 Prompt 的风险。

7. 项目里如何实现 LLM 的“上下文记忆”（Memory）？

参考答案

  • 短期记忆（会话内）：
    • 维护 messages[]（system/user/assistant/tool），对超长内容做滑窗、摘要、重要片段保留；
    • 用检索或规则提取“关键事实”（用户偏好/约束/已确认结论）放入固定位置（如 system 或 memory 区块）。
  • 长期记忆（跨会话）：
    • 将可复用事实写入存储（KV/文档库/向量库），按用户/项目分桶；
    • 触发策略：显式保存（用户确认）+ 隐式保存（高置信度且稳定的信息）。
  • 召回策略：
    • 语义检索（embedding）+ 关键词检索（BM25）混合；
    • 召回后做“去重 + 可信度排序 + 最终摘要注入”，避免把噪声原样塞回上下文。
  • 安全与隐私：对 PII 做脱敏/授权；对工具输出做过滤与审计。

8. 算法题：给定数字长度 n、数 m、数组 k，用 k 的数字组成不超过 m 的最大数

参考答案

  • 典型建模为数位 DP / 受限构造：
    • 先将 m 转为长度为 n 的数位数组（若 m 位数小于 n，答案就是用 k 里最大数字重复 n 次；若大于 n，同理）。
    • 将 k 排序，尝试从高位到低位构造，维护是否已经“小于 m”（tight/less 标记）。
  • 一种可实现的思路（贪心 + 回溯）：
    1. 从高位开始，尽量放不超过 m[i] 的最大可用数字；
    2. 若某一位无法放置（所有可选数字都大于 m[i]），则回退到前一位，把前一位降到更小的可选数字，然后后续位全填 k 最大数字；
    3. 一直回退直到成功或无解（无解时通常返回全 0 或按题意处理）。
  • 复杂度：若 k 大小为 d，回溯最多 n 次，每次二分/倒序找可放数字，整体约 O(n log d)（实现得当）。