2024最新版 前端面试笔试题目 全解析

1. 盒模型与 BFC

在 前端面试笔试题目 中，盒模型（Box Model）是基础中的基础。标准盒模型（W3C）中，width 和 height 仅包含 content；而 IE 盒模型中，width 和 height 包含 content、padding 和 border。面试官常要求手写代码实现 BFC（块级格式化上下文）以解决外边距塌陷或清除浮动问题。

如何触发 BFC？

• ⚡ 根元素或其他包含它的元素
• ⚡ float 的值不是 none
• ⚡ overflow 的值不是 visible
• ⚡ display 的值是 inline-block, table-cell, table-caption, flex, inline-flex
• ⚡ position 的值不是 static 或 relative

CSS 布局方案对比

1. 异步编程：Callback, Promise, Async/Await

随着项目复杂度增加，回调地狱（Callback Hell）成为痛点。Promise 引入了状态机机制，Async/Await 则是 Generator 的语法糖，使异步代码看起来像同步代码。在 前端面试笔试题目 中，手写 Promise 或实现一个并发控制器是常见的高阶考题。

Promise 基本用法示例

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: 'Frontend' };
      resolve(data);
    }, 1000);
  });
};
fetchData()
  .then(data => console.log(data))
  .catch(err => console.error(err));

2. 原型链与继承

JavaScript 没有类（Class）的概念（ES6 Class 只是语法糖），而是基于原型链实现继承。理解 __proto__ 和 prototype 的区别是掌握 JS 面向对象的关键。

1. Vue.js 响应式原理

Vue 2.x 使用 Object.defineProperty 拦截数据的变化，通过 getter 收集依赖，setter 触发更新。Vue 3.x 使用 ES6 Proxy 进行代理，性能更好，且能拦截数组操作和新增属性。

2. React 虚拟 DOM 与 Diff 算法

React 通过虚拟 DOM（Virtual DOM）减少直接操作真实 DOM 的开销。Diff 算法采用树形比较策略，仅比较同级节点，时间复杂度从 O(n^3) 优化至 O(n)。

1. 加载优化

减少 HTTP 请求数量，合并 CSS/JS 文件。使用 Gzip 压缩资源。启用浏览器缓存（Cache-Control, ETag）。使用 CDN 加速静态资源加载。

2. 渲染优化

避免频繁重排（Reflow）和重绘（Repaint）。使用 requestAnimationFrame 优化动画。图片懒加载（Lazy Load）减少首屏加载时间。虚拟列表（Virtual List）优化长列表渲染。

3. 代码优化

代码分割（Code Splitting）按需加载。防抖（Debounce）与节流（Throttle）优化高频事件。使用 Web Worker 处理耗时计算任务。

1. HTTP 版本演进

HTTP/1.1 存在队头阻塞问题，HTTP/2 引入多路复用、头部压缩，HTTP/3 基于 QUIC 协议（UDP），进一步降低延迟。在 前端面试笔试题目 中，面试官常问各版本的优缺点及适用场景。

2. 安全机制

CORS（跨域资源共享）解决跨域请求问题。CSRF（跨站请求伪造）通过 Token 或 SameSite Cookie 防御。XSS（跨站脚本攻击）通过输入过滤和输出编码防御。HTTPS 使用 SSL/TLS 加密传输数据。

1. 数组扁平化

将多维数组转化为一维数组。常用方法包括递归、reduce、toString 及 ES6 flat。

// 方法一：递归
function flatten(arr) {
  let result = [];
  for (let item of arr) {
    if (Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result.push(item);
    }
  }
  return result;
}
// 方法二：ES6 flat
const flattened = arr.flat(Infinity);

2. 手写防抖与节流

防抖（Debounce）：高频事件触发后，延迟执行，若期间再次触发则重新计时。节流（Throttle）：高频事件触发后，固定间隔执行一次。

// 防抖
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}