快手本地生活前端一面面经

快手本地生活前端一面面经核心内容总结如下：

• 自我介绍：需简洁清晰，突出技术栈（如 React/Vue/Taro）、项目经验及个人优势（如性能优化、工程化能力）。
• 项目介绍：重点说明项目背景、技术选型、个人职责及成果（如提升性能、优化用户体验）。

• useMemo 和 useCallback 的作用

  useMemo：缓存计算结果，避免重复计算。例如：

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);在项目中用于优化复杂计算或渲染开销大的组件。

  useCallback：缓存函数实例，避免子组件因函数引用变化而重复渲染。例如：

  const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);常用于事件处理函数或传递给子组件的回调。

• 图表性能优化

  虚拟滚动：仅渲染可视区域内的图表元素（如 ECharts 的 dataZoom）。

  按需渲染：动态加载数据，避免一次性渲染大量数据点。

  Web Worker：将复杂计算移至后台线程，避免阻塞主线程。

  节流/防抖：限制高频触发的事件（如滚动、缩放）的调用频率。

• 整体页面优化

  代码分割：通过动态导入（import()）拆分代码，减少首屏加载体积。

  懒加载：对图片、组件使用懒加载（如 React.lazy + Suspense）。

  预加载：提前加载关键资源（如通过 <link rel="preload">）。

  缓存策略：利用 Service Worker 或 HTTP 缓存（如 Cache-Control）缓存静态资源。

  减少重绘/回流：优化 CSS 选择器、避免频繁操作 DOM。

• 工具使用：

  Lighthouse：分析页面性能、SEO、可访问性等指标。

  Chrome DevTools：

  Performance：记录运行时性能，分析帧率、CPU 使用情况。

  Memory：检测内存泄漏。

  Network：监控资源加载时间、请求大小。

  React DevTools：检查组件渲染次数、useMemo/useCallback 是否生效。

• 自定义埋点：通过 performance.now() 或第三方库（如 Sentry）记录关键路径耗时。

• 核心功能：

  请求/响应拦截：统一处理错误、添加 Token、格式化数据。

  并发控制：限制同时发起的请求数量（如 P-Limit）。

  取消请求：支持通过 AbortController 取消未完成的请求。

  缓存：对不频繁变动的数据（如城市列表）进行本地缓存。

  重试机制：自动重试失败请求（如网络波动时）。

  Mock 数据：开发环境下模拟接口返回，脱离后端联调。

• 防抖函数（Debounce）

  function debounce(func, delay) { let timer = null; return function(...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => func.apply(this, args), delay); };}

• 大文件上传

  分片上传：将文件拆分为多个块（如 Blob），逐个上传。

  并发控制：限制同时上传的块数量（如 3 个）。

  断点续传：记录已上传的块索引，失败后从断点继续。

  合并请求：所有块上传完成后，通知服务器合并文件。

• 请求重试函数（retryGet）

  function retryGet(func, times, interval) { return new Promise((resolve, reject) => { const attempt = (currentTimes) => { func() .then(resolve) .catch((err) => { if (currentTimes >= times) reject(err); else setTimeout(() => attempt(currentTimes + 1), interval); }); }; attempt(1); });}

• 常见问题及解决：

  样式隔离：Taro 默认使用 CSS Modules，需注意类名冲突。

  跨端兼容性：部分 API 在 H5 和小程序端行为不一致（如路由跳转），需封装兼容层。

  性能优化：小程序端避免长列表渲染，使用 virtual-list 组件。

  环境判断：通过 process.env.TARO_ENV 区分不同端代码逻辑。

• React 16 核心更新：

  Fiber 架构：将渲染拆分为可中断的小任务，支持优先级调度。

  错误边界：通过 componentDidCatch 捕获子组件错误，避免整个页面崩溃。

  Portals：支持将组件渲染到 DOM 树外的节点（如模态框）。

  新的 Context API：替代旧的 contextType，支持动态更新。

• Fiber 核心：

  可中断与恢复：通过 requestIdleCallback 在浏览器空闲时执行渲染。

  优先级调度：区分高优先级（如用户输入）和低优先级（如数据加载）任务。

  并发渲染：支持同时更新多个组件，减少卡顿。

• Web 性能优化点：

  首屏加载：通过代码分割、懒加载减少体积。

  渲染引擎：浏览器使用 GPU 加速，但 DOM 操作开销大。

• RN 性能优势：

  原生渲染：通过 JavaScript 桥接原生组件（如 View、Text），避免 DOM 操作。

  预加载：App 启动时提前加载资源，实现“秒开”。

  线程模型：UI 线程与 JS 线程分离，避免阻塞渲染。

• 团队与业务：询问团队技术栈、项目方向（如本地生活领域的具体业务）。
• 面试流程：确认后续面试轮次、时间安排。
• 技术成长：了解团队对新人培养机制（如 mentor 制度、技术分享）。

总结：面试重点考察 React 生态知识、性能优化能力、工程化思维及手写代码的熟练度。需结合项目经验，清晰阐述技术选型原因及优化效果。