最近在准备前端面试时，被一道基础题难住了：“请手写防抖函数，兼容边界场景并说明在项目中怎么用”。我翻了不少资料才弄懂，转头就跟身边的老程序员吐槽“这题对新人也太不友好了”，结果他一句话点醒我：“不是题难，是没人愿意花一下午，专门给新人讲透这种基础又关键的知识点”。直到我自己接手带新人，才彻底懂了这句话里的无奈，也终于明白，老程序员不爱带新人，从来都不是自私，而是无数次妥协后的清醒。

职场里的老程序员，大多是从新人阶段摸爬滚打过来的，谁都有过对着代码无从下手、盼着有人指点迷津的时刻。按理说，传承经验本是行业常态，但现实往往事与愿违。带新人的第一个难题，就是认知差带来的沟通成本。你以为“基础的DOM操作”是常识，新人却要反复追问“为什么要选querySelector而非getElementById”；你花半小时讲清业务逻辑框架，转头就发现他在无关细节上死磕，甚至把你梳理好的代码结构改得一团糟。更让人头疼的是，前端领域技术迭代极快，老程序员本身要应对需求迭代、线上BUG、技术优化等一堆事务，抽出时间手把手教新人，往往意味着自己要加班加点补进度。
像这种前端面试题，我其实已经整理好了一批，涵盖防抖节流、DOM操作、兼容性处理等高频考点。但整理完才更能体会老程序员的难处——这些看似基础的题目，背后藏着大量项目实操经验，不是简单扔一份整理好的题库就能讲透，反而会因为新人对题目背后逻辑的模糊，叠加出难以承担的责任风险。

JavaScript

1. 不会冒泡的事件有哪些？
2. mouseEnter 和mouseOver 有什么区别?
3. MessageChannel是什么，有什么使用场景?
4. async、 await 实现原理
5. Proxy能够监听到对象中的对象的引用吗？
6. 如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功?
7. 下面代码会输出什么？
8. 描述下列代码的执行结果
9. 什么是作用域链？
10. bind、call、apply有什么区别?如何实现一个bind?
11. common.js和es6中模块引l入的区别?
12. 说说vue3 中的响应式设计原理
13. script标签放在header里和放在body底部里有什么区别？
14. 下面代码中，点击”+3”按钮后，age的值是什么？
15. Vue中，created和mounted两个钩子之间调用时间差值受什么影响？
16. vue中，推荐在哪个生命周期发起请求?
17. 不会冒泡的事件有哪些？
18. mouseEnter 和mouseOver 有什么区别?
19. 为什么Node在使用es module时必须加上文件扩展名?
20. package.json文件中的 devDependencies和dependendes对象有什么区别?
21. React Portals 有什么用?
22. react 和 react-dom是什么关系?
23. MessageChannel是什么，有什么使用场景？
24. React 中为什么不直接使用requestIdleCallback?
25. 为什么react需要 fiber 架构，而Vue 却不需要？

CSS

1. css 中的 animation、transition,transform有什么区别?
2. 怎么做移动端的样式适配？
3. 相邻的两个inline-block节点为什么会出现间隔，该何解决？
4. grid网格布局是什么？
5. CSS3新增了哪些特性？
6. 怎么使用cSS3实现动画？
7. 怎么理解回流跟重绘？什么场景下会触发？
8. 什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？
9. 如果使用CSs提高页面性能？
10. 如何实现单行/多行文本溢出的首略样式？
11. 如何使用css完成视差滚动效果?
12. 怎么使用CSS 如何画一个三角形
13. 说说对CSS 工程化的理解
14. 怎么触发BFC，BFC有什么应用场景？
15. 单行文本怎么实现两端对齐？
16. 说说你对 CSS 模块化的理解
17. CSS 模块化的实现方式
18. 怎么让Chrome支持小于12px 的文字?
19. 怎么让Chrome支持小于12px的文字?
20. flexbox(弹性盒布局模型)是什么，适用什么场景？
21. 如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
22. 设备像素、css像素、设备独立像素、dpr、ppi 之间有什么区别?

HTML

1. 什么是DOM和 BOM?
2. 简单描述从输入网址到页面显示的过程
3. 一台设备的dpr，是否是可变的？
4. 前端效如何选择图片的格式？
5. 前端跨页面通信，你道哪些方法？
6. 说说你对Dom树的理解
7. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？
8. htm和css中的图片戏与渲染规则是什么样的？
9. title与h1的区别、b与strong的区别、与em的区别?
10. script标签为什么建议放在 body标签的底部(defer、async)
11. 说说你对 SSG 的理解
12. 什么是HTML5,以及和HTML的区别是什么?
13. 什么是渐进增虽和优雅降级？
14. Node 和Element 是什么关系?
15. 导致页面加载白屏时间长的原因有哪些，怎么进行优化？
16. 如何控制input输入框的输入字数？
17. 渐进式jpg有了解过吗？
18. 假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的图片？

React

1. 下面代码中，点击”+3”按钮后，age的值是什么？
2. React Portals 有什么用?
3. react和react-dom是什么关系?
4. React 中为什么不直接使用 requestIdleCallback?
5. 为什么react 需要 fiber 架构，而Vue 却不需要?
6. 子组件是一个Portal，发生点击事件能冒泡到父组件吗？
7. React 为什么要废弃componentWillMount、componentWillReceiveProps、componentWillUpdate这三个生命周期钩子？它们有哪些问题呢?React又是如何解决的呢？
8. 说说React render方法的原理?在什么时候会被触发?
9. 说说React事件和原生事件的执行顺序
10. 说说对受控组件和非受控组件的理解，以及应用场景？
11. 你在React项目中是如何使用Redux的？项目结构是如何划分的?
12. 说说对Redux中间件的理解？常用的中间件有哪些？实现原理？
13. 说说你对Redux的理解？其工作原理？
14. 说说你对immutable的理解？如何应用在react项目中?
15. 说说React Jsx转换成真实DOM过程?
16. 说说你在Reac项目是如何捕获错误的?
17. 说说React服务端宣染怎么做？原理是什么？
18. ReactFiber是如何实现更新过程可控?
19. Fiber 为什么是React 性能的一个飞跃？
20. setState是同步，还是异步的?

