写给26 27 28届同学的前端学习路线

8 阅读7分钟

一、速成版

适用范围

  1. 27届零基础,想速成前端找实习的同学
  2. 26届想快速春招找工作的同学
  3. 其他时间紧张,要快速学前端的同学

HTML+CSS(1周)

  • 内容:
    • 常见的html标签及用法等等
    • CSS盒模型、选择器及其优先级、常见样式、定位、flex布局等等
    • 练习: 常用页面布局,比如两栏、三栏布局、导航栏、水平垂直居中
  • 注意事项: 尽量快点学完,别纠结细节,不建议看黑马的教程,找个短一点的视频看,或者能力强的同学直接看mdn文档

developer.mozilla.org/zh-CN/docs/…

JavaScript (2-3周,对中大厂非常重要)

  • 内容
    • 基础语法:变量,函数,循环等
    • ES6相关: class,箭头函数,解构赋值,map set对象,promise等异步编程方案,数组和对象的各种方法等
    • webapi: 常见的dom操作方法,事件绑定等
    • 前后端通信: Ajax,fetch请求,了解原理和简单步骤即可
    • JS高级部分(大厂高频考点,可以等后面背八股再学):闭包,this指向,原型链,事件循环,浅拷贝和深拷贝Promise原理等等
  • 练习:
    • 抽时间手写常见的api(call bind promise.all等),想冲击中大厂的同学可以开始刷力扣hot100算法题
    • 常用的网页效果:轮播图,tab栏切换,todolist等等
  • 注意事项: 有些教程会用原生JS写一些复杂的效果,不要花太多时间在这里,后面都有框架帮你搞定。同理,找一个短一点的教程跟着敲,看MDN文档和JS红宝书

前端工程化(2-3天)

  1. 前端-模块化解决方案(esm cjs等)
  2. 包管理器的使用(会用nvm安装node,npm常见的命令)
  3. 构建工具webpack和vite(知道它们的作用就行,不用那么深入)
  4. TypeScript:了解简单的基础类型,理解其用法即可
  5. 用脚手架创建一个Vue或者React项目,理解项目基本结构

PS:这部分内容其实水很深,但是为了速成,只需要简单了解,为后面前端框架的学习做铺垫即可,但是不建议直接跳过,否则最开始做项目会一脸懵

前端框架(1-2周)

(Vue和React选一个,想进大厂的优先React,其他同学建议选Vue)

Vue版本 (优先学vue3)

cn.vuejs.org/

  1. Vue语法:模板语法,条件渲染,ref和reactive响应式,条件渲染,列表渲染
  2. 深入响应式:computed watch用法
  3. 组件基础:生命周期、组件之间的通信
  4. 常用的内置组件和api:Keep-alive
  5. 周边生态:路由Vue-Router,状态管理pinia,Vuex
React版本

zh-hans.react.dev/

  1. react的语法:jsx语法,条件渲染,列表渲染,UI=f(state)思想
  2. 常见hook:掌握 useState useRef useEffect useContext useMemo useCallback这几个就行
  3. 组件之间的通信方法
  4. 周边生态:路由React-Router 状态管理Redux Zustand Mobx等

个人觉得,仅看上手的话React要比Vue更快,但深入学习原理的话React是比Vue要难一些,而且相对来讲React的开发心智负担会比较大,经常要注意很多坑,文档也不如Vue舒服清晰。

实战项目 (3-4周)

至少要做两个项目写在简历上,项目类型五花八门,如果项目本身没什么亮点的话可以挖掘一些通用的技术不一定要自己完全实现,但起码是面试要能说的明白。

a. 前端复杂业务功能的实现

除了常规的增删改查,还可以自己添加一些常用的功能,比如复杂双token登录鉴权,文档处理,文件上传预览,接入AI大模型

b. 现代工程化与技术选型的实践

构建工具:Vite/Webpack打包优化/插件配置

代码规范:Eslint/Prettier规范化配置

测试部署流程:Vitest/Jest写一些测试脚本 或者参与项目部署等等

技术选型:使用哪些第三方库,竞品调研与方案确定

c. 通用提效工具的封装
  • 通用业务组件/或者直接做组件库项目/针对已有组件库的二次封装
  • 自定义的工具函数/自定义hook:常见的如请求库,表单校验,货币时间处理等等
d. 性能优化处理

资源压缩、懒加载、异步组件、无限滚动和虚拟滚动、预加载和预请求、常见的性能指标监测等等

应试准备(2-3周)

  • 简历包装
    • 格式:按照个人信息+专业技能+项目1难点+项目2难点+其他
  • 项目难点亮点熟悉
  • 前端八股文熟悉(最高优先级)

注意事项:有不会的很正常(八股和技术学习基本是脱节的),去进阶版部分找相应的知识学习就可以了,速成的话可以看掘金和牛客,但最好自己整理一个知识库,后面面试遇到问题就放进去

juejin.cn/post/733006…

二、进阶版

适用范围

  • 已经有小厂实习/校招offer,想要冲击中大厂实习/校招的同学
  • 在中大厂实习,想要包装产出应对暑期实习/秋招的同学也可以参考

PS:上述速成版路线足以让我们找到一份前端中小厂的实习,但为了进中大厂的话还得继续学多一点知识,这也是实习或者校招能拉开差距的地方

以下按照优先级排序

1. JS进阶知识及手撕题

  • 高频考点比如事件循环、this指向、原型链、闭包、深浅拷贝等(会考代码输出题)
  • 手撕题
    • 前端手写题
    • leetcode算法 (hot100的easy和hard基本够了,有能力多刷一些总没错的)

2. 计算机网络基础知识

  • HTTP各版本的区别、TCP UDP
  • 各种类型的请求,状态码
  • 浏览器相关的渲染原理、缓存机制、安全机制

3. 工程化与性能优化(结合简历准备)

  • 性能优化的方案,性能指标的计算与监控
  • 前端工程化的原理与实践
    • Vite和Webpack对比分析
    • 各种包管理器对比(npm,pnpm,yarn)
  • 复杂架构的应用:monorepo结构、微前端、SSR服务端渲染等等(结合自己的项目)

4. 前端框架的原理深入

  • Vue版本:
    • Vue的设计思想,Vue2和Vue3的区别
    • 响应式原理及实现 computed和watch的机制
    • 虚拟DOM,diff算法(了解就可以)
    • Vuex和Pinia的区别
  • React版本:
    • React的设计思想、类组件和函数组件
    • React hook的设计思想和执行机制
    • React的fiber架构和时间分片
    • React的事件合成机制
    • 各种状态管理库的方案对比

5. NodeJS服务端知识(非必须)

时间不多的话别学,但是想完善自己的前端知识体系的话还是简单学一下

  • 文件读写
  • http接口开发
  • 后端框架:express Koa等

三、一些体感和经验

秋招中大厂的影响因素

  • 学校(学历无关)=中大厂实习>其他实习>专业>学历
  • 对92的同学:八股基础≈实习>项目
  • 非92的同学:基本上不太能有大的缺陷,项目尽可能有一点复杂度

碎碎念

92的同学,能做到上述的80%(然而主播自己直到没到秋招还没做到SOS)的应该说是稳进大厂了,非92的同学卷一点也可以进,至少拿个15-20k的offer应该是没问题的。

其实最大的因素是主观因素,也就是你明确的学习路线、充分的学习时间和稳定的心态。