前端项目细节疑难点，你们面试都不拷打项目吗？

安安868
113 阅读7分钟

前端项目拷打公式请格外牢记：

技术深度（原理+优化） × 业务价值（STAR+数据） × 协作意识（工程化+沟通） = 通过率
  • 简历上的每项技术必须能展开3分钟；
  • 避免“流水账式”描述，多用场景化对比（如：“选A因为B在移动端不稳定，改用C后错误率降70%”）；
  • 被问业务时不回答“产品定的”，需体现用户场景洞察。

大厂面试官原话：“不怕你技术有盲区，就怕你只会背答案。” 展现思考过程和技术权衡能力比“正确率”更重要

 一、项目核心价值与难点（90%被问）

  1. 项目背景与目标

    • 高频问题：“介绍一个你最复杂的项目，解决什么业务问题？”

    • 回答策略：用STAR法则（背景→任务→行动→结果），突出业务痛点和你的贡献。

    • 案例：

      “后台系统需支持十几种动态表格（S），我负责封装配置驱动的表格组件（T），通过Schema配置实现字段联动和批量导出（A），被6个项目复用，减少60%重复代码（R）”。

    • 避坑：避免流水账，强调技术决策的业务驱动（如选Vue因团队熟悉+无SEO需求）。

  2. 难点与解决方案

    • 高频问题：“遇到的最大技术挑战？如何解决？”

    • 回答要点：将踩坑转化为能力证明，需包含：

      • 问题根源（如图片绑定用户因URL重复）
      • 方案对比（如生成唯一ID替代URL绑定）
      • 量化结果（如错误率降为0）。

 二、技术实现细节（80%被问）

  1. 关键技术原理

    • 高频问题：

      • “Vue/React响应式原理和Diff优化？”（答Proxy vs defineProperty、LIS算法）
      • “登录模块如何保证安全？”（答bcrypt加密+Token验证）
      • “路由守卫实现逻辑？”（答鉴权组件+Navigate跳转）。

  2. 组件与架构设计

    • 高频问题：

      • “封装过哪些组件？设计原则是什么？”（答高复用性+低耦合，如配置化表格）
      • “为何选Pinia而非Vuex？”（答模块化+Composition API兼容性）。

三、性能优化实践（75%被问）

  1. 指标优化策略

    • 高频问题：“如何提升首屏加载速度/LCP？”

    • 回答框架：

      • 网络层：SSR/静态资源CDN（TTFB从300ms→80ms）
      • 渲染层：组件懒加载+虚拟滚动（FCP提前40%）
      • 交互层：WebWorker处理大文件计算（INP从200ms→50ms）。

  2. 极端场景处理

    • 高频问题：

      • “大文件上传如何实现？”（答分片+秒传校验+并发控制）
      • “十万条数据渲染不卡顿？”（答虚拟滚动+分帧加载）。

 四、工程化能力（70%被问）

  1. 基建与协作

    • 高频问题：

      • “如何管理Monorepo项目？”（答pnpm workspace + Turborepo流水线）
      • “怎么做代码质量保障？”（答ESLint规则定制+Git Hooks拦截）。

  2. 工具链原理

    • 高频问题：

      • “Webpack/Vite区别？”（答Bundle vs ESM、HMR机制）
      • “Babel-runtime作用？”（答Polyfill按需引入减少污染）。

五、业务理解与协作（60%被问）

  1. 业务驱动技术

    • 高频问题：

      • “功能上线后的效果数据？”（需提前准备DAU/转化率等指标）
      • “为何用Echarts而不用D3？”（答快速交付+团队熟悉 vs 灵活性）。

  2. 跨团队协作

    • 高频问题：“如何与后端/产品沟通争议？”（答数据验证+原型DEMO说服）。

1-5年前端项目细节拷打重复题

image.png

在项目中有没有单独封装组件

在项目中发送请求怎么携带token

工作中有用到git吗

git版本发生冲突你怎么解决的

如何快速让一个盒子水平垂直居中

首屏加载白屏怎么进行优化

路由传参 query与 params区别

项目基础优化

对$nextTick异步渲染的理解

你是怎么对axios进行二次封装的，有什么作用

用戶token失效你是怎么处理的

说一下项目的流程

商品和增删改查

Element-UI的form表单验证你是怎么使用的

项目中的商品详情页你是怎么实现的

什么是数组扁平化

你这个项目登陆是怎么实现的

项目中的权限管理怎么实现的

Vue的$nextTick0方法有用到过吗

