上周五前公司部分业务砍掉，爆金币，领到大礼包离职，感觉自己是个joker，joker嘞，还是要找工作的，简单做了一个面试总结。
最近失业了，面试面了一周，发现高频考点翻来覆去就这些，要么是网络基础、要么是 React 核心、要么是 Next.js 生态、再就是工程化和故障排查💥。好多兄弟背面试题总抓不住重点，要么记太细容易忘，要么记太浅被追问露馅。
今天哥们直接把前端面试 90% 的高频考点（最近一周我遇到的问题）整理成册，全是「极简口述版」—— 不堆底层源码、不扯无用细节，句句踩考点，背完张口就来，面试官问啥都能接住。涵盖「网络 / React/Next.js/CSS/ 工程化 / 3D / 故障排查」全模块，复制粘贴到备忘录，通勤翻两遍直接拿捏。
年底了，希望还在找工作朋友能找到心仪的工作，fighting👊🏾👊🏾👊🏾。美团众包先放一放，抢救一下。
一、网络基础篇
这部分是前端面试的「开胃菜」，多了解扩展一下就好。
1. TCP 三次握手 + 四次挥手
TCP 三次握手是建立连接：客户端发请求、服务器回应 + 请求、客户端最终确认，双方确认收发能力都正常，连接建立；四次挥手是断开连接：客户端说要断、服务器确认（处理剩余数据）、服务器说数据发完能断了、客户端最终确认，确保无数据残留，连接彻底断开。
💡 通俗版辅助记忆：
三次握手 = 处对象：我想跟你耍（客户端） → 可以啊（服务端） → 那咱开始吧（服务端）；四次挥手 = 分手：咱分手吧(客户端) → 好的（服务端） → 真的分吗，为什么（服务端） → 腻了再见（客户端）。
⚠️：这地方其实可以拓展的哦，其实就是常规的我们现在的项目都是建立连接然后的话keep-alive的，然后就是不会主动挥手断开连接。
2. TCP / UDP 核心区别
TCP 是面向连接的可靠协议，要三次握手建连接，能保证数据不丢失、不重复、按顺序到达，适合文件传输、支付、登录、网页加载这些「求稳」的场景；UDP 是无连接的轻量协议，不用建连接，速度贼快但可能丢包、乱序，适合视频通话、直播、游戏、实时推送这些「求实时」的场景。核心就一句话：TCP 稳，UDP 快。
3. 跨域问题
跨域的本质是浏览器的同源策略限制，只要协议、域名、端口有一个不一样，就会触发跨域；项目里两种主流解决方式：前端用proxy 代理（本地开发兜底）、后端配置CORS 跨域响应头（线上生产方案），两步就能彻底解决。
4. 用户输入url到页面渲染发生了什么
- 网络请求阶段：输入 URL 回车 → DNS 解析把域名转成 IP → TCP 三次握手建立连接 → 发送 HTTP 请求 → 服务器返回 HTML、CSS、JS 等资源；
- 页面渲染阶段：浏览器解析 HTML 生成 DOM 树 → 解析 CSS 生成 CSSOM 树 → 合并成渲染树 → 计算布局（回流） → 绘制页面 → 最终展示到屏幕上
二、React 核心篇
React 考点集中在 Hook 上，不用扯源码，记清「用法 + 场景 + 坑点」，面试官绝对挑不出毛病。
1. useEffect 依赖：浅比较 vs 深比较 + 深比较实现
useEffect 依赖默认是浅比较：值类型比内容，引用类型（对象 / 数组）只比内存地址，就算内容变了、地址没改，也不会触发执行；深比较是递归比对引用类型内部所有层级的内容，只要内容变就触发执行；实现深比较最常用 2 种方式：大厂标配react-use 库的 useDeepCompareEffect钩子，轻量项目用use-deep-compare-effect小库，用法和原生 useEffect 完全一致，直接替换就行。
2. useEffect /useMemo/useCallback 核心用法
多练习就好，重在理解
- useEffect：处理副作用（定时器、事件监听、请求兜底），依赖变则执行，必写 cleanup 清理函数（防内存泄漏）；
- useMemo：缓存计算结果，避免组件重渲染时重复计算（比如大数据格式化），依赖变才重新计算；
- useCallback：缓存函数引用，解决子组件因父组件函数重新创建导致的不必要重渲染，配合 React.memo 使用效果最佳。
3. 图片懒加载）
核心原理：图片默认用占位图，
src存真实地址到data-src，判断图片进入可视区后，再动态把data-src赋值给src，实现按需加载；React 里两种做法：① 手写用Intersection Observer API监听可视区；② 项目首选react-lazyload 库，套个标签就搞定，不用手写逻辑。
三、前端故障排查篇
这类题面试官最爱问，不用讲太细，记清「原因 + 排查步骤 + 解决方案」，就能体现你有实际项目经验。
1. 页面白屏原因 + 排查 & 解决（
页面白屏主要是前端自身问题（90%）：JS 代码报错、核心资源加载失败、路由匹配异常、挂载 DOM 节点不存在；少数是服务端 / 网络问题（接口 500、CDN 挂了）；排查就开浏览器 F12：先看「控制台」找 JS 报错 → 再看「网络」面板查资源 404 / 超时 → 最后核对路由 / 挂载节点；解决：修报错代码、补资源路径、配 404 兜底路由，针对性处理就行，基本都能搞定。
四、CSS & 动效篇
CSS 考点集中在布局、单位、动画。
1. Flex / Grid 布局核心区别（一句话讲清）
Flex 主打一维弹性适配，控制水平 / 垂直单方向布局，覆盖日常 80% 的场景（居中、均分、左右分布）；Grid 主打二维精准控制，同时管控行和列，解决复杂布局（九宫格、卡片栅格、不规则排版），两者相辅相成，是现代布局的核心。
2. px/em/rem/vw/vh + TailwindCSS 响应式区别
px 是固定单位，不随屏幕变化；em 相对父元素、rem 相对根元素、vw/vh 相对屏幕视口，后三者都是做适配的；TailwindCSS 底层默认用 rem 做全局适配，核心是移动端优先的断点前缀（sm/md/lg），加前缀就能给指定屏幕写样式，不用手写媒体查询，适配贼方便。
3. 项目中动画处理方案
项目里分 3 种方式用动画，轻量到复杂全覆盖：① 简单动效（hover、按钮切换）：用CSS transition，一行
transition: all 0.3s ease搞定；② 复杂 / 循环动效（加载、入场）：用 @keyframes + animation，定义关键帧后直接调用；③ 通用动效：用Animate.css 库（第三方库），开箱即用，加类名就有效果，体积小、兼容性好；💡 性能加分：所有动画优先用transform和opacity实现，这俩属性不触发回流重绘，只在合成层触发，性能最优。
五、Next.js 全家桶篇
Next.js使用还是挺频繁的。
1. App Router 核心：路由设计 + 组件区分（核心考点）
App Router 是文件系统路由，文件夹嵌套对应路由层级，靠
page.js（页面入口）、layout.js（布局）、loading.js（加载）等约定文件实现；组件默认是服务端组件（RSC） ，负责数据请求和静态展示；加'use client'就是客户端组件（CSC） ，做前端交互和浏览器 API 相关逻辑；路由分组(xxx)解耦模块、动态路由[param]适配参数场景，兼顾性能、SEO 和开发效率。
2. SSR/SSG/ISR 渲染策略 + 混合使用场景
注意区分一下
- SSG：构建时生成静态页，性能和 SEO 最好，适合官网、博客、帮助文档；
- SSR：请求时实时渲染，数据最新，适合用户中心、订单页、实时报表；
- ISR：静态打底 + 增量更新，平衡性能和实时性，是资讯、商品列表的最优解；企业项目里同一个项目混合使用，按路由粒度配置，不拆分项目，成本最低、效果最好。
3. Next.js 中间件开发与应用
Next.js 中间件是路由级全局拦截器，根目录建
middleware.js自动生效，核心用NextResponse做放行、重定向；项目里主要用它做两件事：① 全局鉴权，拦截/admin//user路由，未登录重定向到登录页；② 路由重定向，处理旧路由兼容、权限分流；优势是抽离通用逻辑，解耦业务代码，全局统一管控。
4. Next.js14/15 高危漏洞原因
漏洞是 App Router 的路径校验缺陷导致的，框架未过滤用户传入的
../恶意参数，引发路径遍历 + SSRF 攻击（服务端请求伪造），攻击者能读取服务端敏感文件、穿透内网攻击；官方已发布补丁修复，项目里升级到指定版本，再手动过滤请求参数，就能彻底规避。自行拓展一下常规的xss攻击和CSRF攻击。
六、工程化 & 性能优化篇
这部分不用背长篇大论，记清「核心方向 + 落地手段」，面试官会觉得你有工程思维。
1. 前端性能优化
性能优化核心围绕「快加载、稳渲染、小体积」，分 4 个方向：① 资源加载：缓存策略（强缓存 + 协商缓存）、懒加载（路由 / 图片）、CDN 分发静态资源；② 渲染优化：减少回流重绘、首屏骨架屏、SSR/SSG 直出 DOM、长列表用虚拟列表；③ 代码优化：Tree Shaking、按需引入、分包打包、杜绝内存泄漏；④ 资源优化：图片用 WebP/AVIF、小图标用 SVG/Iconfont、字体子集化；核心指标盯紧 Web Vitals（LCP/FID/CLS），以用户体验为核心做权衡。或者从网络层，渲染层，代码工程化层，资源优化层，兜底层（jest测试用例，异常错误处理器）来回答
2. 打包优化
打包优化核心目标是「减小体积、加快打包速度、按需加载」；① 分包策略：第三方库单独打包成
vendor、抽离公共代码成common，实现长效缓存；② 体积压缩：开启 Tree Shaking 剔除无用代码、用 Terser 压缩 JS、CssMinimizer 压缩 CSS、图片自动压缩；③ 按需引入：UI 库 / 工具库按需加载，拒绝全量打包；④ Vite 专属：利用原生 ESModule、预构建依赖、配置build选项压缩产物，比 Webpack 打包更快。
七、其他高频考点篇
这些考点都是「一句话题」，背完就能答，绝不丢分。
1. JS 原型链
原型链是由对象
__proto__串联的、从子对象到顶层原型的链式查找链路，终点是 null；核心作用：实现属性方法查找、支撑 JS 继承、共享方法节省内存；解决的问题：填补 JS 继承空白、解决方法重复创建的内存浪费、实现属性分层复用。
2. Event Loop 事件循环
JS 是单线程，Event Loop 是执行机制：先执行同步代码 → 再执行微任务（Promise/async/await）→ 最后执行宏任务（定时器 / 事件 / 请求），微任务执行完才会触发一次渲染，循环往复，这个重在理解。
3. WebSocket / Web Worker 区别与用法
了解一下
- WebSocket：实现客户端与服务端双向实时通信，适合聊天、实时推送、直播弹幕，一次连接永久通信，不用轮询；
- Web Worker：让 JS脱离主线程执行，处理大数据计算、图表渲染等耗时任务，避免阻塞页面渲染，提升运行时性能。
4. ES6 Map / Set 核心用法
其它一些知识点自行扩展
- Set：无序、唯一的集合，主要用来数组去重、判断元素是否存在，遍历效率比数组高；
- Map：键值对集合，键可以是任意类型（对象 / 函数），解决了对象键只能是字符串的问题，适合做缓存、存储映射关系。weak Map 弱map，针对引用数据类型的Map。
5. Three.js 核心 + 3D 打印可视化落地
Three.js 底层是WebGL，是 WebGL 的上层封装库，核心三要素是场景、相机、渲染器；项目里能加载 GLTF/GLB 主流 3D 模型，调试材质、实现模型自转 / 视角拖拽等简单动画；针对 3D 打印可视化，能做模型加载校准、打印轨迹分层渲染、视角缩放预览，配合业务联动实现核心功能。
八、项目经验高频题
项目中遇到的最大困难及解决方法
项目中遇到的最大困难是首屏加载速度慢、白屏时间长，核心原因是静态资源体积大、接口请求多、渲染阻塞；解决思路分三步：① 做资源优化，图片压缩、静态资源 CDN 分发、路由懒加载；② 接口优化，合并请求、接口防抖节流、加缓存；③ 渲染优化，首屏骨架屏、SSR 直出 DOM、减少回流重绘；最终效果：首屏加载速度提升 70%，白屏时间从 3s 降到 0.8s，用户体验大幅提升。或者其他一些自己做过的，项目中自己遇到的有意思的问题或者需求。
九、从从容容，游刃有余
即使是找工作，也不要整天闷在家里。
找工作也不要整天闷在家里，平常没面试的时候多出去走走，散步呀，爬爬山啥的，放松一下心情，别太emo了。尽量保持一个正常作息，就跟上班状态一致，不要熬夜，起很晚啥的，早上九点，下午1:30左右固定投一波简历。
✨ 最后总结
前端面试本质是「基础(js,css,计算机基础) + 实战（React+Vue） + 前沿」的结合，不用死磕源码和底层，把这些高频考点背熟，答出「核心逻辑 + 落地场景 + 项目经验」，就能轻松拿捏面试官。这些考点全是我面试一周总结出来的必考内容，整体偏react方向，复制到备忘录，通勤翻两遍、面试前过一遍，绝对稳过👀👀👀。我是没过😭
面试不是背书，而是用简洁的语言体现你的技术认知和实战能力，祝各位兄弟都能拿到心仪的 offer，薪资翻倍💥！
找工作好麻烦呀，年底机会感觉不是特别多也，外包偏多一些，自研会少一些，希望一月中旬前能确定工作吧，不要给自己太大压力，平常心展示自己就好了，实在不行放大招，加入美团众包，兄弟们，冲鸭！！！
点赞收藏，面试不慌；关注我，持续分享前端面试干货和实战技巧～
