Shopee面经 6/24 前端校招一面（感觉g）

Shopee前端校招一面问题解答如下：

• 响应式原理：Vue2使用Object.defineProperty实现响应式，存在数组监听和新增属性监听不完整的问题；Vue3改用Proxy，支持全类型监听且性能更高。
• 组合式API：Vue3引入setup函数和Composition API，逻辑复用更灵活，替代Vue2的Options API。
• 编译优化：Vue3的编译器通过静态节点标记和块树优化，减少运行时开销，渲染性能提升约1.3-2倍。
• 其他改进：支持Fragment（多根节点）、Teleport（组件穿透）、自定义渲染器等，TypeScript支持更完善。

• 设计理念：React推崇函数式编程和单向数据流，强调灵活性和可控性；Vue采用渐进式框架设计，更易上手。
• 响应式系统：React通过状态管理（如useState）触发重新渲染，Vue通过数据劫持自动追踪依赖。
• 模板语法：React使用JSX，将HTML嵌入JS；Vue使用模板语法（类似HTML），支持指令（如v-if）。
• 生态与扩展：React生态更庞大（如Redux、React Router），适合复杂应用；Vue生态更轻量（如Vuex、Vue Router），适合快速开发。

• 选择React的场景：

  需要高度动态化的UI（如数据可视化、复杂交互）。

  团队熟悉函数式编程或已有React生态项目。

  长期维护的大型项目，需灵活控制渲染逻辑。

• 选择Vue的场景：

  快速原型开发或中小型项目。

  团队偏好模板语法和渐进式学习曲线。

  需要内置动画、状态管理等开箱即用功能。

• 判断依据：项目规模、团队技术栈、开发效率需求、长期维护成本。

• 键必须是对象：WeakMap的键只能是对象（非原始值），值可以是任意类型。
• 弱引用：键是弱引用，若键对象无其他引用，会被垃圾回收机制回收，避免内存泄漏。
• 不可枚举：WeakMap没有size属性，也无法遍历键值对，保证隐私性。
• 适用场景：存储私有数据（如类实例的私有属性）、缓存依赖对象的数据。

• HTML5的datalist标签：<input list="suggestions" /><datalist id="suggestions"> <option value="选项1" /> <option value="选项2" /></datalist>
• 前端模拟：监听输入事件，通过AJax请求后端接口或本地数据过滤，动态显示下拉列表。
• 浏览器自动填充：利用浏览器保存的表单数据（如用户名、密码），需设置autocomplete属性：<input autocomplete="username" />

• 定义：触发事件后，等待一定时间（如500ms）再执行，若期间再次触发则重新计时。
• 应用场景：搜索框输入联想、窗口resize事件、滚动事件优化。
• 代码示例：function debounce(fn, delay) { let timer = null; return function(...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); };}

• CORS：后端设置响应头Access-Control-Allow-Origin，允许特定域名访问。
• JSONP：利用<script>标签不受同源策略限制，仅支持GET请求。
• 代理服务器：开发环境配置webpack-dev-server代理，生产环境使用Nginx反向代理。
• postMessage：跨窗口通信（如iframe与父页面）。

• postMessage：// 父页面发送消息iframe.contentWindow.postMessage('data', '
  https://target-domain.com'
  );// iframe接收消息window.addEventListener('message', (e) => { if (e.origin === '
  https://parent-domain.com'
  ) console.log(e.data);});
• document.domain：仅限同级子域名（如a.example.com和b.example.com），需双方设置document.domain = 'example.com'。

• 强缓存：

  响应头：Cache-Control: max-age=3600（相对时间）或Expires（绝对时间）。

  直接从本地缓存读取，不发起请求。

• 协商缓存：

  响应头：Last-Modified（资源最后修改时间）或ETag（资源唯一标识）。

  请求头：If-Modified-Since或If-None-Match，服务器对比后返回304或新资源。

• 回调函数：早期方式，易导致回调地狱。
• Promise：通过.then()链式调用，支持catch错误处理。
• Async/Await：基于Promise的语法糖，使异步代码像同步一样书写。async function fetchData() { try { const res = await fetch('url'); const data = await res.json(); } catch (e) { console.error(e); }}

• 定义：发布-订阅模式，解耦生产者和消费者。
• 前端应用：

  事件总线（如EventEmitter）。

  状态管理（如Redux的中间件、Vuex的actions）。

  Web Worker通信。

• 关键路径：

  解析HTML生成DOM树。

  解析CSS生成CSSOM树。

  合并DOM和CSSOM生成渲染树（Render Tree）。

  布局（Layout）计算元素位置和尺寸。

  绘制（Paint）将像素渲染到屏幕。

• 优化：减少重绘（Repaint）和回流（Reflow），如避免频繁操作DOM、使用CSS硬件加速。

• 题16（最接近的三数之和）：排序后双指针夹逼，时间复杂度O(n2)。
• 题18（四数之和）：类似三数之和，外层循环加双指针，注意去重。
• 题1696（跳跃游戏VI）：动态规划或单调队列优化，记录最大值。

建议：针对算法题，需结合具体题目描述分析边界条件和优化思路，面试前可重点练习双指针、动态规划等高频题型。