权威·系统·实战导向的前端面试题库

覆盖JavaScript、CSS、HTML、Vue、React、TypeScript、工程化、性能优化、浏览器原理、网络安全、算法等前端技术栈全模块高频考点，配以深度解析、代码示例、扩展延伸，助你系统构建知识体系，高效突破大厂技术壁垒。

⚡ JavaScript 核心机制

深入理解语言本质，夯实进阶基础

〈变量提升与作用域链

变量提升（Hoisting）是JavaScript在编译阶段将变量与函数声明移至作用域顶部的行为。但需注意：仅声明被提升，初始化不提升。

          console.log(a); // undefined
          var a = "hello";
          console.log(b); // ReferenceError: Cannot access 'b' before initialization
          let b = "world";
        

原因：`var`声明被提升至函数/全局作用域顶部并初始化为`undefined`；`let`虽被提升但处于“暂时性死区”（TDZ），在声明前访问即报错。

扩展延伸：ES6模块中所有声明均具有块级作用域且存在TDZ，这要求开发者必须严格遵循“先声明后使用”原则。在大型项目中，未注意TDZ易引发难以定位的运行时错误。

〔原型链与继承机制

JavaScript通过原型链实现继承，核心在于`[[Prototype]]`内部槽。每个对象都有一个原型对象，其`__proto__`属性指向原型，形成链式结构。

          function Animal(name) {
            this.name = name;
          }
          Animal.prototype.speak = function() {
            return `${this.name} makes a noise.`;
          };
          class Dog extends Animal {
            speak() {
              return `${this.name} barks.`;
            }
          }
          const d = new Dog("Mitzie");
          console.log(d.speak()); // "Mitzie barks."
          console.log(d.instanceof Animal); // true
        

ES6 `class`语法本质是语法糖，底层仍基于原型链实现。`extends`通过设置子类原型的`[[Prototype]]`为父类构造函数，实现继承。

高频考点：`Object.create()`与`new`的区别？`Object.setPrototypeOf()`与`__proto__`的差异？在严格模式下直接访问`__proto__`是否被允许？

〈闭包与内存管理

闭包指函数能访问其词法作用域外的变量。典型场景：返回内部函数、回调函数、模块模式。

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

风险：闭包可能造成内存泄漏——若被引用的外部变量生命周期过长，GC无法回收。解决方案：及时解除引用（设为`null`）、使用WeakMap/WeakSet。

实战建议：在事件监听器中，务必使用`removeEventListener`移除监听；在`setInterval`中避免引用DOM元素，改用ID或字符串引用。

ES5 核心特性

严格模式（`"use strict"`）、`Object.defineProperty`、`Array.prototype`新增方法（`forEach`、`map`、`filter`等）

ES6 重大变革

块级作用域（`let`/`const`）、解构赋值、箭头函数、模板字符串、`class`语法、模块化（`import`/`export`）、Promise

ES2020+ 新特性

`null`合并运算符（`??`）、可选链（`?.`）、`globalThis`、`BigInt`、`Promise.allSettled`、动态导入（`import()`）

⚙️ CSS 高级机制与布局

超越基础选择器，掌握现代布局与渲染原理

▲ Flex 布局核心属性详解

容器属性：

`display: flex`：启用弹性布局
`flex-direction`：主轴方向（`row`/`column`/`row-reverse`/`column-reverse`）
`justify-content`：主轴对齐（`flex-start`/`center`/`space-between`/`space-around`/`space-evenly`）
`align-items`：交叉轴对齐（`stretch`/`center`/`flex-start`/`flex-end`/`baseline`）
`flex-wrap`：是否换行（`nowrap`/`wrap`/`wrap-reverse`）

项目属性：

