美团前端面试，已收到 OC

1. 浏览器从输入 URL 到页面渲染

2. HTML 渲染过程

3. JS 的解析内容

4. JS 事件循环机制

执行主线程任务（同步任务）→ 遇到异步任务放入任务队列 → 栈清空后事件循环调度任务 → 每轮循环执行一个宏任务，之后清空所有微任务。

5. 浏览器与 Node.js 的事件循环区别

浏览器：单宏任务队列，每轮循环：1 宏任务 → 清空所有微任务。

6. Vue2 vs Vue3 响应式区别

Vue2 用 Object.defineProperty，只能劫持已有属性；Vue3 用 Proxy，可代理整个对象，支持属性新增/删除和数组下标修改。

7. Vue3 自定义响应式

通过 reactive 或 ref 创建代理对象，内部用 Proxy 拦截 get/set，依赖收集和触发更新由 effect、track、trigger 实现。

8. ref 的基础类型 vs 引用类型

基础类型：包装成 { value } 对象，拦截 value 的 get/set。

引用类型：先用 reactive 转为 Proxy，再赋给 ref.value。

9. Vite 热更新比 Webpack 快的原因

Vite 利用原生 ES 模块，不需要打包，改动时直接让浏览器重新请求受影响的模块；Webpack 需要重新构建依赖图，速度慢。

10. Vite 解析所有文件的原理

基于 ESBuild 做依赖预构建，开发时拦截浏览器对模块的请求，用插件系统（如解析 TS、Vue、CSS）转换为浏览器可识别的代码。

11. 首屏优化方式

代码分割、路由懒加载、Tree Shaking；图片懒加载、压缩、CDN；关键资源内联；合理缓存策略（强缓存 + 协商缓存 + Service Worker）。

12. 大文件分片加载

将文件按固定大小切片（如 1MB），前端并发请求各片段（Range 请求或自定义分片接口），最后合并成完整文件；可记录进度支持断点续传。

13. 强缓存

通过 Cache-Control、Expires 控制，命中后浏览器直接读本地，不发请求。

14. 缓存标识的生成位置

构建工具会在构建时给文件名加内容哈希（如 app.8f3d2.js），内容变化时生成新文件名，自动失效旧缓存。