后端开发者视角的前端开发面试题清单（50道）

现代前端开发面试题清单（50道）

后端开发者视角的前端核心知识

一、JavaScript核心（15题）

基础概念（5题）

概念题：

1. 解释JavaScript中的变量提升（hoisting）和暂时性死区（TDZ），以及let/const与var的区别。
2. 什么是闭包？闭包有哪些实际应用场景？闭包可能导致什么问题？
3. 解释原型链的概念，如何实现继承？ES6的class语法糖背后是什么原理？

编码题：
4. 实现一个防抖函数（debounce）和一个节流函数（throttle），并说明它们的区别和应用场景。

// 要求实现functiondebounce(func,delay){// 你的实现}functionthrottle(func,limit){// 你的实现}

5. 实现一个深拷贝函数，能够处理循环引用：

functiondeepClone(obj,map=newWeakMap()){// 你的实现}

异步编程（5题）

概念题：
6. 解释JavaScript的事件循环机制，包括宏任务和微任务的区别。
7. Promise有哪几种状态？解释Promise.all、Promise.race、Promise.allSettled的区别和使用场景。
8. async/await的原理是什么？它和Generator函数有什么关系？

编码题：
9. 实现一个简单的Promise，支持then方法和状态转换：

classMyPromise{constructor(executor){// 你的实现}then(onFulfilled,onRejected){// 你的实现}}

10. 有一个异步函数列表，要求按顺序执行，但每个函数执行时间不确定，如何实现？

asyncfunctionexecuteSequentially(asyncFunctions){// 你的实现}

ES6+特性（5题）

概念题：
11. 解释箭头函数和普通函数的区别（this绑定、arguments、constructor等）。
12. 什么是迭代器和生成器？Symbol.iterator有什么作用？
13. 解释Proxy和Reflect的用途，以及它们能实现什么模式？

编码题：
14. 使用解构赋值交换两个变量的值，不借助临时变量。
15. 使用扩展运算符和剩余参数实现一个函数，接受任意数量的参数并返回它们的和：

functionsum(...args){// 你的实现}

二、Web基础与性能（15题）

HTML/CSS基础（5题）

概念题：
16. 解释CSS盒模型，box-sizing: border-box和content-box的区别是什么？
17. 什么是BFC（块级格式化上下文）？如何创建BFC？BFC有什么作用？
18. Flex布局和Grid布局的主要区别是什么？各自适合什么场景？

编码题：
19. 实现一个水平垂直居中的布局（至少3种方式）：

<divclass="container"><divclass="centered">居中内容</div></div>

20. 实现一个两栏布局，左侧固定宽度200px，右侧自适应：

<divclass="layout"><divclass="left">左侧</div><divclass="right">右侧</div></div>

浏览器与网络（5题）

概念题：
21. 从输入URL到页面显示，浏览器经历了哪些关键步骤？（详细描述）
22. 什么是跨域问题？有哪些解决方案？CORS的工作原理是什么？
23. 对比Cookie、LocalStorage和SessionStorage的区别和适用场景。

编码题：
24. 实现一个函数，判断浏览器是否支持某个CSS属性：

functionisCssPropertySupported(property){// 你的实现}

25. 使用Fetch API发送一个POST请求，包含JSON数据和自定义请求头：

asyncfunctionpostData(url,data){// 你的实现}

性能优化（5题）

概念题：
26. 解释重绘（repaint）和重排（reflow）的区别，如何减少重排？
27. 什么是关键渲染路径？如何优化关键渲染路径？
28. 解释前端懒加载（Lazy Loading）的原理和实现方式。

编码题：
29. 实现图片懒加载，当图片进入可视区域时再加载：

classLazyLoad{constructor(selector){// 你的实现}}

30. 设计一个性能监控方案，收集页面加载时间、FPS等指标。

三、框架与工程化（20题）

React核心（8题）

概念题：
31. React的虚拟DOM是什么？为什么使用虚拟DOM？虚拟DOM的diff算法原理是什么？
32. 解释React Hooks的原理，为什么Hooks不能在条件语句中使用？
33. React中setState是同步还是异步的？在什么情况下是同步的？

编码题：
34. 实现一个简单的useState Hook：

functionuseState(initialValue){// 你的实现}

35. 实现一个高阶组件（HOC），用于给组件添加日志功能：

functionwithLogging(WrappedComponent){// 你的实现}

36. 使用useEffect实现一个自定义Hook，用于获取窗口大小：

functionuseWindowSize(){// 你的实现}

37. 实现一个受控组件和非受控组件的示例：

// 受控组件示例 function ControlledInput() { const [value, setValue] = useState(''); // 你的实现 } // 非受控组件示例 function UncontrolledInput() { // 使用ref实现 }

38. 在React中如何优化性能？使用React.memo、useMemo、useCallback的示例。

Vue核心（5题）

概念题：
39. Vue2和Vue3的主要区别是什么？Vue3的Composition API有什么优势？
40. 解释Vue的响应式原理（Vue2使用Object.defineProperty，Vue3使用Proxy）。
41. Vue中的nextTick有什么作用？实现原理是什么？

编码题：
42. 实现一个Vue指令，用于元素拖拽：

Vue.directive('drag',{// 你的实现})

43. 使用Vue3的Composition API实现一个计数器：

import{ref,computed}from'vue';exportdefault{setup(){// 你的实现}}

44. 在Vue中，父组件如何调用子组件的方法？子组件如何向父组件传递数据？

工程化与工具（7题）

概念题：
45. Webpack的构建流程是怎样的？Loader和Plugin有什么区别？
46. 什么是Tree Shaking？Webpack如何实现Tree Shaking？
47. 对比Webpack和Vite的构建原理和优缺点。

编码题：
48. 配置一个Webpack loader，处理自定义文件类型：

// webpack.config.jsmodule.exports={module:{rules:[// 你的配置]}}

49. 编写一个Webpack plugin，在构建完成后输出构建信息：

classBuildInfoPlugin{apply(compiler){// 你的实现}}

50. 设计一个前端错误监控和上报系统，需要考虑哪些方面？

• 错误类型捕获（JS错误、资源加载错误、Promise错误）
• 错误信息收集
• 错误上报策略
• 错误分析聚合

后端开发者关注的前端要点：

作为后端开发者，了解前端知识有助于：

1. 接口设计：理解前端数据需求，设计合理的API接口
2. 性能优化：前后端协作优化整体性能（如SSR、CDN、缓存策略）
3. 安全问题：理解XSS、CSRF等前端安全问题的防范
4. 部署协作：前后端分离部署、CI/CD流程协同
5. 全栈开发：快速原型开发和小型项目全栈实现

学习建议：

1. 先掌握核心：优先学习JavaScript核心和浏览器原理
2. 框架选择：选择一个主流框架（React或Vue）深入学习
3. 动手实践：通过实际项目巩固理论知识
4. 关注工程化：理解现代前端开发流程和工具链
5. 持续跟进：前端技术更新快，定期关注新技术趋势

此清单覆盖了现代前端开发的核心知识点，从基础到进阶，既包含理论概念也包含实际编码，适合后端开发者系统学习前端知识。