前端学习路线(从入门到入土)

• ✨必学
• ✅推荐
• ❌不推荐

大纲

• 1.前言 - 学编程需要的特质

• 2.前端学习七阶段

  • 1.前端入门
  • 2.巩固基础
  • 3.前端工程化
  • 4.前端优化
  • 5.前端生态
  • 6.前端求职
  • 7.前端未来

• 3.尾声-持续学习

前言 - 学编程需要的特质

---

不怕秃头
相信自己有能力，你要知道，现在的所有技术都是人发明的，理论上讲，只要你可以一直学习，就可以掌握所有的技术，换句话说，你可以成为一个技术大牛。但是，你需要有以下特质：

• 兴趣
• 坚持
• 付出
• 心态

---

一、前端入门

• 描述：学习前端基础三件套，建议从实战开始，边学边练，培养兴趣，快速入门。
  （前端的前期阶段和后端比起来应该更简单，因为入门很快，正反馈比较快，你认真学基本可以快速地掌握前端基础，做出一些好看的静态页面，增加你的自信心。后期的话也不难，只要你不当摆子，It行业忌讳的就是不持续学习）

• 资源：

  • MDN
  • W3Cschool中文网
  • pink老师前端入门教程
  • 阿里云前端实战学习
  • b站上门各种视频等等

• 目标:了解和实践各语言的基本语法，可以使用开发工具来独立开发一个留言板网站。

开发工具

• 描述：工欲善其事，必先利其器。

浏览器

• ✨Chrome（推荐，不过可能要做一些配置，国内访问会被墙，直接用代理或者Edge就可以了）
• ✅Firefox
• ✅Edge
• ❌Opera
• Safari

编辑器

• ✨VS Code
• ✅WebStorm
• Atom
• Sublime Text
• HbuilderX
• ❌记事本
• 在线IDE

文档笔记

• ✨Markdown
• ✨Typora
• 在线笔记:
  • 语雀
  • 腾讯文档
  • 石墨文档
  • 等等

✨HTML

• 描述：HTML是超文本标记语言，用于创建网页的结构。
• 资源：
  • MDN HTML 文档
• ✨基本语法
• ✨标签
  • 分区 div
  • 标题 h1~h6
  • 段落 p
  • 超链接 a
  • 图片 img
  • 列表 ul/ol
  • 表格 table
  • 表单 form
  • 其他标签 span、strong、em、br、hr等
• ✅HTML5新特性
  • 语义化标签 article、section、nav、aside、header、footer等
  • 浏览器支持
  • 多媒体标签 audio、video等
  • Canvas 画布
  • ❌SVG 矢量图
  • 本地存储
    • localStorage
    • sessionStorage
    • ❌Web SQL
  • Web Workers
  • 应用缓存(Cache Manifest)
  • 无障碍等等

✨CSS

• 描述：CSS是层叠样式表，用于描述网页的外观和布局。

• 资源：

  • MDN CSS 文档

• ✨基本语法

• ✨引入方式

  • 行内样式
  • 内部样式表
  • 外部样式表

• ✨选择器

  • 通用选择器 *
  • 标签选择器
  • id选择器 #id
  • 类选择器 .class
  • 属性选择器 [attr]
  • 派生选择器
    • 子选择器 >
    • 后代选择器 “空格”
    • 相邻兄弟选择器 +
    • 通用兄弟选择器 ~
  • 组合选择器
    • 逗号选择器 ,
    • 并集选择器
  • 伪类选择器
    • 链接伪类 :link
    • 动态伪类 :active
    • 静态伪类 :hover
    • 其他伪类 :first-child、:last-child、:nth-child(n)、:nth-last-child(n)
    • 选择器优先级
      • 内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 > 通配符选择器（一般而言）

• ✨属性

  • 单位
    • 像素 px
    • 相对单位 em、rem、%
    • 视口单位 vw、vh
  • 背景
  • 文本
  • 字体
  • 列表
  • 表格

