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

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

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

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

一、JavaScript核心（15题）

基础概念（5题）

概念题：

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

编码题：

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

javascript 复制代码

// 要求实现
function debounce(func, delay) {
  // 你的实现
}

function throttle(func, limit) {
  // 你的实现
}

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

javascript 复制代码

function deepClone(obj, map = new WeakMap()) {
  // 你的实现
}

异步编程（5题）

概念题：

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

编码题：

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

javascript 复制代码

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

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

javascript 复制代码

async function executeSequentially(asyncFunctions) {
  // 你的实现
}

ES6+特性（5题）

概念题：

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

编码题：

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

javascript 复制代码

function sum(...args) {
  // 你的实现
}

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

HTML/CSS基础（5题）

概念题：

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

编码题：

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

html 复制代码

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

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

html 复制代码

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

浏览器与网络（5题）

概念题：

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

编码题：

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

javascript 复制代码

function isCssPropertySupported(property) {
  // 你的实现
}

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

javascript 复制代码

async function postData(url, data) {
  // 你的实现
}

性能优化（5题）

概念题：

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

编码题：

实现图片懒加载，当图片进入可视区域时再加载：

javascript 复制代码

class LazyLoad {
  constructor(selector) {
    // 你的实现
  }
}

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

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

React核心（8题）

概念题：

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

编码题：

实现一个简单的useState Hook：

javascript 复制代码

function useState(initialValue) {
  // 你的实现
}

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

javascript 复制代码

function withLogging(WrappedComponent) {
  // 你的实现
}

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

javascript 复制代码

function useWindowSize() {
  // 你的实现
}

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

jsx 复制代码

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

// 非受控组件示例
function UncontrolledInput() {
  // 使用ref实现
}

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

Vue核心（5题）

概念题：

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

编码题：

实现一个Vue指令，用于元素拖拽：

javascript 复制代码

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

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

javascript 复制代码

import { ref, computed } from 'vue';

export default {
  setup() {
    // 你的实现
  }
}

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

工程化与工具（7题）

概念题：

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

编码题：

配置一个Webpack loader，处理自定义文件类型：

javascript 复制代码

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

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

javascript 复制代码

class BuildInfoPlugin {
  apply(compiler) {
    // 你的实现
  }
}

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

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

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

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

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

学习建议：

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

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