引言

本《2025年最新版 前端八股文》结合当前行业趋势与一线大厂面试真题，系统梳理了HTML、CSS、JavaScript核心机制、浏览器原理、框架原理（Vue/React）、工程化、网络安全、性能优化及新兴技术等关键知识点，并辅以深入浅出的解析与代码示例。我们不仅关注“是什么”，更注重“为什么”和“如何应用”，力求帮助你在面试中从容应对，在实战中融会贯通。

八股文

一、JavaScript(323题)

1. JS原始数据类型有哪些？引用数据类型有哪些？

在 JS 中，存在着 7 种原始值，分别是：
boolean ，null ，undefined ，number ，string ，symbol ，bigint
引用数据类型: 对象Object（包含普通对象-Object，数组对象-Array，正则对象-RegExp，日期对象-
Date，数学函数-Math，函数对象-Function）

2. 说出下面运行的结果，解释原因。

function test(person) { 
person.age = 26 
person = { 
name: 'hzj', 
age: 18 
} 
return person 
} 
const p1 = { 
name: 'fyq', 
age: 19 
} 
const p2 = test(p1) 
console.log(p1) // -> ? 
console.log(p2) // -> ?

结果

p1：{name: “fyq”, age: 26} 
p2：{name: “hzj”, age: 18}

原因: 在函数传参的时候传递的是对象在堆中的内存地址值，test函数中的实参person是p1对象的
内存地址，通过调用person.age = 26确实改变了p1的值，但随后person变成了另一块内存空间的
地址，并且在最后将这另外一份内存空间的地址返回，赋给了p2。

5. 0.1+0.2为什么不等于0.3？

0.1和0.2在转换成二进制后会无限循环，由于标准位数的限制后面多余的位数会被截掉，此时就已经出
现了精度的损失，相加后因浮点数小数位的限制而截断的二进制数字在转换为十进制就会变成
0.30000000000000004。

6. 什么是BigInt?

BigInt是一种新的数据类型，用于当整数值大于Number数据类型支持的范围时。这种数据类型允许我们
安全地对 大整数 执行算术操作，表示高分辨率的时间戳，使用大整数id，等等，而不需要使用库。

二、vue(80题)

2. mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的
viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户
体验。
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

3. 组件之间的传值？

父组件与子组件传值
父组件通过标签上面定义传值
子组件通过props方法接受数据
子组件向父组件传递数据
子组件通过$emit方法传递参数

4. Vue 双向绑定原理

mvvm 双向绑定，采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来
劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

几个要点：
1）实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通
知订阅者2）实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，
以及绑定相应的更新函数
3）实现一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通
知，执行指令绑定的相应回调函数，从而更新视图
4）mvvm 入口函数，整合以上三者
具体步骤：
需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter这样的
话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化
compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对
应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:在自身实例化时往属
性订阅器(dep)里面添加自己自身必须有一个 update() 方法待属性变动 dep.notice() 通知时，能调
用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。
MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过Observer来监听
自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer
和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变
更的双向绑定效果。

5. 描述下 vue 从初始化页面--修改数据--刷新页面 UI 的过程？

当 Vue 进入初始化阶段时，一方面 Vue 会遍历 data 中的属性，并用 Object.defineProperty 将它转化
成 getter/setter 的形式，实现数据劫持(暂不谈 Vue3.0 的 Proxy)；另一方面，Vue 的指令编译器
Compiler 对元素节点的各个指令进行解析，初始化视图，并订阅 Watcher 来更新试图，此时 Watcher
会将自己添加到消息订阅器 Dep 中，此时初始化完毕。
当数据发生变化时，触发 Observer 中 setter 方法，立即调用 Dep.notify(),Dep 这个数组开始遍历所有
的订阅者，并调用其 update 方法，Vue 内部再通过 diff 算法，patch 相应的更新完成对订阅者视图的
改变。

6. 你是如何理解 Vue 的响应式系统的?

响应式系统简述:
任何一个 Vue Component 都有一个与之对应的 Watcher 实例
Vue 的 data 上的属性会被添加 getter 和 setter 属性
当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被
调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)
data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此
data 的组件去调用他们的 render 函数进行更新

三、react（83题）

说说React中onClick绑定后的工作原理