Vue

1. Vue 有了数据响应式，为何还要diff？
2. vue3为什么不需要时间分片?
3. vue3为什么要引入Composition API？
4. 谈谈 Vue 事件机制,并手写on、on、on、off、emit、emit、 emit、once
5. computed计算值为什么还可以依赖另外一个computed计算值?
6. 说一下vm.$set 原理
7. 怎么在Vue 中定义全局方法?
8. Vue中父组件怎么监听到子组件的生命周期？
9. vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么?
10. 说说vue3中的响应式设计原理
11. Vue中，created和mounted两个钩子之间调用时间差值受什么影响？
12. vue中，推荐在哪个生命周期发起请求？
13. 为什么react 需要 fiber 架构,而 Vue 却不需要?
14. SPA(单页应用)首屏加戏速度慢怎么解决?
15. 说下Vite的原理
16. Vue2.0为什么不能检查数组的变化，该怎么解决？
17. 说说Vue 页面渲染流程
18. vue中computedfDwatch区别
19. vuex中的辅助函数怎么使用？
20. 如果使用Vue3.0实现一个Modal，你会怎么进行设计?
21. Vue 3.0中Treeshaking特性是什么，并举例进行说明?
22. Vue3.0所采用的Composition Api与Vue2.x使用的Options Api有什么不同?
23. Vue3.0性能提升主要是通过哪几方面体现的？
24. Vue3.0的设计目标是什么？做了哪些优化?
25. 你是怎么处理vue项目中的错误的？

算法

1. 最大的钻石
2. 举例说明你对尾递归的理解，以及有哪些应用场景
3. 去除字符串中出现次数最少的字符，不改变原字符串的顺序。
4. 请手写”快速排序”
5. 洗牌算法
6. 什么是尾调用优化和尾递归？
7. 合并K个升序链表
8. 什么是时间复杂度？
9. 请手写“基数排序”

TypeScript

1. 说说对 TypeScript 中命名空间与模块的理解?区别?
2. 说说你对 typescript 的理解?与javascript 的区别?
3. Typescript中泛型是什么?
4. TypeScript中有哪些声明变量的方式？
5. 什么是Typescript的方法重载？
6. 请实现下面的 sleep 方法
7. typescript 中的 is 关键字有什么用?
8. TypeScrip支持的访问修饰符有哪些?
9. 请实现下面的 myMap 方法
10. 请实现下面的 treePath方法
11. 请实现下面的 product 方法
12. 请实现下面的 myAll 方法
13. 请实现下面的 sum 方法
14. 请实现下面的 mergeArray 方法
15. 实现下面的 firstSingleChar 方法
16. 实现下面的 reverseWord 方法
17. 如何定义一个数组，它的元紊可能是字符串类型，也可能是数值类型？
18. 请补充 objToArray数

注：篇幅所限本文就只贴一下题目了，文中的前端场景面试题汇总PDF已经打包完毕，希望对大家有帮助：https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material

其实更关键的是，责任归属的模糊性，让老程序员不敢放手带。新人写的代码出了BUG，最终要由负责人兜底；新人理解偏差导致需求延期，考核时问责的还是牵头人。有位老程序员就吐槽，他带过的新人，明明讲透了防抖和节流的区别，结果写代码时还是用混，上线后引发接口频繁请求，最后是他熬夜改BUG、写复盘才收尾。
有个同行也有类似经历，他曾花一周时间带新人做一个表单组件，反复核对过逻辑，结果上线后因新人漏写校验规则出现数据异常，最后是他顶着压力熬夜排查修复，还在复盘会上被领导点名“管理不到位”。次数多了，老程序员自然会形成防御心理：与其冒风险带新人，不如自己动手高效又稳妥。

还有些新人的态度，也慢慢消耗了老程序员的耐心。有的新人眼高手低，不屑于做基础工作，总想着一步登天写核心逻辑，却连最基本的代码规范都不遵守；有的新人依赖性极强，遇到一点问题就直接甩截图问答案，从不主动查文档、找资料，把老程序员当成免费的“解题工具”；更有甚者，学会了技巧就急于表现，把老程序员的经验成果当成自己的功劳，转头就忘了是谁手把手带他跨过的坑。这些情况，让本就稀缺的分享欲，慢慢被消耗殆尽。
说到底，老程序员不爱带新人，本质上是职场规则下的理性选择——时间成本过高、责任风险过大、情感价值失衡，三者叠加，让“传帮带”变成了一件吃力不讨好的事。但这并不意味着老程序员完全拒绝分享，真正让人愿意倾囊相授的新人，往往是有主动学习意识、懂得独立思考、懂得感恩的人。他们会提前做好功课，带着具体问题请教；会认真消化指导，及时反馈进度；会尊重老程序员的时间，不随意打扰。

职场从来不是学校，没有谁有义务必须带新人。老程序员的“不爱带”，是对自身精力的保护，也是对职场现实的妥协。而新人要做的，不是抱怨没人带，而是主动打破这种僵局——先沉淀基础能力，培养独立解决问题的意识，用态度和能力赢得信任。毕竟，真正的成长，从来不是靠别人推着走，而是自己主动闯出来的。愿每一位新人都能读懂这份无奈，也愿每一份真诚的经验分享，都能被珍惜、被回馈。