前端题目

1. JavaScript 基础与深入

• 闭包是什么？它有什么作用？

闭包是指一个函数可以“记住”并访问它定义时的作用域，而不是调用时的作用域。简单来说，就是函数与其外部作用域的变量一起形成的一个“封闭”环境。

作用：

• 闭包能够保存外部函数的局部变量，即使外部函数已经返回。

• 可以通过闭包来实现数据封装和私有变量

• 解释 this 在不同情况下的含义，并举例说明。

• 全局环境：this 指向全局对象（浏览器中为 window，Node.js 中为 global）。

• 函数调用：普通函数中 this 指向全局对象（严格模式下为 undefined）。

• 方法调用：this 指向调用该方法的对象。

• 构造函数：this 指向新创建的实例。

• 箭头函数：this 继承自外层函数的 this。

  ---

• JavaScript 的原型链是什么？它是如何工作的？

JavaScript 的原型链是一种对象间继承的机制。每个对象都有一个内部属性 [[Prototype]]（可以通过 proto 或 Object.getPrototypeOf 访问），指向另一个对象。当访问对象的属性或方法时，JavaScript 引擎会沿着原型链查找，如果找不到就会继续查找父对象，直到查找到 null 为止。

• 事件冒泡与事件捕获的区别是什么？

事件冒泡（Bubbling）和事件捕获（Capturing）是 DOM 事件流中的两种传播模式：

• 事件捕获：事件从根元素开始向目标元素传递，先触发父元素的事件。

• 事件冒泡：事件从目标元素开始向根元素传递，先触发目标元素的事件。

==默认情况下，事件是冒泡的==，除非显式指定为捕获。

• 如何实现一个深拷贝？请给出代码实现。

复制function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  let clone = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}

• 解释 Promise 和 async/await 的区别，并举例说明。

• Promise：用于处理异步操作，通过 then 和 catch 链接回调函数来处理异步结果。

• async/await：是基于 Promise 的语法糖，使异步代码看起来像同步代码，更加简洁。

• bind、call、apply 三者的区别与应用场景。

• bind：返回一个新的函数，绑定 this。

• call：立即执行函数并绑定 this，可以传入参数。

• apply：与 call 类似，唯一的区别是 apply 接收一个数组作为参数。

• 如何优化 JavaScript 中的性能问题？举例说明。

• 避免频繁的 DOM 操作：批量修改 DOM 或使用 documentFragment。

• 事件委托：避免在多个子元素上绑定事件，可以将事件绑定到父元素。

• 防抖和节流：在频繁触发事件时，使用防抖和节流来减少函数调用次数。

• 懒加载：仅在需要时加载资源，例如图片和模块。

• 缓存机制：缓存计算结果或请求数据，减少重复计算或请求。

2. React 与 Vue

• React 中的 虚拟 DOM 是什么？它如何提高性能？

虚拟 DOM 是 React 的核心特性，它是对真实 DOM 的一种抽象表示。每当组件的状态或数据变化时，React 会首先在虚拟 DOM 中更新，然后与真实 DOM 进行比对，找出差异并只更新那些变化的部分。这样可以避免直接对真实 DOM 的频繁操作，从而提高性能。

• React 中的 setState 是同步的还是异步的？

在react合成事件和声明周期中是表现为异步

在原生事件和setTimeout中表现为同步

• 在 React 中，如何优化组件的渲染性能？

• Vue 中的响应式原理是什么？Vue 是如何检测数据变化的？

• 如何在 React 中实现父子组件之间的数据传递？

• React 中的 Hooks 与传统的类组件相比有什么优势？

• Vue 的生命周期函数有哪些，如何使用它们？

• 你如何理解 React 中的 Context API？何时需要使用它？

• React 中的 useEffect 使用场景及常见问题。

3. 前端性能优化

• 前端性能优化的常见手段有哪些？请简要描述并给出实例。

• 如何避免页面卡顿？哪些是会引起卡顿的常见原因？

• 什么是懒加载？如何实现图片和组件的懒加载？

• Web 页面如何进行代码拆分？如何通过动态 import 实现按需加载？

• 什么是浏览器的重排与重绘？如何减少它们的影响？

• 如何优化 Web 页面的首屏加载速度？

• 如何利用浏览器缓存来优化前端性能？

4. 前端工程化与构建工具

• Webpack 的工作原理是什么？如何优化构建性能？

• 如何使用 Babel 进行代码转换，Babel 的插件和 preset 有哪些？

• 前端模块化的实现方式有哪些？分别有什么特点？

• 你在项目中使用过哪些构建工具（如 Webpack、Vite、Parcel 等），它们的优缺点是什么？

• 如何使用 PostCSS 来优化 CSS 代码？

• 请解释一下 tree shaking 是什么？如何实现代码的 tree shaking？

5. CSS

• CSS 选择器的优先级是如何计算的？

• Flexbox 与 Grid 布局的区别是什么？

• 如何实现响应式设计？使用哪些 CSS 技巧或工具来实现？

• 请说出你常用的 CSS 预处理器和框架，以及它们的优缺点。

• 什么是 BEM 规范？你如何理解并在项目中应用它？

• CSS 动画和过渡的区别，以及使用场景。

• 如何避免 CSS 样式的冲突和层叠问题？

6. 版本控制与团队协作

• 你在项目中如何使用 Git 进行版本控制？请描述常用的 Git 操作。

• 如何解决 Git 冲突？如何使用 Git 进行团队协作？

• 你如何管理和处理 Git 中的分支？解释一下常见的 Git 工作流（如 Git Flow）。

• 你有没有使用过 CI/CD 流水线？它在前端开发中的作用是什么？

7. 项目管理与架构

• 如何设计一个大规模的前端项目架构？你会考虑哪些因素？

• 如何将前端代码模块化和组件化？

• 在团队协作中，你如何保证代码质量？如何进行代码审查？

• 你是如何进行单元测试的？使用了哪些工具或框架？

• 如何处理前端与后端的接口文档和协作？

• 如何处理跨浏览器兼容性问题？

8. Web 安全

• 你了解哪些常见的 Web 安全漏洞？例如 XSS 和 CSRF。

• 如何防止跨站脚本攻击（XSS）？

• 如何防止跨站请求伪造（CSRF）攻击？

• 如何处理用户敏感信息的加密与传输安全问题？