滴滴二面准备(一)

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


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平台创作效率提升)。

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

相关推荐
Filotimo_6 小时前
2.CSS3.(2).html
前端·css
yinuo7 小时前
uniapp微信小程序华为鸿蒙定时器熄屏停止
前端
gnip8 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
前端橙一陈9 小时前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~9 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技019 小时前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio10 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
家里有只小肥猫11 小时前
react 初体验2
前端·react.js·前端框架
慧慧吖@11 小时前
前端发送请求时,参数的传递格式
前端
L李什么李11 小时前
HTML——使用表格制作简历
前端·javascript·html