滴滴二面准备(一)

结合你的简历内容和技术面试问题,以下是一个结构化的回答建议,突出你的技术深度和项目经验:


2. 项目与实习经历

得物低代码落地页编辑器(核心项目)

  • 背景:解决软广落地页开发周期长、迭代慢问题。
  • 技术方案
    • B端:基于Iframe + Valtio状态管理 + Next.js SSR,实现实时预览(消除手动刷新)。
    • C端 :Next.js混合渲染 + 背景图预加载 + 组件懒加载 + 降级策略,首屏秒开率从15%→65%
  • 工程化:Monorepo + Turborepo + Git流程管理,保障迭代效率。
  • 成果:支持拖拽编排与动态表单配置,统一集成异构模型(.dll/.exe/.py)。

智能博客AI平台(字节青训营)

  • 痛点:解决博客平台AI多模态缺失(如图片/文档解析)。
  • 方案
    • 后端集成Coze Agent服务,SSE流式返回结果。
    • 前端封装对话框组件,支持多模态输入(文本/图片/PDF)及智能输出(Markdown/Mermaid)。
  • 优化:OAuth2鉴权 + ESWrapper解耦SSE逻辑,提升复用率。

个人网站(技术亮点)

  • WebGL动态粒子背景 + ECharts可视化 + 地图轨迹API。
  • 自研设备监听Hooks实现跨端响应式,部署前端监控与安全策略。

3. 代码考察

(1)this指向问题

javascript 复制代码
function Person() {
  this.name = "Liu";
  setTimeout(function() {
    console.log(this.name); // 输出undefined(非严格模式为window)
  }, 1000);
}
new Person();

👉 修正 :改用箭头函数(继承外层this)或bind

(2)Promise透传陷阱

javascript 复制代码
Promise.resolve(1)
  .then(() => {}) // 未传参 ⇒ 值透传到下一层
  .then(value => console.log(value)); // 输出1

(3)Async/Await优化嵌套

javascript 复制代码
// 优化前
fetchData().then(res => process(res)).then(...);

// 优化后
async function handleData() {
  const res = await fetchData();
  const processed = await process(res);
  return processed;
}

(4)对象扁平化

javascript 复制代码
const flatten = obj => 
  Object.entries(obj).flatMap(([k, v]) => 
    typeof v === 'object' ? flatten(v).map(([subK, val]) => [`${k}.${subK}`, val]) : [[k, v]]
  );

(5)手写Promise.all

javascript 复制代码
Promise.all = function(promises) {
  return new Promise((resolve, reject) => {
    let count = 0;
    const results = [];
    promises.forEach((p, i) => {
      Promise.resolve(p).then(res => {
        results[i] = res;
        if (++count === promises.length) resolve(results);
      }, reject); // 任一失败立即reject
    });
  });
};

4. 八股环节

(1)useState同步/异步?

  • 批处理更新:React 18默认自动批处理,异步更新状态(避免频繁渲染)。
  • 同步场景 :在setTimeout或原生事件中,setState同步执行(脱离React调度机制)。

(2)Hooks条件/循环限制

  • 禁止条件语句包裹:Hooks调用顺序依赖Fiber链表结构,条件破坏顺序会导致状态错位(React依赖调用顺序标识Hook)。
  • 循环问题:循环中调用Hook会破坏调用次数一致性(需确保每次渲染Hook数量不变)。

(3)Webpack热更新速度差异

  • 第二次更快:首次构建需完整编译,热更新(HMR)仅增量更新修改的模块,通过内存缓存未修改的chunk。
  • 缓存机制module.hot.accept监听依赖变更,复用缓存模块。

(4)Module/Chunk/Bundle区别

概念 说明
Module 源码文件(如JS/CSS模块),Webpack以依赖图组织。
Chunk 编译中间产物,由入口文件或动态导入(import())分割的代码块。
Bundle 最终输出的文件(一个或多个Chunk合并生成),如main.js

回答策略建议

  • 突出简历亮点:性能优化(得物项目65%提升)、可视化(WebGL/ECharts)、工程化(Monorepo/Turborepo)。
  • 结合项目答八股 :如答Promise.all时关联得物"统一任务调度函数"的异构调用经验;答Hooks限制时关联React Fiber理解。
  • 量化成果:奖项(ICA/超图)、性能指标、落地效果(如AI平台创作效率提升)。

面试官更关注"如何用技术解决业务问题",回答时紧扣"问题→方案→结果"逻辑,展现工程化思维。

相关推荐
lecepin3 小时前
AI Coding 资讯 2025-09-10
前端·javascript·面试
RestCloud3 小时前
PostgreSQL大表同步优化:如何避免网络和内存瓶颈?
前端·数据库·api
RestCloud3 小时前
iPaaS 与传统 ESB 的区别,企业该如何选择?
前端·架构
Mapmost3 小时前
三维场景加载卡顿?可能是显卡设置出了问题
前端
书源3 小时前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js
前端啵啵猪3 小时前
useCallback 和 useMemo,什么时候用才是有效的?
前端·react.js
星哥说事3 小时前
跨平台开源笔记神器,用DeepSeek写笔记 , 效率翻倍
前端
喜欢你,还有大家4 小时前
FTP文件传输服务
linux·运维·服务器·前端