死磕高频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事件机制，并手写off、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）。
准备好面试题库：
工程化板块：
- package.json 文件中的devDependencies 和dependencies 对象有什么区别?
- webpack5的主要升级点有哪些?
- 说下Vite的原理
- 与webpack类似的工具还有哪些?区别?
- 说说如何借助webpack来优化前端性能?
- 说说webpack proxy工作原理?为什么能解决跨域?
- 说说webpack的热更新是如何做到的?原理是什么?
- 说说Loader和Plugin的区别?编写Loader，Plugin的思路?
- 说说webpack中常见的Plugin?解决了什么问题?
- 说说webpack中常见的Loader?解决了什么问题?
- 说说webpack的构建流程?
- 说说你对webpack的理解?解决了什么问题?
- webpack loader 和plugin 实现原理
- 如何提高webpack的构建速度?
- 说说 webpack-dev-server 的原理
..............................................................................................................................
性能优化板块：
- script标签放在header里和放在body底部里有什么区别?
- 前端性能优化指标有哪些?怎么进行性能检测?
- SPA(单页应用)首屏加载速度慢怎么解决?
- 如果使用CSS提高页面性能?
- 怎么进行站点内的图片性能优化?
- 虚拟DOM一定更快吗?
- 有些框架不用虚拟dom，但是他们的性能也不错是为什么?
- 如果某个页面有几百个函数需要执行，可以怎么优化页面的性能?
- 讲一下png8、png16、png32的区别，并简单讲讲png的压缩原理
- 页面加载的过程中，JS文件是不是一定会阻塞DOM和CSSOM的构建?
..............................................................................................................................
Day6：手写与算法
防抖节流（input/scroll）→ 深拷贝（循环引用/Date/RegExp）→ Promise.all/race→ 数组去重（Set/filter）→ 快排（基准递归）→ 事件总线（发布订阅）
算法题库：
- 最大的钻石
- 举例说明你对尾递归的理解，以及有哪些应用场景
- 去除字符串中出现次数最少的字符，不改变原字符串的顺序。
- 请手写"快速排序”
- 洗牌算法
- 什么是尾调用优化和尾递归?
- 合并K个升序链表
- 什么是时间复杂度?
- 请手写"基数排序”
- 请手写"桶排序”
..............................................................................................................................
Day7：补漏
TS：interface/type区别→ 泛型约束→ TS配置。
Node：事件循环（timers/poll/check）→ 中间件（洋葱圈）
Git：reset（--soft/--mixed/--hard）→ rebase/merge区别。
设计模式：单例（闭包）/观察者（addEventListener）。
TypeScript题库：
- 说说对TypeScript中命名空间与模块的理解?区别?
- 说说你对typescript的理解?与javascript的区别?
- Typescript中泛型是什么?
- TypeScript中有哪些声明变量的方式?
- 什么是Typescript的方法重载?
- 请实现下面的sleep方法
- typescript中的is关键字有什么用?
- TypeScript支持的访问修饰符有哪些?
- 请实现下面的myMap方法
- 请实现下面的treePath方法
- 请实现下面的product方法
- 请实现下面的myAll方法
- 请实现下面的sum方法
- 请实现下面的mergeArray方法
- 实现下面的firstSingleChar方法
..............................................................................................................................
Node.js题库：
- common.js和es6中模块引入的区别?
- 为什么Node在使用esmodule时必须加上文件扩展名?
- 浏览器和Node中的事件循环有什么区别?
- Node性能如何进行监控以及优化?
- 如果让你来设计一个分页功能，你会怎么设计?前后端敬如何交互?
- 如何实现文件上传?说说你的思路
- 如何实现jwt鉴权机制?说说你的思路
- 说说对中间件概念的理解，如何封装node中间件?
- 说说Node文件查找的优先级以及Require方法的文件查找策略?
- 说说对Nodejs中的事件循环机制理解?
..............................................................................................................................
真相：7天背不全所有！但死磕这些题=覆盖90%基础考点，犹豫1小时=少面2家公司！
各位前端的小伙伴，有需要跳槽或者面试工作的，我在这里准备好了一份2026年精选的前端面试题，内容都是经过精简的，全部都是高频中大厂的面试真题，有需要的可以拿去看看！ 【2026精选宝典】