深拷贝与浅拷贝

在Vue是项目中如何打开新的页面

请解释一下微前端的概念以及它的主要优点和挑战？

image.png

  1. 用过echars与highchars么，你遇到哪些问题及如何解决的
  2. 项目开发中是用什么工具来管理代码的；说一下你是用过的工具用法(git. svn)
  3. 讲一下最近的这个项目中都负责什么
  4. 怎么判断是开发环境生产环境
  5. Vue如何在用戶没登陆的时候重定向登录界面？
  6. Vue项目常见优化点
  7. 异步解决方案有哪些？
  8. 移动端点击事件300ms延迟如何去掉？原因是什么?
  9. 如何实现函数的柯里化?比如add(1)(2)(3)
  10. 什么是反柯里化
  11. 如何避免回调地狱？
  12. 开发过程中遇到内存泄漏的问题都有哪些？
  13. 浏览器有哪些兼容问题，你封装过什么插件
  14. 假如A页面我定义了一个定时器，然后跳到B页面如果让A页面的定时器暂停
  15. 深拷贝是什么？项目哪里是用到了深拷贝？
  16. swiper插件从后台获取数据没问题，css代码啥的也没问题，但是图片不动，应该怎么解决？
  17. 常见内存泄漏
  18. 插入几万个dom，如何实现页面不卡顿?

102.插入几万个dom，如何实现页面不卡顿?

让创建插⼊节点的⼯作分批进⾏：

image.png

101. 常⻅内存泄漏

1、静态集合类，如HashMap、LinkedList等等。如果这些容器为静态的，那么它们的⽣命周期与程序⼀致，则容器中的对象在程序结束之前将不能被释放，从⽽造成内存泄漏。简单⽽⾔，⻓⽣命周期的对象持有短⽣命周期对象的引⽤，尽管短⽣命周期的对象不再使⽤，但是因为⻓⽣命周期对象持有它的引⽤⽽导致不能被回收。

2、各种连接，如数据库连接、⽹络连接和IO连接等。在对数据库进⾏操作的过程中，⾸先需要建⽴与数据库的连接，当不再使⽤时，需要调⽤close⽅法来释放与数据库的连接。只有连接被关闭后，垃圾回收器才会回收对应的对象。否则，如果在访问数据库的过程中，对Connection、Statement或ResultSet不显性地关闭，将会造成⼤量的对象⽆法被回收，从⽽引起内存泄漏。

3、变量不合理的作⽤域。⼀般⽽⾔，⼀个变量的定义的作⽤范围⼤于其使⽤范围，很有可能会造成内存泄漏。另⼀⽅⾯，如果没有及时地把对象设置为null，很有可能导致内存泄漏的发⽣。

4、内部类持有外部类，如果⼀个外部类的实例对象的⽅法返回了⼀个内部类的实例对象，这个内部类对象被⻓期引⽤了，即使那个外部类实例对象不再被使⽤，但由于内部类持有外部类的实例对象，这个外部类对象将不会被垃圾回收，这也会造成内存泄露。

5、改变哈希值，当⼀个对象被存储进HashSet集合中以后，就不能修改这个对象中的那些参与计算哈希值的字段了，否则，对象修改后的哈希值与最初存储进HashSet集合中时的哈希值就不同了，在这种情况下，即使在contains⽅法使⽤该对象的当前引⽤作为的参数去HashSet集合中检索对象，也将返回找不到对象的结果，这也会导致⽆法从HashSet集合中单独删除当前对象，造成内存泄露

6、缓存泄漏

内存泄漏的另⼀个常⻅来源是缓存，⼀旦你把对象引⽤放⼊到缓存中，他就很容易遗忘，对于这个问题，可以使⽤WeakHashMap代表缓存，此种Map的特点是，当除了⾃⾝有对key的引⽤外，此key没有其他引⽤那么此map会⾃动丢弃此值

7、监听器和回调

内存泄漏第三个常⻅来源是监听器和其他回调，如果客⼾端在你实现的API中注册回调，却没有显⽰的取消，那么就会积聚。需要确保回调⽴即被当作垃圾回收的最佳⽅法是只保存他的若引⽤，例如将他们保存成为WeakHashMap中的键。

由于篇幅原因就先展示到这里，觉得自己在前端面试中，拷打项目一直不满意，不够了解，不太确定今年中小厂前端面试官都会问什么项目细节，都可以拿去刷刷，参考根据自己项目做出答案，可以DD我。

avatar
文章
阅读
粉丝