• ✨文档流

  • 标准流
  • 浮动流
  • 定位流

• ✨内联元素/块级元素/行内块元素

• ✨盒子模型

  • content(内容)
  • padding(内边距)
  • border(边框)
  • margin(外边距)

• ✨浮动

  • 设置浮动 float
  • 清除浮动 clear

• ✨定位

  • 静态定位 static
  • 绝对定位 absolute
  • 相对定位 relative
  • 固定定位 fixed
  • 粘性定位 sticky

• ✨层叠规则

• BFC和IFC机制

• CSS3新特性

  • 盒子阴影 box-shadow
  • 圆角 border-radius
  • 渐变
  • 过渡 transition
  • 动画 animation
  • 2D/3D转换 transform
  • ✨响应式布局
    • 媒体查询
    • Flex布局
    • Grid布局
    • 瀑布流

✨JavaScript

（就是Java脚本，不过是弱类型语言）,学过一门编程语言很好理解，很快就可以学完

• 描述:具有函数优先的轻量级，解释性或即时编译型的编程语言
• 资源：
  • MDN JavaScript 文档
  • wangdoc
• ✨基本语法
• ✨数据类型
  • 值类型
    • 字符串 String
    • 数字 Number
    • 布尔值 Boolean
    • 空值 Null
    • 未定义 Undefined
    • 符号 Symbol
  • 引用类型
    • 对象 Object
    • 数组 Array
    • 函数 Function
• ✅数据类型转换
• ✅函数
  • ✨概念
  • ✨自定义函数
  • 调用方式
    • ✨全局调用
    • 构造函数调用
    • ✨函数方法调用
    • apply() 调用
    • call() 调用
    • bind() 调用
  • ✨闭包
• ✨对象
  • 概念
  • this
  • 原型链和继承
  • 常用的对象
    • 数组 Array
    • 字符串 String
    • 日期 Date
    • 正则表达式 RegExp
    • 数学 Math
    • 全局对象 window
    • 事件对象 Event
    • 错误对象 Error
  • 自定义对象
• ✨作用域(简单记忆：一个大括号就是一个作用域)
• ✨BOM API
• ✨DOM API
• ✨JSON
• ✨AJAX
• JavaScript 执行机制

✨ES6+特性

• 描述：ES6是ECMAScript 2015的简称，是JavaScript的一个版本，引入了许多新的语法和特性。

• 资源

  • 阮一峰的ES6入门
  • 官方镜像
  • ES6 标准中文文档

• ✨let和const

• ✨箭头函数

• ✨模板字符串

• ✨解构赋值

• ✨Symbol

• ✨Set和Map数据结构

• ✨Promise & async/await异步编程

• ✨Proxy代理

• Generator函数异步编程

✨TypeScript(有时间可以学，直接学框架也行)

• 描述：TypeScript是JavaScript的一个超集，添加了静态类型检查和其他一些特性。
• 资源：
  • TypeScript

二、巩固基础（日积月累）

（这部分内容比较多，建议是日积月累，平时专业课到后面也会学到，追求速度可以先去学框架了。但是✨JavaScript一定要学好，尤其是✨ES6+特性，不然看不懂后面的框架的）

• 描述：学习前端、计算机、软件开发相关基础知识，并且巩固上阶段学的前端三件套。
• 📌目标:熟悉前端三件套语法，尤其是JS,并了解互联网、域名、浏览器、服务器等等，我觉得至少要了解这些，开发方向的程序员怎么样都要了解一些，以后从事这个行业少不了和这些打交道

基础知识(先有个印象)

• ✅互联网
• ✨协议
• ✨域名
• ✨服务器
• ✨DNS
• ✅浏览器（面试重点）
  • 浏览器DOM事件流/事件委托
  • ✨浏览器渲染机制
  • ✨浏览器加载顺序
  • ✨浏览器事件循环
  • 浏览器同源策略
  • 跨域解决方案
  • 浏览器缓存机制
  • 控制台 console.log()
  • 调试工具（浏览器开发者工具）
