前端面试高频题有哪些？答案怎么背？

前端招聘面试题及答案

前端开发作为互联网技术的重要环节,其面试内容涵盖基础知识、框架应用、工程化、性能优化等多个维度，以下从不同模块梳理常见面试题及详细解答，帮助求职者系统准备。

JavaScript基础

闭包的定义及使用场景
闭包是指函数有权访问其外部作用域中的变量，即使外部函数已经执行完毕，核心特性是内部函数保留了对外部作用域的引用。

• 实现原理：函数嵌套，内部函数引用外部函数的变量。
• 使用场景：
  • 数据私有化（如计数器）：

    function createCounter() {  
      let count = 0;  
      return function() {  
        return ++count;  
      };  
    }  
    const counter = createCounter();  
    console.log(counter()); // 1  

  • 防抖/节流：利用闭包保存定时器变量。
• 注意事项：闭包可能导致内存泄漏，需及时释放不再使用的变量。

原型与原型链

• 原型：每个函数都有一个prototype属性，指向实例的原型对象。
• 原型链：实例通过__proto__指向原型对象，原型对象再指向其父原型，最终指向null。
• 示例：

  function Person(name) {  
    this.name = name;  
  }  
  Person.prototype.sayName = function() {  
    console.log(this.name);  
  };  
  const p = new Person("Alice");  
  p.sayName(); // "Alice"  

• 面试题：p.__proto__ === Person.prototype和p.__proto__.__proto__ === Object.prototype均为true。

框架与工程化

Vue响应式原理
Vue 2通过Object.defineProperty劫持对象属性，Vue 3改用Proxy实现响应式。

• Vue 2核心：
  • 初始化时遍历data，将每个属性转换为getter/setter。
  • 依赖收集：getter时将Watcher加入依赖列表，setter时通知依赖更新。
• Vue 3优化：
  • Proxy可直接监听对象整体操作，支持数组索引和动态属性。
  • 通过ref和reactive区分基础类型和对象响应式。

React Hooks与类组件对比

• 优势：
  • 逻辑复用：自定义Hook替代render props和HOC。
  • 代码简洁：避免this绑定和生命周期冗余。
• 注意事项：
  • Hook只能在函数顶层调用,不能在条件语句中使用。
  • 依赖数组需正确声明,避免闭包陷阱。

Webpack优化策略
| 优化方向 | 具体措施 |
|—————-|————————————————————————–|
| 构建速度 | 开启thread-loader、cache-loader，减少重复编译 |
| 代码分割 | 使用SplitChunksPlugin提取公共依赖，动态导入（import()） |
| 打包体积 | Tree Shaking、Terser压缩代码、图片压缩（image-webpack-loader） |
| 缓存利用 | 配置output.filename带contenthash，利用浏览器长期缓存 |

浏览器与网络

跨域解决方案
跨域源于浏览器同源策略（协议、域名、端口一致），常见解决方法：

• CORS：服务器设置Access-Control-Allow-Origin字段。
• JSONP：动态创建script标签，仅适用于GET请求。
• 代理：通过Nginx或Webpack代理转发请求（如/api指向后端服务）。

浏览器渲染过程

1. 解析HTML：构建DOM树，解析CSS生成CSSOM树。
2. 渲染树：合并DOM和CSSOM，计算布局（Layout）。
3. 绘制：将渲染树转换为像素（Painting），合成图层（Compositing）。

• 优化关键：减少回流（布局重排）和重绘，如使用transform代替top/left。

性能与兼容性

防抖与节流

• 防抖（Debounce）：延迟执行，频繁触发时只执行最后一次（如搜索框输入）。

  function debounce(fn, delay) {  
    let timer;  
    return function() {  
      clearTimeout(timer);  
      timer = setTimeout(fn, delay);  
    };  
  }  

• 节流（Throttle）：固定时间间隔执行一次（如滚动事件监听）。

移动端适配方案

• 视口设置：<meta name="viewport" content="width=device-width, initial-scale=1.0">。
• 响应式单位：rem（根字体大小）、vw/vh（视口单位）。
• 弹性布局：Flexbox或Grid布局适配不同屏幕。

相关问答FAQs

Q1: 如何理解虚拟DOM及其Diff算法？
虚拟DOM是真实DOM的轻量级JavaScript对象表示，Diff算法通过对比新旧虚拟DOM树的差异（如key属性对比），只更新变化的部分，减少直接操作DOM的开销，React的Diff策略是“同级比较”，递归对比子节点，时间复杂度为O(n)。

Q2: 前端如何实现路由懒加载？
路由懒加载通过动态导入（import()）实现，按需加载组件，减少首屏加载时间。

const Home = () => import('./views/Home.vue');  
const routes = [  
  { path: '/', component: Home }  
];  

Webpack会自动将拆分的代码打包成单独的chunk,配合webpackChunkName命名。