前端学习路线（校招实习版）

前言

可能是由于前些年前端已死的言论，导致前端简历大量减少，25校招大厂出现前端/客户端简历紧缺的情况，非常适合我们有一定学历的人捡漏，只需要稍加突击，就能获得一份不错的大厂前端开发offer。

总结并优化了以下自己的学习路线，供大家参考。

适合对象：大学本科在读，想找前端实习

大纲

1. 前端入门
2. 基础补充
3. 前端工程化

前端入门

资源与建议

• 简介：快速学会前端三件套，建议直接实战，边学边练，快速入门
• 墙裂推荐资源：freeCodeCamp 在线编程学习三件套，非常好刷，一刷一个不吱声www.freecodecamp.org/learn

初学刷这前两个就够了，配合黑马程序员的视频www.bilibili.com/video/BV14J…，基础直接无敌。

• 推荐开发工具：Chrome + VSCode 要学就学最主流了，主流了会了哪怕工作需要偏门的也能很快学会。
• 推荐使用支持Markdown语法的笔记软件记笔记，在线的语雀、飞书、掘金，本地只推荐Typora

重要知识点：

看完以上教程后，可以按照以下知识点进行查漏补缺，至于缺漏知识点的资源，相信熟练使用搜索引擎和GPT的你们一定能找到比我更好的。 以下知识点尤其是JS部分是面试非常爱问的，最好在初学时就有一定认识，学不懂也没关系，我以后会写一篇面试复习计划，专门针对面试进行复习。

HTML

• 标签
  • div
  • h1 - h6
  • p
  • img
  • ul ol
  • a
  • form
  • table
  • iframe
• 属性
• HTML特性
  • 语义化标签
  • 浏览器支持
  • 多媒体标签
  • Canvas
  • 本地存储
    • localStorage
    • sessionStorage
  • Web Worders 多线程
  • 应用缓存Cache Manifest
  • 无障碍

CSS

• 基本语法
• 引入方式
  • 行内样式
  • 内部样式表
  • 外部样式表
• 选择器
  • 通用选择器
  • 标签选择器
  • id 选择器
  • class 选择器
  • 属性选择器
  • 派生选择器
    • 后代选择器
    • 子元素选择器
    • 相邻兄弟选择器
  • 组合选择器
  • 伪选择器
  • 选择器优先级
• 属性
  • 单位
    • px
    • em
    • rem
    • vw
    • vh
  • 背景
  • 文本
  • 字体
  • 列表
  • 表格
• 文档流
  • 标准流
  • 浮动流
  • 定位流
• 内联元素 / 块状元素
• 盒子模型
  • content
  • padding
  • border
  • margin
• 浮动
  • 设置浮动 float
  • 清除浮动 clear
• 定位
  • static
  • absolute
  • fixed
  • relative
  • sticky
• 层叠规则
• BFC 和 IFC 机制
• CSS3
  • 响应式布局
    • 媒体查询
    • Flex 布局
    • Grid 布局
    • 瀑布流
  • 动画
  • 过渡
  • 渐变
  • 背景
  • 边框
  • 圆角
  • 字体
  • 2D / 3D 转换

JavaScript

• 数据类型
  • 值类型
    • 字符串 String
    • 数组 Number
    • 布尔 Boolean
    • 空值 Null
    • 未定义 Undefined
    • Symbol
  • 引用类型
    • 对象 Object
    • 数组 Array
    • 函数 Function
• 数据类型转换
• 函数
  • 概念
  • 自定义函数
  • 调用方式
    • 全局调用
    • 构造函数调用
    • 函数方法调用
    • apply
    • call
  • 闭包
• 对象
  • 概念
  • this
  • 原型链和继承
  • 常用对象
    • 数字 Number
    • 字符串 String 对象
    • 日期 Date 对象
    • 数组 Array
    • 布尔 Boolean
    • 算数 Math
  • 自定义对象
