2025年面试官常用的前端开发笔试考题

填空题 (20道)

1. React Hooks 中，用于模拟类组件生命周期 componentDidMount 的 Hook 是 ________。
   useEffect

2. 在 Vue 3 中，使用 ________ API 可以替代 Vue 2 中的 data 和 methods。
   Composition

3. Webpack 的 ________ 插件可以帮助将 CSS 提取到单独的文件中。
   MiniCssExtractPlugin

4. 在 JavaScript 中，Promise.________ 方法可以等待所有 Promise 完成，无论成功或失败。
   allSettled

5. TypeScript 中，________ 类型表示可以是任何类型，但更安全替代 any 的类型。
   unknown

6. 在 CSS 中，________ 属性可以创建一个新的层叠上下文。
   isolation

7. 浏览器事件传播的三个阶段是：捕获阶段、________ 和冒泡阶段。
   目标阶段

8. React 中，________ 方法可以优化组件性能，避免不必要的渲染。
   React.memo

9. HTTP/2 的多路复用是通过 ________ 实现的。
   流(Stream)

10. 在 Node.js 中，________ 模块提供了操作文件系统的 API。
    fs

11. Web 性能优化中，________ 技术可以将关键 CSS 内联到 HTML 中。
    Critical CSS

12. 在 JavaScript 中，Object.________ 方法可以创建一个新对象，使用现有对象作为新对象的原型。
    create

13. CSS 中，________ 单位相对于视口宽度的 1%。
    vw

14. Vue 中，________ 指令可以实现条件渲染。
    v-if

15. React 的 ________ 特性可以在不编写 class 的情况下使用 state 和其他 React 特性。
    Hooks

16. 在 JavaScript 中，________ 是一种特殊对象，可以暂停和恢复执行。
    Generator

17. Webpack 的 ________ 配置选项决定了如何输出编译后的文件。
    output

18. 在 CSS 中，________ 布局模式使得子元素可以自动调整大小和位置。
    Flex

19. TypeScript 中，________ 关键字可以定义一个只能被赋值一次的变量。
    const

20. 浏览器存储中，________ API 提供了异步的键值对存储，且容量比 localStorage 大。
    IndexedDB

选择题 (10道)

1. 关于 Virtual DOM 的描述，以下哪项是错误的？
   A. 提高渲染性能
   B. 是真实 DOM 的内存表示
   C. 直接操作浏览器 DOM
   D. 通过 diff 算法找出最小更新
   C

2. 下列哪个不是 CSS 预处理器？
   A. Sass
   B. Less
   C. PostCSS
   D. Stylus
   C

3. 关于 JavaScript 的事件循环，以下说法正确的是：
   A. 微任务队列优先于宏任务队列执行
   B. setTimeout 是微任务
   C. Promise.then 是宏任务
   D. 事件循环每次只执行一个任务
   A

4. 在 React 中，以下哪个 Hook 不能用于性能优化？
   A. useMemo
   B. useCallback
   C. useEffect
   D. useReducer
   D

5. 关于 Webpack 的 tree shaking，以下描述错误的是：
   A. 依赖 ES6 模块语法
   B. 可以消除未使用的代码
   C. 只适用于生产环境
   D. 需要配置 sideEffects
   C

6. 以下哪个不是 HTTP/2 的特性？
   A. 多路复用
   B. 头部压缩
   C. 服务器推送
   D. 持久连接
   D

7. 关于 CSS 的 BFC (Block Formatting Context)，以下描述错误的是：
   A. 浮动元素不会影响 BFC 内部布局
   B. BFC 可以包含浮动元素
   C. BFC 区域不会与浮动元素重叠
   D. overflow: visible 可以创建 BFC
   D

8. 在 TypeScript 中，以下哪个不是基本类型？
   A. any
   B. void
   C. never
   D. object
   D

9. 关于 Vue 的响应式原理，以下说法错误的是：
   A. 使用 Object.defineProperty (Vue 2)
   B. 使用 Proxy (Vue 3)
   C. 数组的变化可以直接检测
   D. 需要在 data 中预先声明属性
   C