`flex-grow`：扩展比例（默认0）
`flex-shrink`：收缩比例（默认1）
`flex-basis`：初始主轴尺寸（默认`auto`）
`flex`：`flex-grow` `flex-shrink` `flex-basis`简写（如`1 1 auto`）
`align-self`：覆盖容器`align-items`

            <!-- HTML -->
            <div class="container">
              <div class="item">A</div>
              <div class="item">B</div>
              <div class="item">C</div>
            </div>
            <!-- CSS -->
            .container {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            .item:nth-child(2) {
              flex-grow: 2; 
            }
          

常见陷阱：`flex-basis`与`width`/`height`的优先级？`flex`简写中未指定`flex-basis`时默认为`0%`（非`auto`），导致内容被压缩。

■ Grid 布局：二维布局的终极方案

Grid通过`grid-template-columns`、`grid-template-rows`定义网格轨道，`grid-area`命名区域，实现复杂布局。

            .container {
              display: grid;
              grid-template-columns: 1fr 2fr 1fr;
              grid-template-rows: auto 100px auto;
              grid-template-areas:
                "header header header"
                "nav main aside"
                "footer footer footer";
            }
            .header { grid-area: header; }
            .nav { grid-area: nav; }
            .main { grid-area: main; }
            .aside { grid-area: aside; }
            .footer { grid-area: footer; }
          

关键优势：无需额外HTML结构即可实现“圣杯布局”；`gap`属性简化间距控制；`repeat()`函数简化重复轨道定义。

与Flex对比：Flex适合一维布局（行或列），Grid适合二维布局（行+列）。现代开发中，常组合使用：外层Grid定框架，内层Flex定细节。

↻ 动画性能优化：GPU加速与重排

避免触发布局重排（Reflow）：`transform`和`opacity`由GPU处理，不触发重排；而`top/left`、`width/height`会触发布局重排，性能差。

            
            .box {
              position: absolute;
              top: 0;
              left: 0;
              transition: transform 0.3s;
            }
            .box:hover {
              transform: translateX(100px);
            }
            
            .box:hover {
              top: 100px; 
            }
          

合成层（Composite Layer）：将动画元素提升为独立层（如`will-change: transform`），可避免影响其他元素渲染，但过度使用会消耗内存。

浏览器优化：Chrome对`opacity`和`transform`启用硬件加速；Firefox/Edge类似。但需注意：`backface-visibility: hidden`可触发GPU层。

📱 响应式设计：现代Web的必备技能

核心策略：流式布局 + 媒体查询 + 移动优先（Mobile First）。

            
            body {
              font-size: 16px;
            }
            
            @media (min-width: 768px) {
              body { font-size: 18px; }
            }
            
            @media (min-width: 1024px) {
              body { font-size: 20px; }
            }
          

视口单位：`vw`/`vh`/`vmin`/`vmax`适配设备尺寸，如`1vw = 视口宽度的1%`。

现代方案：使用`clamp(min, preferred, max)`实现流式字体：

            body {
              font-size: clamp(16px, 2vw, 24px);
            }
          

效果：字体在16px~24px间随视口宽度线性变化，避免媒体查询断点突变。

⚛️ Vue & React 核心原理

理解框架底层逻辑，提升架构能力

⚛ Vue 3 响应式系统原理

Vue 3基于`Proxy`实现响应式，相比Vue 2的`Object.defineProperty`，支持：

直接监听对象/数组变化（无需`Vue.set`）
支持`Map`、`Set`等集合类型
深层嵌套对象无需递归遍历

          const state = new Proxy({}, {
            get(target, key) {
              track(target, key); // 依赖收集
              return target[key];
            },
            set(target, key, value) {
              const result = Reflect.set(target, key, value);
              trigger(target, key); // 触发更新
              return result;
            }
          });
        

依赖收集流程：

组件渲染时访问响应式数据 → 触发`get` → 调用`track`将当前effect加入依赖集合
数据变更 → 触发`set` → 调用`trigger` → 执行所有相关effect

与React对比：React通过`setState`批量更新，依赖虚拟DOM diff；Vue依赖自动追踪，更新更精准。

⚛ React Hooks 实现机制

`useState`/`useEffect`基于链表存储状态，组件每次渲染时重置hook索引。若调用顺序改变（如条件语句中），会导致索引错乱，引发bug。

          function Counter() {
            const [count, setCount] = useState(0);
            const [name, setName] = useState("Tom");
            
            if (count > 0) {
              useEffect(() => { ... });
            }
          }
        

Hooks内部结构：

          fiber.memoizedState = {
            baseState: 0,
            queue: { pending: null },
            next: { ... } 
          }
        

最佳实践：

始终在顶层调用Hooks
避免在循环/条件/嵌套函数中调用
自定义Hooks可封装逻辑，提升复用性

⚡ 组件通信：跨层级与跨组件方案

Vue跨层级通信：

`provide/inject`：祖先→后代（单向）
`$attrs`/`$listeners`（Vue 2）/`v-bind="$attrs"`（Vue 3）：透传属性
全局状态管理：Pinia/Vuex

React跨层级通信：

`Context API`：创建共享上下文
状态管理库：Redux/Zustand/Recoil
`children`函数柯里化：`render props`模式

跨组件通信方案对比：

方案	适用场景	性能影响	类型安全
props逐层传递	父子/兄弟组件	低（局部更新）	强（TypeScript）
Context	全局主题/用户信息	高（订阅组件全更新）	中（需手动类型推导）
全局状态管理	复杂应用（购物车/表单）	可控（精细更新）	强（Redux Toolkit）

🔧 工程化与开发体验

构建高效、可维护的前端工作流

📦 Webpack 核心优化策略

常见优化手段：

代码分割（`splitChunks`）：提取公共依赖、异步加载
Tree Shaking：移除未使用代码（需ES Module）
缓存优化：`contenthash` + 长缓存策略
压缩：`TerserPlugin`（JS）、`css-minimizer-webpack-plugin`（CSS）
资源内联：`mini-css-extract-plugin` + `html-webpack-plugin`

          // webpack.config.js
          module.exports = {
            optimization: {
              splitChunks: {
                chunks: 'all',
                cacheGroups: {
                  vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                  }
                }
              }
            }
          };
        

