https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-78/Recent content in 腾讯-2年社招-前端面试 on Last StandHugozh-cnSun, 07 Sep 2025 02:17:29 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-78/round-125/Sun, 07 Sep 2025 02:17:29 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-78/round-125/<blockquote> <p>← 已是第一轮 · <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-78/">返回本次面经</a> · <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-78/round-126/">第 1 轮</a> →</p> </blockquote> <p>本轮共 23 道题。答案默认折叠，便于先自行作答。</p> <h2 id="question-subjective-d92deba5d64c">1. Vue 3.0 相比 Vue 2.0 有哪些改进？</h2> <h3 id="题目要点">题目要点</h3> <p>响应式系统升级、Composition API、性能优化、TypeScript支持、Fragment支持</p> <details> <summary>参考答案</summary> <p>Vue 3.0 在架构层面进行了重大重构，采用了基于 Proxy 的响应式系统替代了 Object.defineProperty，这使得可以直接监听数组变化和动态属性添加。组合式 API 的引入提供了更好的逻辑复用和类型推导能力。在性能方面，通过 Tree-shaking 支持、更小的包体积、以及编译时优化显著提升了运行效率。</p> </details> <h2 id="question-subjective-0fc6cee72f3d">2. Composition API 解决了 Options API 的哪些问题？</h2> <h3 id="题目要点-1">题目要点</h3> <p>逻辑聚合、代码复用、类型推导、避免mixin问题</p> <details> <summary>参考答案</summary> <p>Options API 在处理复杂组件时会出现逻辑分散的问题，相关的数据、方法、计算属性被强制分离到不同的选项中。Composition API 通过 setup 函数将相关逻辑聚合在一起，提高了代码的可维护性。同时解决了 mixin 命名冲突和来源不清晰的问题，提供了更好的 TypeScript 类型推导支持。</p> </details> <h2 id="question-subjective-3c46deb606e6">3. Proxy 相比 Object.defineProperty 在响应式上有何优势？</h2> <h3 id="题目要点-2">题目要点</h3> <p>对象级别监听、动态属性支持、数组监听、更多拦截操作</p> <details> <summary>参考答案</summary> <p>Proxy 可以直接监听整个对象而不需要遍历每个属性，支持动态属性的添加和删除监听。对于数组操作，Proxy 可以直接监听数组的变化，而 Object.defineProperty 需要重写数组方法。Proxy 还支持更多的拦截操作，如 has、deleteProperty 等，提供了更完整的响应式能力。</p> </details> <h2 id="question-subjective-8d6eee18b772">4. nextTick 如何保证 DOM 更新后执行回调？</h2> <h3 id="题目要点-3">题目要点</h3> <p>事件循环、微任务队列、异步更新、降级策略</p>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-78/round-126/Sun, 07 Sep 2025 02:17:29 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-78/round-126/<blockquote> <p>← <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-78/round-125/">第 1 轮</a> · <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-78/">返回本次面经</a> · 已是最后一轮 →</p> </blockquote> <p>本轮共 9 道题。答案默认折叠，便于先自行作答。</p> <h2 id="question-subjective-9a287344c514">1. 讲一下你觉得比较有亮点的项目</h2> <h3 id="题目要点">题目要点</h3> <p>技术选型合理性、渐进式迁移策略、自动化工具、性能保障</p> <details> <summary>参考答案</summary> <p>在负责的一个大型电商平台重构项目中，面临着从传统 jQuery 架构向现代化 Vue 3 + TypeScript 架构迁移的挑战。项目的亮点在于采用了渐进式迁移策略，通过微前端架构实现新老系统的平滑过渡。设计了一套自动化的代码转换工具，将重复性的迁移工作自动化，提升了整体迁移效率 60%。同时建立了完善的性能监控体系，确保迁移过程中用户体验不受影响。</p> </details> <h2 id="question-subjective-3d6a09a5ba0d">2. 项目的难点，你是怎么推动的</h2> <h3 id="题目要点-1">题目要点</h3> <p>风险控制、分阶段实施、灰度发布、跨团队协作</p> <details> <summary>参考答案</summary> <p>最大的难点是在不影响线上业务的前提下完成大规模重构。通过制定详细的迁移计划，将整个项目拆分为多个独立的里程碑，每个阶段都有明确的交付物和验收标准。建立了灰度发布机制，新功能先在小范围用户中验证，逐步扩大覆盖范围。同时与产品、测试、运维团队建立了紧密的协作机制，确保各个环节的顺畅衔接。</p> </details> <h2 id="question-subjective-3118e233931d">3. 页面性能优化你做了哪些工作</h2> <h3 id="题目要点-2">题目要点</h3> <p>多维度优化、量化效果、监控体系、持续改进</p> <details> <summary>参考答案</summary> <p>从多个维度进行了系统性优化：资源层面实施了代码分割和懒加载，将首屏加载时间减少 40%；网络层面启用了 HTTP/2 和资源预加载，优化了关键渲染路径；渲染层面使用了虚拟滚动和组件缓存，提升了长列表的交互性能；同时建立了性能监控体系，通过 Performance API 和用户行为分析持续跟踪优化效果。</p> </details> <h2 id="question-subjective-d7098a03adf1">4. 相关的指标有哪些，怎么去衡量的，标准是什么</h2> <h3 id="题目要点-3">题目要点</h3> <p>Core Web Vitals、RUM监控、分类基准、持续监测</p> <details> <summary>参考答案</summary> <p>建立了完整的性能指标体系：Core Web Vitals 作为核心指标，包括 LCP（2.5s 以内）、FID（100ms 以内）、CLS（0.1 以内）；业务指标包括首屏加载时间、页面完全加载时间、接口响应时间等。通过 RUM（真实用户监控）收集线上数据，结合 Lighthouse 进行定期检测。制定了不同页面类型的性能基准，如首页 LCP 控制在 2s 内，列表页控制在 2.5s 内。</p> </details> <h2 id="question-95185ca6-291f-4160-b65d-f291dfdf8a4f">5. WebSocket 协议原理</h2> <blockquote> <p>题库原题：<a href="https://fe.ecool.fun/topic/95185ca6-291f-4160-b65d-f291dfdf8a4f">说下 websocket 的连接原理</a></p>