美团暑期前端二面整理笔记（五）
1. 大数相加的使用场景
答案
大数相加通常出现在金额、账单、统计、长整数 ID 或超过安全整数范围的场景。
- JavaScript 的
Number有安全整数上限。 - 超过这个范围直接相加会丢精度。
- 所以要么用
BigInt，要么按字符串逐位相加。
2. JS 的 Number 的范围
答案
JavaScript 的 Number 基于 IEEE 754 双精度浮点数。
- 安全整数范围是
-(2^53 - 1)到2^53 - 1。 - 超过这个范围会有精度问题。
- 大数相加不能直接转
Number算，应该按字符串从低位到高位逐位相加并处理进位。 0.1 + 0.2 !== 0.3的根因也是浮点数二进制表示精度误差。
3. 从计算机角度解释 Number 的范围
答案
JavaScript 的 Number 基于 IEEE 754 双精度浮点数。
- 安全整数范围是
-(2^53 - 1)到2^53 - 1。 - 超过这个范围会有精度问题。
- 大数相加不能直接转
Number算，应该按字符串从低位到高位逐位相加并处理进位。 0.1 + 0.2 !== 0.3的根因也是浮点数二进制表示精度误差。
4. setInterval 如果时间长了会发生什么
答案
setInterval 运行久了最常见的问题是任务堆积和时间漂移。
- 如果回调执行时间超过间隔时间，下一轮会继续排队。
- 页面卡顿、切后台或主线程繁忙时，也会导致显示不准。
5. timeout 中再调用 timeout 和直接用 interval 有什么区别，哪种在倒计时业务场景更好
答案
防抖和定时器题的关键是“控制触发频率”和“避免时间漂移”。
- 防抖适合输入框联想、搜索建议；节流适合滚动、拖拽。
- 轮询或倒计时更推荐递归
setTimeout，因为比setInterval更容易控制节奏，避免任务堆积。 - 倒计时展示时最好以真实时间戳为准，而不是单纯每次减一。
6. 怎样防止定时器的延迟显示
答案
定时器本身不保证绝对准时，所以倒计时不能只依赖“每秒减一”。
- 更稳妥的做法是保存目标结束时间。
- 每次刷新时用“目标时间 - 当前真实时间”重新计算剩余时长。
- 这样即使页面卡顿或切后台，也不会累计误差。
7. 如果用真实时间戳作为参照来更新倒计时，又可能产生什么问题
答案
防抖和定时器题的关键是“控制触发频率”和“避免时间漂移”。
- 防抖适合输入框联想、搜索建议；节流适合滚动、拖拽。
- 轮询或倒计时更推荐递归
setTimeout，因为比setInterval更容易控制节奏，避免任务堆积。 - 倒计时展示时最好以真实时间戳为准，而不是单纯每次减一。
8. 实现响应式方式有哪些
答案
常见响应式实现方式有两类：
Object.defineProperty，这是 Vue2 的核心思路。Proxy，这是 Vue3 的核心思路。
Proxy 的优势是能直接代理整个对象，对新增属性、删除属性、数组操作支持更自然。
9. 讲 flex 以及 flex 的一些属性
答案
Flex 题通常从三个层次回答：
- 主轴和交叉轴决定布局方向。
flex-grow决定剩余空间怎么分，flex-shrink决定空间不够时怎么压缩，flex-basis决定初始主轴尺寸。- “按比例分配剩余空间”里的剩余空间，就是容器可用空间减去各项基础尺寸之后的空间。
10. flex 按照比例分配剩余空间，剩余空间是怎么来的
答案
Flex 题通常从三个层次回答：
- 主轴和交叉轴决定布局方向。
flex-grow决定剩余空间怎么分，flex-shrink决定空间不够时怎么压缩，flex-basis决定初始主轴尺寸。- “按比例分配剩余空间”里的剩余空间，就是容器可用空间减去各项基础尺寸之后的空间。
11. flex-grow、shrink、basis
答案
Flex 题通常从三个层次回答：
- 主轴和交叉轴决定布局方向。
flex-grow决定剩余空间怎么分，flex-shrink决定空间不够时怎么压缩，flex-basis决定初始主轴尺寸。- “按比例分配剩余空间”里的剩余空间，就是容器可用空间减去各项基础尺寸之后的空间。
12. 虚拟列表渲染原理，性能差异
答案
虚拟列表的原理是只渲染可视区内容，从而把 DOM 数量控制在较小范围。
- 全量渲染适合数据量小，但数据一大就容易卡。
- 虚拟列表在大数据量场景下，首屏、滚动和内存表现都会更稳定。
13. web worker
答案
Web Worker 的作用是把计算密集型任务移出主线程，避免页面卡顿。
- 适合大文件 hash、复杂解析、图片压缩、数据预处理。
- 它不能直接操作 DOM。
- 主线程和 Worker 通过
postMessage通信，大对象传输时要注意成本。
14. FCP
答案
FCP 是 First Contentful Paint，表示页面首次绘制出有意义内容的时间。
- 它反映用户什么时候第一次“看到东西”。
- 影响 FCP 的常见因素有 HTML 返回速度、关键 CSS、首屏 JS 阻塞、字体和图片加载策略。
- 优化常见手段包括减少阻塞资源、拆包、SSR/预渲染、关键资源优先加载。
15. 页面加载过程哪个阶段影响哪个性能指标
答案
不同阶段影响的指标不同。
- 网络和服务端响应会影响 TTFB。
- 关键资源加载和首屏渲染会影响 FCP/LCP。
- 布局抖动会影响 CLS。
- 主线程长任务会影响交互指标。
16. vite 开发环境和生产环境区别
答案
Vite 开发态和生产态的核心区别在于构建策略不同。
- 开发态基于原生 ESM 按需加载模块，不做整包构建，所以启动和 HMR 很快。
- 生产态会走打包流程，对资源做压缩、分包、Tree Shaking 和静态资源输出。
- 所以不能只记“Vite 快”，要知道它是在哪个阶段快。
17. 聊 AI
答案
聊 AI 时可以从两个方向展开：
- 作为产品能力，AI 可以做问答、生成、检索增强。
- 作为研发工具，AI 可以提升编码、测试和文档效率。
关键不是泛泛而谈，而是结合真实项目说清楚边界和落地方式。
18. Vue 写一个倒计时组件，接收一个初始时间 prop 参数
答案
防抖和定时器题的关键是“控制触发频率”和“避免时间漂移”。
- 防抖适合输入框联想、搜索建议；节流适合滚动、拖拽。
- 轮询或倒计时更推荐递归
setTimeout，因为比setInterval更容易控制节奏，避免任务堆积。 - 倒计时展示时最好以真实时间戳为准，而不是单纯每次减一。
19. 大数相加
答案
JavaScript 的 Number 基于 IEEE 754 双精度浮点数。
- 安全整数范围是
-(2^53 - 1)到2^53 - 1。 - 超过这个范围会有精度问题。
- 大数相加不能直接转
Number算，应该按字符串从低位到高位逐位相加并处理进位。 0.1 + 0.2 !== 0.3的根因也是浮点数二进制表示精度误差。