替代方案：Vite（基于ESM原生支持）启动快、热更新秒级，但生产构建仍需Rollup。

🛠 TypeScript 在项目中的实践

核心价值：

编译时类型检查，提前发现错误
IDE智能提示，提升编码效率
自文档化，降低协作成本

常见类型技巧：

          // 1. 交叉类型：合并多个对象类型
          type A = { name: string };
          type B = { age: number };
          type AB = A & B; // { name: string; age: number; }
          // 2. 泛型约束：确保类型具备特定属性
          function getProperty<T, K extends keyof T>(obj: T, key: K) {
            return obj[key];
          }
          // 3. 映射类型：批量生成新类型
          type ReadOnly<T> = {
            readonly [P in keyof T]: T[P];
          };
        

与React/Vue集成：

React：`React.FC`泛型、`useReducer`类型推导
Vue 3：`defineComponent` + `SetupContext`类型

🌐 Node.js 在前端工程中的应用

前端开发者需掌握：

`npm`/`yarn`脚本管理：`prestart`、`postbuild`生命周期钩子
Node核心模块：`fs`、`path`、`http`、`events`
异步编程：`Promise`链、`async/await`错误处理
构建工具链：Gulp（流式构建）、ESBuild（极速打包）

          // 示例：使用Node脚本批量压缩图片
          const fs = require('fs');
          const sharp = require('sharp');
          async function compressImage(input, output) {
            await sharp(input)
              .resize(800)
              .jpeg({ quality: 80 })
              .toFile(output);
          }
          compressImage('src/a.jpg', 'dist/a.jpg');
        

🚀 性能优化实战指南

从资源加载到渲染流水线的全链路优化

⚡ 首屏加载优化：LCP指标提升

核心策略：

资源优化：图片WebP/AVIF格式、CSS/JS压缩、字体子集化
关键路径优化：内联关键CSS、延迟非关键JS、预加载关键资源
网络层：HTTP/2多路复用、CDN加速、服务端渲染（SSR）

          <!-- 预加载关键JS -->
          <link rel="preload" href="/main.js" as="script">
          <!-- 预渲染关键资源 -->
          <link rel="prefetch" href="/next-page.js">
          <!-- 字体子集化（使用fonttools） -->
          @font-face {
            font-family: 'CustomFont';
            src: url('/fonts/custom-latin.woff2') format('woff2');
          }
        

工具链：Lighthouse、WebPageTest、Chrome DevTools Performance面板。

📊 运行时性能：避免长任务阻塞主线程

长任务（Long Task）：执行时间＞50ms的任务会阻塞用户交互。

解决方案：

