7.11转转前端一面凉经

转转前端一面凉经总结如下：

• 自我介绍：面试官首先要求进行自我介绍，需清晰阐述个人技术栈、项目经历及与岗位相关的技能。
• React接触情况：被问及是否接触过React，需准备对React核心概念（如组件化、状态管理、虚拟DOM）的简要说明，并结合项目经验阐述应用场景。

• 实现过程：需描述如何通过封装通用表单组件（如输入框、下拉框）减少重复代码，可能涉及受控组件设计、状态提升、自定义事件处理等。
• 解决的问题：重点说明封装后如何提升开发效率（如快速复用）、统一表单验证逻辑、优化用户体验（如动态错误提示）。

• 实现方式：需解释Git合并冲突的解决流程，包括git pull、git merge或git rebase后的冲突标记处理，以及通过IDE或命令行工具（如git mergetool）手动解决冲突。
• 无法自动解决的情况：当冲突涉及复杂逻辑（如多文件修改、二进制文件冲突）或历史提交不清晰时，需人工介入分析代码差异并协调团队成员确认修改方案。

• 无痕埋点：需区分无痕埋点（自动采集用户行为，无需手动打点）与代码埋点（显式调用上报接口），并说明项目中采用的方案（如基于Sentry或自定义SDK的无痕埋点）。
• 复用性：强调埋点方案的模块化设计（如独立配置文件、统一上报接口），使其能快速适配不同业务场景（如PC端、移动端、小程序）。

• 具体实现：

  懒加载：通过IntersectionObserver或loading="lazy"属性实现图片/组件的延迟加载。

  代码分割：利用Webpack的SplitChunksPlugin或动态import()拆分代码，减少初始包体积。

  资源预加载：使用<link rel="preload">提前加载关键CSS/JS，或通过Service Worker缓存静态资源。

• 核心模块：需列举实习中负责的主要功能（如用户登录、数据可视化、订单管理），并说明技术实现（如JWT鉴权、ECharts图表库、Axios接口调用）。
• 成果量化：用数据体现贡献（如“优化登录流程后，用户流失率降低20%”）。

• 闭包作用：解释闭包如何实现数据封装（如模块模式）和状态保持（如防抖/节流函数），并举例说明使用场景（如私有变量、事件委托）。
• 深拷贝实现：需提供代码示例（如递归复制对象属性，处理Date、RegExp等特殊类型），或使用JSON.parse(JSON.stringify())的局限性（如无法复制函数、循环引用）。

• 实现方式：通过递归或async/await封装重试逻辑，例如：async function retryRequest(url, maxRetries = 3) { for (let i = 0; i < maxRetries; i++) { try { const res = await fetch(url); if (!res.ok) throw new Error('Request failed'); return res.json(); } catch (err) { if (i === maxRetries - 1) throw err; } }}

• 常见方法：

  CORS：服务器配置Access-Control-Allow-Origin响应头。

  JSONP：利用<script>标签的跨域特性（仅限GET请求）。

  代理服务器：开发环境配置Webpack代理，生产环境使用Nginx反向代理。

• 核心机制：基于Object.defineProperty()（Vue 2）或Proxy（Vue 3）实现数据劫持，结合发布-订阅模式通知视图更新。
• 流程说明：数据变化 → 触发setter → 通知Watcher → 更新DOM。

• hash模式：

  原理：通过window.onhashchange监听URL哈希变化。

  特点：兼容性好，但URL中包含#。

• history模式：

  原理：依赖HTML5的history.pushState()和popstate事件。

  特点：URL更简洁，但需服务器配置（如Nginx的try_files）。

• 优化性能：缓存计算密集型函数的返回值，避免重复计算。例如：const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
• 依赖项控制：仅当依赖项变化时重新计算，否则返回缓存值。

• 功能差异：

  indexOf()：返回字符串或数组中首次出现子串/元素的索引，未找到返回-1。

  includes()：返回布尔值，直接判断是否包含子串/元素。

• 使用建议：需索引时用indexOf()，仅需判断存在性时用includes()。

• 局限性：

  无法直接判断是否包含（需额外比较!== -1）。

  对NaN的判断失效（如[NaN].indexOf(NaN) === -1）。

  区分大小写（字符串搜索时）。

• 建议提问：

  团队技术栈与未来发展方向。

  面试官对候选人的核心能力期待。

  后续面试流程及时间安排。