https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-38/Recent content in 腾讯-QQ浏览器-校招 on Last StandHugozh-cnSun, 06 Jul 2025 13:37:36 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-38/round-49/Sun, 06 Jul 2025 13:37:36 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-38/round-49/<blockquote> <p>← 已是第一轮 · <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-38/">返回本次面经</a> · 已是最后一轮 →</p> </blockquote> <p><strong>本轮概述：</strong> <strong>中高级难度</strong>。既有基础概念的深度考察，也有复杂业务场景的解决方案设计，对于校招同学有一定的挑战。</p> <p><strong>本轮要点：</strong> ### 考察范围</p> <p>这轮面试主要考察三个维度：</p> <ol> <li><strong>项目实战能力</strong>：通过虚拟列表、Token管理等具体技术方案考察解决复杂业务问题的能力</li> <li><strong>前端基础功底</strong>：涵盖浏览器原理、JavaScript核心机制、CSS布局、性能优化等核心知识</li> <li><strong>计算机基础</strong>：通过算法题考察数据结构和算法基础</li> </ol> <h3 id="重点准备知识点">重点准备知识点</h3> <ul> <li>虚拟列表等性能优化方案的深度理解和实践经验</li> <li>HTTP协议、浏览器工作原理、缓存机制等网络基础</li> <li>JavaScript事件循环、闭包、原型链等语言核心特性</li> <li>Vue/React框架原理，特别是响应式系统和虚拟DOM</li> <li>CSS布局方案和BFC等核心概念</li> <li>前端工程化和性能优化实践</li> <li>基础算法和数据结构</li> </ul> <h3 id="建议">建议</h3> <ul> <li>深入理解前端核心概念，不仅知其然还要知其所以然</li> <li>积累实际项目经验，特别是性能优化和复杂业务场景的解决方案</li> <li>保持对新技术的敏感度，了解技术发展趋势</li> <li>加强计算机基础，算法和数据结构是技术能力的重要体现</li> <li>培养系统性思维，能够从多个角度分析和解决问题</li> </ul> <p>本轮共 20 道题。答案默认折叠，便于先自行作答。</p> <h2 id="question-subjective-fbe5211ce8dc">1. 请讲一下你项目中的的虚拟列表，包括实现原理、优化过程以及如何设置缓冲区？</h2> <h3 id="题目要点">题目要点</h3> <ul> <li>核心原理：只渲染可视区域，动态计算显示范围</li> <li>关键技术：滚动监听、索引计算、位置缓存</li> <li>优化重点：动态高度处理、缓冲区设置、滚动性能</li> <li>实际考虑：内存占用与性能平衡</li> </ul> <details> <summary>参考答案</summary> <p>虚拟列表是解决大数据量列表渲染性能问题的核心方案。其实现原理基于&quot;只渲染可视区域&quot;的思想。</p> <p>具体实现上，首先需要确定容器的可视高度和每个列表项的高度。通过监听滚动事件，实时计算当前滚动位置对应的起始索引和结束索引。核心公式是：起始索引 = Math.floor(scrollTop / itemHeight)，结束索引 = 起始索引 + Math.ceil(containerHeight / itemHeight)。</p> <p>在优化过程中遇到的主要挑战是处理动态高度的列表项。解决方案是维护一个位置缓存数组，记录每个列表项的实际高度和累计偏移量。当列表项高度发生变化时，需要更新缓存并重新计算后续项的位置。</p> <p>缓冲区设置是性能优化的关键。通常在可视区域前后各增加5-10个列表项作为缓冲，具体数量需要根据列表项的复杂度和渲染耗时来调整。缓冲区过小会导致快速滚动时出现白屏，过大则会增加内存占用和渲染负担。</p> <p>对于滚动性能优化，还需要结合防抖节流、requestAnimationFrame等技术，确保滚动的流畅性。</p> </details> <h2 id="question-subjective-2e4835cecc28">2. 在虚拟列表中，如何结合防抖和节流技术优化性能？</h2> <h3 id="题目要点-1">题目要点</h3> <ul> <li>节流应用：滚动事件实时响应，保证连续性操作的流畅度</li> <li>防抖应用：计算密集操作、数据预加载等非实时场景</li> <li>组合策略：根据不同操作特性选择合适的优化方案</li> <li>参数调优：时间间隔需要平衡性能和用户体验</li> </ul> <details> <summary>参考答案</summary> <p>在虚拟列表的性能优化中，防抖和节流扮演着不同但互补的角色。</p> <p>对于滚动事件本身，节流是更合适的选择。因为滚动是连续性操作，用户期望得到实时反馈，而不是等待操作结束后才响应。通常设置16-33ms的节流间隔，对应60-30fps的更新频率，既保证了流畅度又避免了过度计算。</p> <p>防抖则主要用于一些计算密集型的操作。比如当滚动停止后，可能需要进行数据预加载、图片懒加载等操作，这些可以使用防抖来避免频繁触发。另外，对于搜索框结合虚拟列表的场景，搜索关键词的处理也适合使用防抖。</p> <p>在实际实现中，还需要考虑组合使用的场景。比如可以对滚动事件使用节流进行实时响应，同时对复杂的重新计算逻辑使用防抖进行优化。这样既保证了用户体验，又避免了不必要的性能消耗。</p> <p>需要注意的是，节流和防抖的时间设置需要根据具体业务场景调整，过短可能达不到优化效果，过长则会影响用户体验。</p> </details> <h2 id="question-subjective-07425dedaf84">3. 如何使用 requestAnimationFrame 优化虚拟列表的滚动性能？</h2> <h3 id="题目要点-2">题目要点</h3> <ul> <li>核心优势：与浏览器重绘周期同步，避免无效渲染</li> <li>应用场景：DOM更新调度、动画优化、时间切片</li> <li>性能提升：减少重排重绘、合并多次操作、避免掉帧</li> <li>注意事项：刷新率适配、兼容性考虑</li> </ul> <details> <summary>参考答案</summary> <p>requestAnimationFrame是浏览器提供的专门用于动画优化的API，它能够确保回调函数在浏览器下一次重绘之前执行，这对虚拟列表的滚动性能优化具有重要意义。</p>