快手前端（商业化）一面：性能指标、Vue 原理与浏览器缓存追问

《面试题目》

1. 请先做一下自我介绍。
2. 你面的是哪个部门的岗位？是前端吗？
3. 可以实习多长时间？
4. 你做的智能对话平台，Agent 架构是什么样的？
5. LCP 和 FCP 分别是什么？追问：页面已经完整呈现、但用户点击没有反应，这段时间算 LCP 还是 FCP？
6. Vue 中的 key 是做什么用的？
7. .vue 文件浏览器识别不了，浏览器是怎么理解 Vue 文件、怎么识别它的？
8. 浏览器的垃圾回收机制是怎样的？
9. 堆和栈有什么区别？
10. 浏览器的缓存策略有哪些？追问：为什么用最后修改时间无法区分内容是否变化？
11. 继续追问：ETag 是什么，它是怎么区分缓存是否变化的？
12. 问了一些 Git 指令。

《参考解析》

LCP、FCP 与「点了没反应」：FCP 是首次内容绘制，页面第一次画出文本或图片的时刻，衡量白屏何时结束；LCP 是视口内最大文本块或图片绘制完成的时刻，衡量主要内容何时可见。两者都只反映渲染进度，不反映可交互性，所以「页面已完整呈现、点击没反应」既不是 LCP 也不是 FCP，它属于交互响应，对应 INP（旧指标 FID），常见原因是主线程被长任务占住。LCP 只统计最大元素，加载中会被更大的元素刷新。

Vue 的 key：key 是虚拟节点在 diff 时的身份标识，同层比较时靠它判断新旧节点是否同一个，从而复用 DOM 与组件实例、只做移动而非销毁重建。列表用稳定业务 id 作 key，重排或插入时能保住输入框内容、焦点和组件状态；用 index 作 key，头部插入后身份错位，会出现状态串行和多余 patch。

浏览器如何理解 .vue 文件：浏览器只认 HTML、CSS 和 JavaScript，不认单文件组件。.vue 在构建期被拆开：template 编译成渲染函数，script 变成 ES 模块，style 抽成 CSS（scoped 会加属性选择器）。Vite 用 @vitejs/plugin-vue 按需编译，webpack 侧是 vue-loader，产物都是普通 JS 和 CSS，运行时由 Vue 生成虚拟节点再 patch 成真实 DOM——识别发生在构建期，不在浏览器里。

缓存策略与 ETag：强缓存看 Cache-Control（max-age、no-store、immutable）和 Expires，命中不发请求；协商缓存靠 Last-Modified / If-Modified-Since 与 ETag / If-None-Match，未变化返回 304。Last-Modified 的缺陷是精度只到秒（同一秒内多次修改判断不出）、内容没变但文件被 touch 会误判、多机与 CDN 的修改时间还可能不一致。ETag 是服务端为响应生成的指纹（常用内容哈希），能精确到字节级，并分强弱校验（W/ 前缀）；代价是要计算、多节点算法必须一致。

垃圾回收与堆栈：JS 引擎分代回收，新生代用 Scavenge 在两个半空间复制存活对象，熬过几轮晋升老生代，用标记—清除/整理并配合增量、并发标记减少停顿；存活判据是可达性，闭包长期持有大对象、全局变量、未解绑监听、脱离文档仍被引用的 DOM 都会泄漏。栈放调用帧、基本类型值和对象引用，空间小、按后进先出自动回收；堆放对象、数组、函数等大小不定的数据，由 GC 管理。