腾讯-1年社招-前端面试

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 10 道题。答案默认折叠，便于先自行作答。 1. 讲一下你的第一个项目 题目要点 突出难点与解决方案，亮点强调可扩展性与价值。 参考答案 第一个项目是一个内部管理系统，主要功能是数据可视化和表单管理。难点在于表单项类型复杂、交互逻辑多。解决方案是抽象出一套动态表单引擎，通过 JSON 配置生成组件，既降低了开发成本，也提升了可扩展性。项目的亮点在于统一了交互和样式规范，同时通过可配置化提高了可维护性。 2. 为什么选择 Vue3 + Vite 而非 React/Webpack 题目要点 Vue3 → 响应式系统和语法优势；Vite → 构建性能显著提升。 参考答案 Vue3 在响应式系统上引入了 Proxy，更适合处理复杂响应式数据，语法上对团队更友好。Vite 基于 ESBuild 和原生 ESM，构建速度远快于 Webpack，特别是在开发阶段的冷启动和热更新体验明显更优。而 Webpack 尽管生态成熟，但在开发构建效率上落后。 3. Vite 的构建速度比 Webpack 快多少 题目要点 冷启动快一个数量级，HMR 延迟极低，原因是按需编译 vs 整包构建。 参考答案 在实际项目中，冷启动通常能快 10 倍以上。例如一个中大型项目，Webpack 启动需要 20-30 秒，Vite 一般在 1-3 秒即可完成；热更新延迟也从秒级缩短到 100ms 以内。这是因为 Vite 基于原生 ESM 做按需编译，而 Webpack 是整包构建。 4. FCP 从 3.2s 降到 1.1s，具体做了哪些优化？ 题目要点 构建优化 + 资源优化 + 网络优化 + SSR 骨架屏。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮共 15 道题。答案默认折叠，便于先自行作答。 1. 讲一下项目的难点和亮点 题目要点 突出解决问题的能力，说明遇到过的复杂问题和优化方案，亮点要体现价值和可扩展性。 参考答案 在大型前端项目中，常见难点在于性能优化和复杂业务的抽象。比如数据量大时页面渲染和交互卡顿，需要通过虚拟列表、懒加载、分片渲染等方式解决；跨端适配和复杂状态管理也是典型难点。亮点可以体现在工程化和架构设计上，例如通过模块化拆分、微前端架构提高可维护性，或通过自动化工具链提升研发效率。 2. 项目的规范是如何制定的，如何执行的 题目要点 强调自动化工具与制度双管齐下，执行靠工具、评审和 CI 流程。 参考答案 前端规范一般从编码规范、组件封装规范、目录结构、Git 提交规范等方面制定。执行时可以依赖工具保障，比如 ESLint + Prettier 自动化格式化，Husky + lint-staged 在提交时校验，CI/CD 流程中增加检测。对组件层面，约定统一的 API 风格和文档，保证多人协作一致性。 3. 说说vue中的diff算法 题库原题：说说vue中的diff算法 题目要点 diff算法是一种高效的比较算法，主要用于比较虚拟DOM节点，以确定如何更新真实DOM。它具有两个特点：只会在同层级进行比较，不会跨层级比较；在比较的过程中，循环从两边向中间收拢。 在Vue中，diff算法用于比较新旧VNode节点，以决定如何更新真实DOM。 这个过程分为以下几个步骤： 比较新旧VNode节点：如果新旧节点相同，则不做任何操作；如果新旧节点都不存在子节点，则直接结束比较；如果新旧节点都有子节点，则进入updateChildren函数比较子节点。 更新子节点：在updateChildren函数中，设置新旧VNode的头尾指针，然后从两边向中间比较。如果新旧头尾指针相同，则直接patchVnode；如果新旧头尾指针不同，则根据情况调用patchVnode、createElm创建新节点，或者从哈希表寻找key一致的旧VNode节点再进行分情况操作。 patchVnode方法：如果新旧节点都有文本节点且不相等，则设置真实dom的文本节点为新节点的文本节点；如果旧节点有子节点而新节点没有，则删除旧节点的子节点；如果旧节点没有子节点而新节点有，则将新节点的子节点真实化后添加到旧节点；如果两者都有子节点，则进入updateChildren函数比较子节点。 通过diff算法，Vue能够高效地比较新旧VNode节点，以决定如何更新真实DOM，从而提高页面渲染的性能。 参考答案 一、是什么 diff 算法是一种通过同层的树节点进行比较的高效算法 其有两个特点： 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较 diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较 二、比较方式 diff整体策略为：深度优先，同层比较 比较只会在同层级进行, 不会跨层级比较 比较的过程中，循环从两边向中间收拢 ...