• 作用域（作用域链）
• BOM
• DOM API
• JSON
• Ajax
• JavaScript 执行机制

ES6+ 特性

• let 和 const
• 变量解构赋值
• 对象扩展和新增方法
• Symbol
• Set 和 Map 数据结构
• Promise & async / await 异步编程
• Generator 函数异步编程

基础补充

在入门阶段我们学习了前端三件套，但是作为前端工程师或者说作为程序眼，仅仅会写代码是不够的，我们需要必要的计算机基础，作为web开发的理论前提。对于前端开发者来说，以下计算机基础知识是需要掌握的，这里只进行罗列，细节请自行百度或者GPT：

• 互联网
• 域名
• DNS
• 服务器
• 浏览器
  • 浏览器 DOM 事件流 / 事件委托
  • 浏览器加载顺序
  • 浏览器渲染过程
  • 浏览器事件循环
  • 浏览器同源策略
  • 跨域解决方案
  • 浏览器缓存
  • 控制台调试技巧
• HTTP
  • HTTP 请求过程
  • 常见 HTTP 协议
    • HTTP 1.0
    • HTTP 1.1
    • HTTP 2undefined_0.059720030927830736
    • HTTP 3
  • HTTP 请求类别
  • 常见状态码
    • 1xx 信息
    • 2xx 成功
    • 3xx 重定向
    • 4xx 客户端错误
    • 5xx 服务器错误
  • WebSocket
  • Cookie
  • Session
  • HTTPS

还有就是数据结构、计算机网络和操作系统了，相信科班出生的你们都学的很好，我就不献丑了。 但有一个东西非软工可能不学，就是设计模式，前端里面设计模式也是常常使用的

设计模式

• 单例模式
• 代理模式
• 工厂模式
• 装饰者模式
• 观察者模式
• 策略模式
• 门面模式

还有所有程序员都要会的：

• Git版本控制
• Github、Gitlab代码仓库
• Linux服务器
• 正则表达式

前端工程化

Node.JS

简介：NodeJS是一个跨平台的JS运行时环境，让JS不在局限于浏览器，而是可以直接在操作系统上运行 资源：直接看官方文档就好nodejs.cn/en/learn

包管理

• npm（最广）
• yarn
• npx
• pnpm（最快）

开发框架

2024年市场上基本上只剩下两个框架了，都是基于虚拟DOM的，分别是Vue3和React，至于jQeury这些老东西不学也罢。 推荐资料都是官方文档 + 源码。

对于框架，我们要熟练掌握基本写法，能够利用脚手架快速构建项目。 同时也要掌握其基本原理，如响应式原理、DIFF算法等

Vue

• Vue Router
• Vuex

React

• React DOM
• React Router
• Redux
• MobX
• React Hooks

前端拓展

学到这里，你已经拥有的良好的前端基础，已经可以开始投简历找实习了。此后的知识比较杂，并不是按部就班地学习的，而是在实际做项目的过程中接触到的，因此可以先有个大概印象就好，等用到了再学。

封装库

• Element UI
• Ant Design

服务端渲染

• Nuxt.js
• Next.js

调试

• 热更新
• 内网穿透

测试

UT单元测试

性能优化

• 首屏加载
• 性能监控
• 性能指标
• 懒加载
• JS优化
• CSS优化
• 资源压缩
• 渲染优化
• 动画性能优化

大前端

所谓大前端，就是拓展前端技术的使用范围，让其不再局限于浏览器，即用前端技术去开发小程序、移动端APP或者桌面端应用。

移动端

• Uniaap
• Ionic
• React Native
• Flutter

桌面端

• Electron

小程序

• Uniapp
• Taro

写在最后

前端的知识点多且杂，但是不用担心，掌握好最基础的语法和底层原理，多敲代码，多做项目，慢慢就能熟练起来。

总之就是，夯实基础，多敲代码，多敲代码，多敲代码！