当前位置：首页 > news >正文

2026年，一周就能背完的web前端八股文！（春招最新附答案）！

news 2026/8/31 17:05:54

死磕高频20题！7天保命法：

Day1-2：HTML/CSS/JS核心

语义化标签（SEO/可访问）→ 盒模型（标准/IE）→ BFC触发（overflow/float/absolute）→ 事件循环（宏/微任务）→ 闭包内存泄露（释放引用）→ 原型链（proto→prototype）→ this指向（默认/隐式/显式/new/箭头）→ 数组reduce/flat。

中大厂面试题整理：以下展示均已打包好【题库】

HTML板块：

什么是DOM和BOM?
简单描述从输入网址到页面显示的过程
一台设备的dpr，是否是可变的?
前端该如何选择图片的格式?
前端跨页面通信，你知道哪些方法?
说说你对Dom树的理解
行内元素有哪些?块级元素有哪些?空(void)元素有那些?
html和css中的图片加载与渲染规则是什么样的?
title与h1的区别、b与strong的区别、i与em的区别?
script标签为什么建议放在body标签的底部(defer、async)

..............................................................................................................................

CSS板块：

css 中 animation,transition、transform 有什么区别?
怎么做移动端的样式适配?
相邻的两个inline-block节点为什么会出现间隔，该如何解决?
grid网格布局是什么?
CSS3新增了哪些特性?
怎么使用CSS3实现动画?
怎么理解回流跟重绘?什么场景下会触发?
什么是响应式设计?响应式设计的基本原理是什么?如何进行实现?
如果使用CSS提高页面性能?
如何实现单行/多行文本溢出的首略样式?

..............................................................................................................................

JavaScript板块：

不会冒泡的事件有哪些?
mouseEnter和mouseOver 有什么区别?
MessageChannel是什么，有什么使用场景?
async、await实现原理
Proxy能够监听到对象中的对象的引用吗?
如何让 var [a,b]={a:1,b:2}解构赋值成功?
下面代码会输出什么?
描述下列代码的执行结果
什么是作用域链?
bind、call、apply有什么区别?如何实现一个bind?
common.js和es6中模块引|入的区别?
说说vue3中的响应式设计原理
script标签放在header里和放在body底部里有什么区别?

..............................................................................................................................

Day3：浏览器与网络

渲染流程（HTML→DOM→CSSOM→RenderTree→布局→绘制）→ 重绘回流（回流必重绘）→ 跨域（CORS/jsonp/代理）→ HTTPS（对称+非对称）→ 缓存（强缓存/协商缓存）→ XSS（转义/CSP）→ CSRF（token/同源检测）。

准备的面试题库：

简单描述从输入网址到页面显示的过程
说说WebSocket和HTTP的区别
说说https的握手过程
HTTP2中，多路复用的原理是什么?
说说你对"三次握手"、“四次挥手"的理解
为什么推荐将静态资源放到cdn上?
什么是DNS劫持?
TLS1.3做了哪些改进?
TLS1.2握手的过程是怎样的?
HTTP报文结构是怎样的?
HTTPS为什么是安全的?
Axios的原理是什么?
说说对HTTP3 的了解
跨域时怎么处理cookie?
POST请求的Content-Type常见的有哪几种?
Blob，ArrayBuffer，Base64分别有哪些使用场景?
Blob,ArrayBuffer,Base64 有什么区别?
TCP和UDP的区别是什么?
Http3.0是基于udp的，那么它是如何保证传输可靠性的?20.说下websocket的连接原理

..............................................................................................................................

Day4：框架（React/Vue 二选一）

React：JSX（createElement）→ Fiber（时间切片+优先级）→ diff（同层+key）→ Hooks（闭包+链表）→ 通信（props/context/redux）。

Vue：响应式（defineProperty/Proxy）→ 模板编译（parse/optimize/generate）→ 虚拟DOM diff（同层）→ 通信（props/emit/vuex）→ nextTick（微/宏任务降级）

准备好的面试题库：

react板块：

下面代码中，点击“+3”按钮后，age的值是什么?
React Portals有么用?
react和react-dom是什么关系?
React 中为什么不直接使用 requestIdleCallback?
为什么react需要fiber 架构，而Vue却不需要?
子组件是一个Portal，发生点击事件能冒泡到父组件吗?
React 为什么要废 componentWillMount, componentWillReceiveProps,componentWillUpdate这三个生命周期钩子?它们有哪些问题呢?React 又是如何解决的呢?
说说Reactrender方法的原理?在什么时候会被触发?
说说React事件和原生事件的执行顺序
说说对受控组件和非受控组件的理解，以及应用场景?
你在React项目中是如何使用Redux的?项目结构是如何划分的?
说说对Redux中间件的理解?常用的中间件有哪些?实现原理?
说说你对Redux的理解?其工作原理?
说说你对immutable的理解?如何应用在read项目中?
说说ReactJsx转换成真实DOM过程?

..............................................................................................................................

Vue板块：

Wue有了数据响应式，为何还要diff?
wue3为什么不需要时间分片?
vue3为f什么要引入Composition API?
谈谈Vue事件机制，并手写on、on、on、off、emit、emit、emit、once
computed计算值为什么还可以依赖另外一个computed计算值?
说一下vm.$set原理
怎么在Wue中定义全局方法?
Wue中父组件怎么监听到子组件的生命周期?
wue组件里写的原生addEventisteners监听事件，要手动去销毁吗?为什么?
说说wue3中的响应式设计原理
Vue中，created和mounted两个钩子之间调用时间差值受什么影响?
vue中，推荐在哪个生命周期发起请求?
为什么react需要fber架构，而Vue却不需要?
SPA(单页应用)首屏加载速度慢怎么解决?
说下Vite的原理

..............................................................................................................................

Day5：工程化与性能优化

Webpack流程（entry/loader/plugin/output）→ Loader/Plugin区别（转换/扩展）→ 打包优化（splitChunks/tree shaking/按需）→ 首屏优化（CDN/懒加载/SSR）→ 性能指标（FP/FCP/LCP/TTI）→ 白屏时间（performance API）。