一、深挖核心原理，建立底层认知
每日专注一小时，深入理解三大核心：浏览器渲染机制与性能优化、JavaScript 异步模型与事件循环、前端框架（React/Vue）的设计思想与响应式原理。学习须结合源码与项目实践，透彻掌握其工作机制与设计初衷，避免流于表面。
二、系统化学习，以项目驱动整合
若知识零散，应选择涵盖 JavaScript 高级特性、前端工程化、性能优化、Node.js 基础与前端框架实战的体系课程。关键在于每阶段都需完成对应的模块化项目练习，以此串联知识点，将理论整合为系统性解决问题的能力。
三、精练算法，形成解题模式
算法专题突破，聚焦 数组、字符串、链表、二叉树、DFS/BFS 等高频题型。每道题遵循“暴力解 → 复杂度分析 → 最优解”的思考流程，并最终总结同类问题的通用模板与边界条件。
四、锤炼项目，突出技术亮点
通过复刻 “在线协作工具”“仿某某电商应用” 等实战项目积累经验。不止于复现，应主动集成 前端监控、性能优化、SSR、PWA、状态管理复杂场景、Webpack/Vite 深度配置 等进阶能力。
五、高效准备面试，强化表达逻辑
针对 Vue 响应式原理、React Fiber 与 Diff 算法、前端路由、Webpack 打包机制、HTTP/HTTPS、浏览器缓存、跨域方案 等高频考点，构建“问题背景-核心原理-应用实践”的叙述逻辑。同时准备 2-3 个线上性能优化或复杂 Bug 排查案例，展现从现象定位、工具调试到解决方案的系统性能力。
六、精准求职，量化个人价值
策略匹配：瞄准中小厂时，突出快速迭代与业务落地能力；考虑中大型或传统企业，则强调代码规范、性能保障、工程化与协作经验。
简历呈现：务必量化成果，如“通过懒加载与代码分割将首屏加载时间降低 40%”、“使用 Web Worker 优化大计算任务，页面交互响应提升 60%”，将技术能力转化为可感知的用户体验与业务价值。
七、熬夜“肝”中大厂面试题
JavaScript篇
Q1、不会冒泡的事件有哪些?
Q2、mouseEnter 和 mouseOver 有什么区别?
Q3、MessageChannel 是什么，有什么使用场景?
Q4、async、await 实现原理
Q5、Proxy 能够监听到对象中的对象的引用吗?
Q6、如何让 var [a, b]={a:1,b: 2}解构赋值成功?
Q7、下面代码会输出什么?
Q8、描述下列代码的执行结果
Q9、什么是作用域链?
Q10、bind、call、apply 有什么区别?如何实现一个bind?
React篇
Q11、下面代码中，点击“+3”按钮后，age 的值是什么?
Q12、React Portals 有什么用?
Q13、react 和 react-dom 是什么关系?
Q14、React 中为什么不直接使用 requestIdleCallback?
Q15、为什么 react 需要 fiber 架构，而 Vue却不需要?
Q16、子组件是一个 Portal，发生点击事件能冒泡到父组件吗？
Q17、说说React render方法的原理?在什么时候会被触发?
Vue篇
Q18、 Vue 有了数据响应式，为何还要 diff ?
Q19、vue3 为什么不需要时间分片?
Q20、vue3 为什么要引入 Composition API ?
Q21、谈谈 Vue 事件机制，并手写$on、$off、$emit、$once
Q22、computed 计算值为什么还可以依赖另外一个 computed 计算值?
Q23、怎么在 Vue 中定义全局方法?
计算机网络篇
Q24、简单描述从输入网址到页面显示的过程
Q25、说说WebSocket和HTTP的区别
Q26、说说 https 的握手过程
Q27、HTTP2中，多路复用的原理是什么?
TypeScript篇
Q28、说说对 TypeScript 中命名空间与模块的理解?区别?
Q29、说说你对 typescript 的理解?与 javascript 的区别?
Q30、Typescript中泛型是什么?
Q31、TypeScript中有哪些声明变量的方式?
Q32、什么是Typescript的方法重载?
Q33、请实现下面的 sleep 方法
Q34、typescript 中的 is 关键字有什么用?
Q35、TypeScript支持的访问修饰符有哪些?
Q36、请实现下面的 myMap 方法
Q37、请实现下面的 treePath 方法
Q38、请实现下面的 produat 方法
Node.js篇
Q39、common.js和es6中模块引入的区别?
Q40、为什么Node在使用es module时必须加上文件扩展名?
Q41、浏览器和 Node 中的事件循环有什么区别?
Q42、Node性能如何进行监控以及优化?
Q43、如果让你来设计一个分页功能,你会怎么设计?前后端如何交互
Q44、如何实现文件上传?说说你的思路
Q45、如何实现iwt鉴权机制?说说你的思路
Q46、说说对中间件概念的理解，如何封装 node 中间件?
Q47、说说 Node 文件査找的优先级以及 Require 方法的文件查找策略?
Q48、说说对Nodejs中的事件循环机制理解?
性能优化篇
Q49、script标签放在header里和放在body底部里有什么区别?
Q50、前端性能优化指标有哪些?怎么进行性能检测?
Q51、SPA(单页应用)首屏加载速度慢怎么解决?
Q52、如果使用CSS提高贞面性能?
Q53、怎么进行站点内的图片性能优化?
Q54、虚拟DOM一定更快吗?
Q55、有些框架不用虚拟dom，但是他们的性能也不错是为什么?
Q56、如果某个页面有几百个函数需要执行，可以怎么优化页面的性能?
Q57、讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理
Q58、导致页面加载白屏时间长的原因有哪些，怎么进行优化?
es篇
Q59、common.js和es6中模块引入的区别?
Q60、es5 中的类和es6中的dass有什么区别?
Q61、你是怎么理解ES6中 Decorator 的?使用场景有哪些?
Q62、你是怎么理解ES6中Module的?使用场景有哪些?
Q63、你是怎么理解ES6中Proxy的?使用场景有哪些?
Q64、怎么理解ES6中 Generator的?使用场景有哪些?
Q65、你是怎么理解ES6中 Promise的?使用场景有哪些?
Q66、ES6中新增的Set、Map两种数据结构怎么理解?
前端工程化篇
Q67、webpack5 的主要升级点有哪些?
Q68、说下vite的原理
Q69、与webpack类似的工具还有哪些?区别?
Q70、说说如何借助webpack来优化前端性能?
Q71、说说webpack proxy工作原理?为什么能解决跨域?
Q72、说说webpack的热更新是如何做到的?原理是什么?
Q73、面试官:说说Loader和Plugin的区别?编写Loader，Plugin的思路?
Q74、说说webpack中常见的Plugin?解决了什么问题?
Q75、说说webpack中常见的Loader?解决了什么问题?
Q76、说说webpack的构建流程?
常见的前端场景题
Q77、前端如何实现截图?
Q78、当QPS达到峰值时,该如何处理?
Q79、js 超过 Number 最大值的数怎么处理?
Q80、使用同一个链接， 如何实现 PC 打开是 web 应用、手机打 开是一个 H5 应用?
Q81、如何保证用户的使用体验
Q82、如何解决页面请求接口大规模并发问题
Q83、设计一套全站请求耗时统计工具
Q84、大文件上传了解多少
Q85、H5 如何解决移动端适配问题
Q86、站点一键换肤的实现方式有哪些?
Q87、如何实现网页加载进度条?
Q88、常见图片懒加载方式有哪些?
Q89、cookie 构成部分有哪些
Q90、扫码登录实现方式
Q91、DNS 协议了解多少
Q92、函数式编程了解多少?
Q93、前端水印了解多少?
Q94、什么是领域模型
Q95、一直在 window 上面挂东西是否有什么风险
Q96、深度 SEO 优化的方式有哪些，从技术层面来说
Q97、小程序为什么会有两个线程
Q98、web 应用中如何对静态资源加载失败的场景做降级处理
Q99、html 中前缀为>