10. 关于前端安全，以下哪种攻击不是 XSS 的防御方法？
    A. CSP
    B. 输入转义
    C. HttpOnly Cookie
    D. CSRF Token
    D

判断题 (5道)

1. React 的 useMemo Hook 可以完全替代 shouldComponentUpdate 生命周期方法。
   ×

2. Vue 3 的 Composition API 可以在 Vue 2 中使用 @vue/composition-api 插件实现。
   √

3. CSS 的 z-index 属性在没有设置 position 属性的元素上也会生效。
   ×

4. JavaScript 中的 const 声明的变量值完全不可变。
   ×

5. Webpack 的 devServer 配置项 hot: true 表示启用模块热替换(HMR)。
   √

简答题 (5道)

1. 解释 React 的 Fiber 架构及其解决的问题。
   Fiber 是 React 16 引入的新的协调引擎，将渲染工作拆分为小单元，可中断和恢复，实现优先级调度，支持异步渲染，改善复杂应用的性能表现。

2. 描述 Vue 3 的 Composition API 与 Options API 的主要区别和优势。
   Composition API 基于函数组织代码，逻辑关注点集中，更好的逻辑复用和代码组织，更好的 TypeScript 支持，更灵活的逻辑组合方式，更适合大型复杂组件。

3. 什么是 Webpack 的 code splitting？列举几种实现方式及其适用场景。
   将代码拆分成多个 bundle 按需加载。实现方式：入口起点配置多个 entry，动态导入 import() 语法，SplitChunksPlugin 提取公共依赖。适用场景：路由级拆分，组件级拆分，第三方库拆分。

4. 解释 JavaScript 中的闭包及其实际应用场景。
   函数与其词法环境的组合，可以访问外部作用域，外部变量不会被垃圾回收。应用场景：模块模式/私有变量，函数工厂，回调函数，防抖/节流，柯里化。

5. 描述前端性能优化的常见手段，至少列出5种并简要说明。
   代码压缩，图片优化，缓存策略，CDN 加速，代码分割，减少重绘重排，服务端渲染。

分析题 (1题)

问题：
分析以下 React 组件代码，指出可能存在的性能问题，并提出优化方案：

function ProductList({ products }) {
  const [selectedCategory, setSelectedCategory] = useState('all');
  
  const filteredProducts = products.filter(product => {
    console.log('Filtering...');
    return selectedCategory === 'all' || product.category === selectedCategory;
  });

  const handleCategoryChange = (category) => {
    setSelectedCategory(category);
  };

  return (
    

      
      

        {filteredProducts.map(product => (
           console.log(`Selected ${product.name}`)}
          />
        ))}
      
    
  );
}

function ProductItem({ product, onClick }) {
  return (
    

      {product.name} - ${product.price}
    
  );
}

答案：
性能问题：

1. 每次渲染都会重新计算 filteredProducts

2. ProductItem 的 onClick 使用了内联箭头函数

3. 没有对 ProductItem 进行 memo 优化

优化方案：

1. 使用 useMemo 缓存 filteredProducts

2. 使用 useCallback 缓存事件处理函数

3. 使用 React.memo 包装 ProductItem

4. 将过滤逻辑移到上层组件或使用状态管理

优化后代码：

const ProductItem = React.memo(function ProductItem({ product, onClick }) {
  return (
    

      {product.name} - ${product.price}
    
  );
});

function ProductList({ products }) {
  const [selectedCategory, setSelectedCategory] = useState('all');
  
  const filteredProducts = useMemo(() => {
    console.log('Filtering...');
    return products.filter(product => 
      selectedCategory === 'all' || product.category === selectedCategory
    );
  }, [products, selectedCategory]);

  const handleProductClick = useCallback((productName) => {
    console.log(`Selected ${productName}`);
  }, []);

  const handleCategoryChange = useCallback((category) => {
    setSelectedCategory(category);
  }, []);

  return (
    

      
      

        {filteredProducts.map(product => (
           handleProductClick(product.name)}
          />
        ))}
      
    
  );
}