任务拆分：使用`requestIdleCallback`或`setTimeout`分片执行
Web Worker：处理计算密集型任务（如数据处理、图像分析）
虚拟滚动：长列表仅渲染可见区域

          function splitTask(tasks, interval = 50) {
            let i = 0;
            const process = () => {
              const start = performance.now();
              while (i < tasks.length && performance.now() - start < interval) {
                tasks[i++]();
              }
              if (i < tasks.length) {
                requestAnimationFrame(process);
              }
            };
            requestAnimationFrame(process);
          }
        

🔍 内存泄漏排查指南

常见泄漏源：

未清除的定时器（`setInterval`）
闭包引用DOM元素
事件监听器未移除
缓存未设上限（如`Map`无限增长）

排查工具：

Chrome DevTools → Memory → Allocation instrumentation on timeline
Heap snapshot对比：捕获泄漏点内存增长
使用`performance.memory`监控内存曲线

最佳实践：对缓存使用`WeakMap`/`WeakSet`，确保对象可被GC回收。

🌐 浏览器原理与渲染机制

深入理解从URL输入到页面渲染的全过程

🌐 浏览器渲染流水线（Critical Rendering Path）

步骤：

HTML解析 → 构建DOM树
CSS解析 → 构建CSSOM树
DOM + CSSOM → 构建渲染树（Render Tree）
布局（Layout）：计算元素几何信息
绘制（Paint）：填充像素
合成（Composite）：图层合并（GPU）

关键点：

CSS阻塞渲染，JS阻塞解析（除非`async`/`defer`）
`document.write`会阻塞解析并重绘整个页面
`requestAnimationFrame`在绘制前执行，避免布局抖动

🔒 跨域与安全策略

CORS（跨域资源共享）：

简单请求：`GET/POST` + 头部无自定义字段 → 直接请求
预检请求：`PUT/DELETE`或自定义头部 → 先发`OPTIONS`

          // 服务端响应头
          Access-Control-Allow-Origin: https://example.com
          Access-Control-Allow-Methods: GET, POST, OPTIONS
          Access-Control-Allow-Headers: Content-Type, X-Custom-Header
          Access-Control-Max-Age: 86400
        

其他安全机制：

CSRF：Token校验 + SameSite Cookie
XSS：输入过滤 + `Content-Security-Policy`
点击劫持：`X-Frame-Options: DENY`

💾 浏览器缓存策略

缓存层级：

强缓存：`Cache-Control: max-age=31536000`（优先级高）
协商缓存：`ETag`/`If-None-Match`、`Last-Modified`/`If-Modified-Since`

          // 典型缓存策略
          Cache-Control: public, max-age=31536000, immutable  
          Cache-Control: no-cache  
          Cache-Control: no-store  
        

Service Worker缓存：`Cache API`可实现离线访问，结合`Workbox`管理缓存版本。

🛡️ 前端网络安全

防御常见攻击，保障用户数据安全

⚡ XSS 攻击与防御

攻击类型：

存储型：恶意脚本存入数据库（如评论区）
反射型：URL参数注入（如`?name=`）
DOM型：客户端JS拼接HTML

防御措施：

输出编码：`innerHTML` → `textContent`；动态属性用`setAttribute`
输入过滤：`DOMPurify`库清理用户输入
CSP：`Content-Security-Policy: script-src 'self'`

⚠️ 重要：永远不要在`innerHTML`中直接插入用户输入！应使用`textContent`或`createElement`+`appendChild`。

🛡 CSRF 防护方案

原理：攻击者诱导用户向目标站点发送非预期请求（如转账）。

防御策略：

SameSite Cookie：`Set-Cookie: session=xxx; SameSite=Strict`
CSRF Token：表单隐藏字段 + 服务端校验
双重Cookie验证：`X-CSRF-Token`头校验

          // 表单示例
          <form method="POST">
            <input type="hidden" name="csrf_token" value="{{ token }}">
            ...
          </form>
        

🔒 HTTPS 与混合内容

混合内容问题：HTTPS页面加载HTTP资源（如图片、脚本），导致安全降级。

解决方案：

资源URL使用相对路径（`//cdn.com/a.js`）或协议相对（`https://`）
浏览器自动升级：`Upgrade-Insecure-Requests: 1`
服务端配置：HSTS（`Strict-Transport-Security`）