1. 首先react有自己的事件系统,也是遵循w3c的,这个事件系统的名称叫做合成事件(SyntheticEvent),而
其自定义事件系统的动机主要包含以下几个方面
抹平不同浏览器之间的兼容性差异。最主要的动机。
件合成既可以处理兼容性问题
提供一个抽象的跨平台事件机制
可以做更多优化
可以干预事件的分发
2. 当给组件(元素)绑定 onClick 事件之后
1. react会对事件先进行注册,将事件统一注册到 document 上
2. 根据组件 唯一的标识key 来对事件函数进行存储
3. 统一的指定 dispatchEvent 回调函数
4. 储存事件回调: react会将click 这个事件统一存到一个对象中,回调函数的存储采用键值对
（key/value）的方式存储在对象中，key 是组件的唯一标识 id，value 对应的就是事件的回
调函数,通过组件的key就能回调到相应的函数了

说说react里面bind与箭头函数

1. bind 由于在类中,采用的是 严格模式 ,所以事件回调的时候 会丢失this指向,指向undefined ,需要
使用bind来给函数绑定上当前实例的this指向
2. 箭头函数 的this指向上下文,所以永久能拿到当前组件实例的 this 指向,我们可以完美的使用箭头
函数来替代传统事件处理函数的回调

redux中核心组件有哪些，reducer的作用

redux 三大核心
action action理解为动作，action的值一般为一个对象，格式如 { type: "", data: "" }，type是必须要
的，因为reducer处理数据的时候要根据不同的type来进行不同的操作
reducer reducer是初始化以及处理派发的action的纯函数
store store是一个仓库，用来存储数据，它可以获取数据，也可以派发数据，还能监听到数据的变化
reducer的作用
接收旧的 state 和 action，返回新的 state

React Component和Purecomponent区别

Component 没有直接实现 shouldComponentUpdate 这个方法；但是 PureComponent通过浅层的Porps 和
state 的对比，内部实现了这个生命周期函数。
PureComponent会跳过整个组件子树的props更新，要确保全部的子组件也是 pure 的形式。
Component 中需要手动执行的 shouldComponentUpdate 函数，在PureComponent中已经自动完成了（自
动浅对比）。
PureComponent不仅会影响本身，而且会影响子组件，所以PureComponent最好用在数据展示组件中
PureCoponent 如果是复杂数据类型，这里会造成错误的显示（setState浅复制更新，但是界面不会重新
渲染）

四、Nodej（27题）

说说对nodejs的了解

Node.js 是一个开源和跨平台的 JavaScript 运行时环境。 它几乎是任何类型项目的流行工具！
Node.js 在浏览器之外运行 V8 JavaScript 引擎（Google Chrome 的内核）。 这使得 Node.js 的性能非
常好。
Node.js 应用程序在单个进程中运行，无需为每个请求创建新的线程。 Node.js 在其标准库中提供了
一组异步的 I/O 原语，以防止 JavaScript 代码阻塞，通常，Node.js 中的库是使用非阻塞范式编写
的，使得阻塞行为成为异常而不是常态。
当 Node.js 执行 I/O 操作时（比如从网络读取、访问数据库或文件系统），Node.js 将在响应返回时
恢复操作（而不是阻塞线程和浪费 CPU 周期等待）。
这允许 Node.js 使用单个服务器处理数千个并发连接，而不会引入管理线程并发（这可能是错误的
重要来源）的负担。
Node.js 具有独特的优势，因为数百万为浏览器编写 JavaScript 的前端开发者现在无需学习完全不同
的语言，就可以编写除客户端代码之外的服务器端代码。
在 Node.js 中，可以毫无问题地使用新的 ECMAScript 标准，因为你不必等待所有用户更新他们的浏
览器，你负责通过更改 Node.js 版本来决定使用哪个 ECMAScript 版本，你还可以通过运行带有标志
的 Node.js 来启用特定的实验性功能。

Nodejs如何写接口，返回参数如何处理，有多少种方法

nodejs的原生模块http可用于编写接口，但一般推荐使用express或koa2来设计restful api。
下面以 express 为例说明如何编写接口。

var express = require('express') 
var app = express() 
app.get('/', function (req, res) { 
res.send('hello world') 
})

express响应客户端的方法有：end()/json()/render()/send()/jsonp()/sendFile()等。

五、CSS(61题)

六、 HTML(57题)

七、算法(19题)

八、计算机网络(71题)

九、TypeScript(46题)

十、性能优化(25题)

十一、前端安全(21题)

十二、小程序(9题)