• ✅HTTP
  • HTTP请求
  • HTTP协议
  • HTTP请求类别
  • 常见的状态码
    • 1xx 信息性状态码
    • 2xx 成功状态码
    • 3xx 重定向状态码
    • 4xx 客户端错误状态码
    • 5xx 服务器错误状态码
  • WebSocket
  • Cookie
  • Session
  • HTTPS

计算机基础(其实基本上就是408考研的内容)

✅数据结构与算法

• ✨时间、空间复杂度

• 数据结构

  • ✨数组

  • ✨链表

  • ✨栈

  • ✨队列

  • ✨树

  • ✨图

  • ✨哈希表

• 算法

  • ✨排序

  • ✨双指针

  • ✨查找

  • ✨分治

  • ✨动态规划（DP）

  • ✨递归

  • ✨回溯

  • ✨贪心

  • ✨位运算

  • ✨DFS（深度优先搜索）

  • ✨BFS（广度优先搜索）

  • ✨图论

✅计算机网络

• ✨协议

• ✨IP地址

• ✨端口号

• ✨TCP/UDP

• ✨HTTP/HTTPS

• ✨DNS

• ✨路由

• ✨交换机

• ✨路由器

• ✨防火墙

✅操作系统

• 进程、线程

• 进程/线程之间的通讯方式

• 进程调度算法

• 进程/线程状态

• 死锁

• 内存管理

软件开发基础（大三软考也会考到）

✅软件设计模式

• 单例模式

• 代理模式

• 工厂模式

• 装饰着模式

• 观察者模式

• 策略模式

• 门面模式

✨Git版本控制

这个更是重量级的内容，建议是日积月累，不用去背，用到多查文档，用得多了就记住了。
资源：

• Git教程

• Git命令参考

• 常用的命令

  • git init
  • git clone
  • git add
  • git commit
  • git push
  • git pull
  • git branch
  • git checkout
  • git merge

✅Linux服务器

• 常用的命令

✅正则表达式(Java和JavaScript有)

三、前端工程化

• 描述：前端工程化是使用软件工程的技术和方法来进行掐断的开发流程、技术、工具、经验等的规范化和标准化，以提高开发效率、代码质量和可维护性，减少不必要的重复工作时间。
• 看这篇文章，了解什么是前端工程化
• 目标:至少学会一门主流的前端开发框架（如React、Vue、Angular等），并配合脚手架、组件库、工具等从0开始搭建并开发一个完整的前端网站，可以试着模仿一些知名的站点。要求遵循企业开发规范，将项目代码提交到代码仓库中，斌且独立发布到线上，供他人访问。此外，建议要多找机会组织和参与一些团队开发的项目，如果你将来要从事开发，这几乎是必备的技能，一个人的社交能力在工作还是生活还是学习都是非常重要的。要多加练习。

研发大致流程

1. 需求分析
2. 技术选型
3. 初始化(广义的，包括工作的分配)
4. 开发
5. 本地测试
6. 代码提交
7. 编译、打包、构建
8. 部署
9. 集成测试
10. 发布上线
11. 监控运维

代码托管

• 描述:集中存储、备份你的代码，还能和团队成员协作开发。
• ✨GitHub
  • 这个也是重量级，程序员不会这个，那属实是太难了。
  • 资源
    • GitHub官方网站
    • GitHub官方文档
• Gitee(国内的，和GitHub类似，更快)
  • 资源
    • Gitee官方网站
    • Gitee官方文档
• GitLab

✨Node.JS

• 描述：一个开源与跨平台的JavaScript运行时环境,非常流行！
• 资源
  • Node.js官方网站
  • Node.js中文网

✨包管理

• 描述：用于安装Node.js的扩展、工具等。

• ✨npm

• ✨yarn

• ✨pnpm

• ❌bower

• ✅npx

✨前端开发框架

• 描述：用于快速构建前端应用的开发框架，提供了组件化、路由、状态管理等功能，帮助开发者更高效地开发前端应用。