现代实践：使用` `提前建立HTTPS连接。

🔢 算法题解与数据结构

高频算法题精讲，提升逻辑思维与代码能力

🔢 两数之和：哈希表的妙用

题目：给定数组`nums = [2,7,11,15]`，目标值`target = 9`，返回`[0,1]`。

            function twoSum(nums, target) {
              const map = new Map();
              for (let i = 0; i < nums.length; i++) {
                const complement = target - nums[i];
                if (map.has(complement)) {
                  return [map.get(complement), i];
                }
                map.set(nums[i], i);
              }
            }
          

时间复杂度：O(n)；空间复杂度：O(n)

变体：三数之和（排序 + 双指针）、四数之和（递归通用解法）

🌳 二叉树遍历：递归与迭代

前序遍历（中-左-右）：

            // 递归
            function preorder(root, result = []) {
              if (!root) return result;
              result.push(root.val);
              preorder(root.left, result);
              preorder(root.right, result);
              return result;
            }
            // 迭代（栈）
            function preorderIterative(root) {
              const stack = [root];
              const result = [];
              while (stack.length) {
                const node = stack.pop();
                if (node) {
                  result.push(node.val);
                  stack.push(node.right, node.left); // 注意顺序
                }
              }
              return result;
            }
          

Morris遍历：O(1)空间复杂度，通过修改树结构实现（面试加分项）

🧩 斐波那契数列：DP状态转移

题目：求第n项斐波那契数（`F(0)=0, F(1)=1, F(n)=F(n-1)+F(n-2)`）

            // 1. 朴素递归（重叠子问题）
            function fib(n) {
              if (n <= 1) return n;
              return fib(n - 1) + fib(n - 2);
            } // O(2^n)
            // 2. 记忆化递归
            const memo = [0, 1];
            function fibMemo(n) {
              if (memo[n] !== undefined) return memo[n];
              memo[n] = fibMemo(n - 1) + fibMemo(n - 2);
              return memo[n];
            }
            // 3. 动态规划（状态压缩）
            function fibDP(n) {
              if (n <= 1) return n;
              let prev2 = 0, prev1 = 1;
              for (let i = 2; i <= n; i++) {
                const curr = prev1 + prev2;
                prev2 = prev1;
                prev1 = curr;
              }
              return prev1;
            }
          

核心思想：将问题分解为子问题，保存中间结果避免重复计算。

❓ 网友们还关心的问题

如何准备前端面试？

建议分三阶段：

基础巩固：精读《JavaScript高级程序设计》《CSS Secrets》，理解DOM/CSSOM/事件循环
框架原理：阅读Vue/React源码核心部分（响应式、虚拟DOM）
项目实战：重构个人项目，加入TypeScript、性能优化、单元测试

模拟面试：使用LeetCode/牛客网刷题，录制面试视频复盘表达逻辑。

应届生如何弥补经验不足？

重点突出：

课程项目：如“基于React的在线考试系统”（含权限管理、成绩统计）
开源贡献：参与GitHub小项目（修复issue、写文档）
技术博客：梳理学习笔记（如“手写Promise”系列）

展示学习能力比现有经验更重要！

转行前端，零基础如何入门？

路径建议：

HTML/CSS基础（2周）：语义化标签、Flex/Grid布局
JavaScript核心（6周）：ES6+、异步、面向对象
框架入门（4周）：Vue/React基础 + 脚手架项目
工程化（2周）：Webpack/Vite、TypeScript

推荐资源：MDN Web Docs、FreeCodeCamp、B站前端入门教程。

前端未来发展方向？

趋势分析：

全栈化：Node.js服务端渲染（Nuxt.js/Next.js）、BFF（Backend for Frontend）
跨端融合：Taro/Flutter/React Native多端统一
低代码/无代码：平台化工具（如G6、LowCode Engine）
前端智能化：AIGC辅助编码（GitHub Copilot）、性能分析AI化

核心不变：扎实的计算机基础 + 持续学习能力。

💡 提示：本文档持续更新，欢迎通过邮件admin@kaoacca.cn提交建议或补充考点。您的反馈是提升题库质量的重要动力！