现在想转行做互联网的人里，不少都盯着前端------毕竟入门看着不难，招聘薪资也实在。但大家也都纠结一个事：网上铺天盖地的"三个月零基础搞定前端"，到底靠谱不？我当初准备转行的时候，也被这个问题困住好久。其实想明白就知道，盲目乱学肯定不行，但如果有清晰的路线，再针对性准备面试，"三个月入门上岗"也不是没可能。下面就把我整理的学习框架和面试要点分享出来，给想走这条路的朋友做个参考。
以下是针对前端的三个月高效速成学习路线：
阶段一：基础三件套（2周）
-
HTML5（3天） - 语义化标签/表单验证/多媒体标签 - DOM树结构/SEO基础原则
-
CSS3（5天） - Flex布局/Grid布局（重点掌握） - 响应式设计（媒体查询/rem布局） - 动画效果/CSS变量 - 预处理语言（Sass/Less选学）
-
JavaScript（6天） - ES6+核心（箭头函数/解构/Promise/async-await） - 原型链/闭包/事件循环（重点理解） - 模块化开发（CommonJS/ES Module） 技巧：直接通过MDN文档+CodePen实战，避免看长篇视频 阶段二：框架攻坚（2周）
-
Vue3（10天） - Composition API + setup语法 - Vue Router/Pinia状态管理 - 组件通信/生命周期 - 实战：TodoList/购物车
-
React（4天） - Hooks核心（useState/useEffect） - 组件化思想 - 与Vue对比学习（差异化理解） 重点：Vue官方文档+技术胖实战案例，配套Element Plus组件库
阶段三：工程化体系（1周）
-
构建工具 - Vite基础配置（比Webpack优先学习） - npm/yarn/pnpm包管理
-
代码规范 - ESLint/Prettier配置 - Git基础操作（分支管理/PR流程）
-
网络基础 - Axios封装/拦截器 - RESTful API设计规范 - HTTP缓存策略/CORS
阶段四：项目实战（3周）
-
电商后台管理系统（10天） - 权限控制（动态路由） - 图表集成（Echarts） - 表单验证（VeeValidate） - 典型功能：商品CRUD/数据可视化
-
仿头条资讯平台（7天） - 无限滚动加载 - 富文本编辑器（WangEditor） - 第三方登录
-
移动端H5项目（4天） - Vant组件库 - 适配方案（vw/vh） - 微信JS-SDK基础
阶段五：面试冲刺（2周）
-
八股文重点 - 浏览器原理（渲染流程/事件循环） - 性能优化（Lighthouse实操） - 框架原理（Vue响应式/Virtual DOM） - 网络安全（XSS/CSRF/HTTPS）
-
LeetCode专项 - 手写题：防抖节流/深拷贝/Promise - 算法：二叉树遍历/链表操作（剑指Offer精选） - 设计题：Modal组件/图片懒加载
-
简历包装 - 项目难点包装（性能优化/复杂组件） - 技术名词升级：axios封装 → 前端工程化建设 - 模拟面试
JavaScript
- 不会冒泡的事件有哪些？
- mouseEnter 和mouseOver 有什么区别?
- MessageChannel是什么，有什么使用场景?
- async、 await 实现原理
- Proxy能够监听到对象中的对象的引用吗？
- 如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功?
- 下面代码会输出什么？
- 描述下列代码的执行结果
- 什么是作用域链？
- bind、call、apply有什么区别?如何实现一个bind?
- common.js和es6中模块引l入的区别?
- 说说vue3 中的响应式设计原理
- script标签放在header里和放在body底部里有什么区别？
- 下面代码中，点击"+3"按钮后，age的值是什么？
- Vue中，created和mounted两个钩子之间调用时间差值受什么影响？
- vue中，推荐在哪个生命周期发起请求?
- 不会冒泡的事件有哪些？
- mouseEnter 和mouseOver 有什么区别?
- 为什么Node在使用es module时必须加上文件扩展名?
- package.json文件中的 devDependencies和dependendes对象有什么区别?
- React Portals 有什么用?
- react 和 react-dom是什么关系?
- MessageChannel是什么，有什么使用场景？
- React 中为什么不直接使用requestIdleCallback?
- 为什么react需要 fiber 架构，而Vue 却不需要？
CSS
- css 中的 animation、transition,transform有什么区别?
- 怎么做移动端的样式适配？
- 相邻的两个inline-block节点为什么会出现间隔，该何解决？
- grid网格布局是什么？
- CSS3新增了哪些特性？
- 怎么使用cSS3实现动画？
- 怎么理解回流跟重绘？什么场景下会触发？
- 什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？
- 如果使用CSs提高页面性能？
- 如何实现单行/多行文本溢出的首略样式？
- 如何使用css完成视差滚动效果?
- 怎么使用CSS 如何画一个三角形
- 说说对CSS 工程化的理解
- 怎么触发BFC，BFC有什么应用场景？
- 单行文本怎么实现两端对齐？
- 说说你对 CSS 模块化的理解
- CSS 模块化的实现方式
- 怎么让Chrome支持小于12px 的文字?
- 怎么让Chrome支持小于12px的文字?
- flexbox(弹性盒布局模型)是什么，适用什么场景？
- 如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
- 设备像素、css像素、设备独立像素、dpr、ppi 之间有什么区别?
HTML
- 什么是DOM和 BOM?
- 简单描述从输入网址到页面显示的过程
- 一台设备的dpr，是否是可变的？
- 前端效如何选择图片的格式？
- 前端跨页面通信，你道哪些方法？
- 说说你对Dom树的理解
- 行内元素有哪些？块级元素有哪些？空(void)元素有那些？
- htm和css中的图片戏与渲染规则是什么样的？
- title与h1的区别、b与strong的区别、与em的区别?
- script标签为什么建议放在 body标签的底部(defer、async)
- 说说你对 SSG 的理解
- 什么是HTML5,以及和HTML的区别是什么?
- 什么是渐进增虽和优雅降级？
- Node 和Element 是什么关系?
- 导致页面加载白屏时间长的原因有哪些，怎么进行优化？
- 如何控制input输入框的输入字数？
- 渐进式jpg有了解过吗？
- 假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的图片？
React
- 下面代码中，点击"+3"按钮后，age的值是什么？
- React Portals 有什么用?
- react和react-dom是什么关系?
- React 中为什么不直接使用 requestIdleCallback?
- 为什么react 需要 fiber 架构，而Vue 却不需要?
- 子组件是一个Portal，发生点击事件能冒泡到父组件吗？
- React 为什么要废弃componentWillMount、componentWillReceiveProps、componentWillUpdate这三个生命周期钩子？它们有哪些问题呢?React又是如何解决的呢？
- 说说React render方法的原理?在什么时候会被触发?
- 说说React事件和原生事件的执行顺序
- 说说对受控组件和非受控组件的理解，以及应用场景？
- 你在React项目中是如何使用Redux的？项目结构是如何划分的?
- 说说对Redux中间件的理解？常用的中间件有哪些？实现原理？
- 说说你对Redux的理解？其工作原理？
- 说说你对immutable的理解？如何应用在react项目中?
- 说说React Jsx转换成真实DOM过程?
- 说说你在Reac项目是如何捕获错误的?
- 说说React服务端宣染怎么做？原理是什么？
- ReactFiber是如何实现更新过程可控?
- Fiber 为什么是React 性能的一个飞跃？
- setState是同步，还是异步的?
Vue
- Vue 有了数据响应式，为何还要diff？
- vue3为什么不需要时间分片?
- vue3为什么要引入Composition API？
- 谈谈 Vue 事件机制,并手写on、on、on、off、emit、emit、 emit、once
- computed计算值为什么还可以依赖另外一个computed计算值?
- 说一下vm.$set 原理
- 怎么在Vue 中定义全局方法?
- Vue中父组件怎么监听到子组件的生命周期？
- vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么?
- 说说vue3中的响应式设计原理
- Vue中，created和mounted两个钩子之间调用时间差值受什么影响？
- vue中，推荐在哪个生命周期发起请求？
- 为什么react 需要 fiber 架构,而 Vue 却不需要?
- SPA(单页应用)首屏加戏速度慢怎么解决?
- 说下Vite的原理
- Vue2.0为什么不能检查数组的变化，该怎么解决？
- 说说Vue 页面渲染流程
- vue中computedfDwatch区别
- vuex中的辅助函数怎么使用？
- 如果使用Vue3.0实现一个Modal，你会怎么进行设计?
- Vue 3.0中Treeshaking特性是什么，并举例进行说明?
- Vue3.0所采用的Composition Api与Vue2.x使用的Options Api有什么不同?
- Vue3.0性能提升主要是通过哪几方面体现的？
- Vue3.0的设计目标是什么？做了哪些优化?
- 你是怎么处理vue项目中的错误的？
算法
- 最大的钻石
- 举例说明你对尾递归的理解，以及有哪些应用场景
- 去除字符串中出现次数最少的字符，不改变原字符串的顺序。
- 请手写"快速排序"
- 洗牌算法
- 什么是尾调用优化和尾递归？
- 合并K个升序链表
- 什么是时间复杂度？
- 请手写"基数排序"
TypeScript
- 说说对 TypeScript 中命名空间与模块的理解?区别?
- 说说你对 typescript 的理解?与javascript 的区别?
- Typescript中泛型是什么?
- TypeScript中有哪些声明变量的方式？
- 什么是Typescript的方法重载？
- 请实现下面的 sleep 方法
- typescript 中的 is 关键字有什么用?
- TypeScrip支持的访问修饰符有哪些?
- 请实现下面的 myMap 方法
- 请实现下面的 treePath方法
- 请实现下面的 product 方法
- 请实现下面的 myAll 方法
- 请实现下面的 sum 方法
- 请实现下面的 mergeArray 方法
- 实现下面的 firstSingleChar 方法
- 实现下面的 reverseWord 方法
- 如何定义一个数组，它的元紊可能是字符串类型，也可能是数值类型？
- 请补充 objToArray数
我已经栽过跟头，深知这种信息差的致命性。后面整理了大量这类实战型面试题，都是企业高频考察的核心内容，背熟这些再去面试才真的有底气👉https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material
上面这套三个月的学习路线，核心就是帮大家快速摸到前端的入门门槛，不是让你一下子变成大神。说实话，三个月时间，能把基础打牢、练会几个实战项目，应对基础岗位的面试就够了。想在这行长期做，后续肯定还得慢慢积累经验、补全知识点。另外提醒一句，走速成路线千万别偷懒，每个阶段的时间节点要卡好，多动手练项目，面试知识点也得吃透。希望这份整理能帮大家少走点弯路，把三个月的时间用在刀刃上，顺利找到一份心仪的前端工作。