CSS框架

• ✅Bootstrap

• 资源

  • Bootstrap官方网站
  • Bootstrap中文网

• ✨Tailwind CSS

• 资源

  • Tailwind CSS官方网站
  • Tailwind CSS中文网

JavaScript框架

• ✨Vue（大厂，中小厂）

• 资源

  • Vue官方网站

  • Vue中文网

  • ✅Vue 2

  • ✨Vue 3

• ✨React（大厂）

• 资源

  • React官方网站
  • React中文网

• ❌Angular

• Svelte

• UmiJS

封装库

✨组件库

• ✨Element UI(Vue)

• 资源

  • Element UI官方网站
  • Element UI中文网

• ✨Ant Design (React)

• 资源

  • Ant Design官方网站
  • Ant Design中文网

• ✅LayUI

• ✅VantUI(Vue)

• MaterialUI

数据可视化

• ✨ECharts(大屏)

• Highcharts

• D3.js

• ✅ AntV

组件(插件)

• 富文本编辑器
• 弹窗
• ✨轮播图

工具库

• ✨Axios()
  • 这个非常重要
  • 资源
    • Axios官方网站
    • Axios中文网
• Lodash
• Moment.js
• Day.js
• 时间处理Moment.js

动效库

• ✅Animate.css
• Ant Motion

字体图标库

• ✨Iconfont
• IconPark
• ✅FontAwesome

脚手架

• 描述：用于快速生成新项目的目录模板，提升开发效率和开发舒适性
• Vue CLI
• 资源
  • Vue CLI官方网站
  • Vue CLI中文网
• ✨Vite（打包工具）
• 资源
  • Vite官方网站
  • Vite中文网

✨前端架构设计

• 描述：一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效可持续的工作流
• 模块化
• 组件化
• MVVM架构
• 设计原则
• ✨SPA单页面应用
• ✨多页应用
• ✨前端路由
• PWA
• 有损服务

✅服务端渲染

• 描述：在服务器端渲染HTML页面，将动态生成的内容发送给客户端，而不是在客户端使用JavaScript渲染。
• 资源
  • 服务端渲染官方网站
  • 服务端渲染中文网
  • 服务端渲染-知乎
  • Next.js(React)
  • Nuxt.js(Vue)
  • ❌Universal(Angular)

✨CSS预编译

• 描述：用新的扩展语言以增强CSS的能力，并通过预编译的方式将其转换为浏览器认识的CSS代码。
• ✨Sass
• 资源
  • Sass官方网站
  • Sass中文网
• Less
• Stylus

部署

✨Web服务器

✨Nginx

• 描述：一个高性能的HTTP服务器和反向代理服务器，常用于部署静态网站和动态应用。

• 资源

  • Nginx官方网站
  • Nginx中文网
  • 反向代理
  • 解决跨域问题
  • 改写请求头

Apache

容器

Docker

• 描述：容器是一个标准化软件单元，将代码及其所有依赖打包在一起，以便于在任何环境中运行。Docker容器镜像是一个轻量的独立的可执行包，包含运行应用程序所需的所有内容，包括代码、运行时、系统工具、系统库和设置。

• 资源

  • Docker官方网站

  • Docker中文网

  • Docker从入门到实践

Kubernetes

四、前端优化

• 描述：通过优化前端代码和资源，提升页面加载速度、用户体验和搜索引擎排名。

• 目标：实践前端优化方法，优化自己做过的项目

待更新

五、前端生态

• 描述：前端技的领域越来越广，有非常多前端工程师需要了解和关注的技术。
• 目标：用用学到的技术，做更多事情，如开发文档网站，小程序,APP等等。

待更新

六、前端求职

待更新

七、前端未来

• 描述：前端技术在不断发展，有很多新的技术和工具出现。前端工程师需要保持学习和跟进，以跟上技术的发展。
• 目标：关注前端技术的最新动态，学习新的技术和工具，提升自己的技能。

未来的路一定充满光明