前端学习路线！

这份学习路线并不完美，也不会有最终形态，正如前端不可预见、永无止境的未来。

特点

1. 一份全面的前端知识点大梳理和汇总

2. 分阶段学习，每个阶段给出学习目标

3. 使用符号对知识点的重要程度做了区分，按需学习

4. 知识点附有描述和资源链接

5. 提供大量优质学习资源

符号表

可根据知识点前的符号按需选学，并获取知识点描述和学习资源。

• ⭐️ 必学（追求速成）

• ✅ 建议学（重要知识）

• ❗ 面试重点

• ❌ 一般没必要学习

• 💬 描述

• 📚 资源

• 🎯 目标

大纲

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

2. 前端学习七阶段

3. 1. 前端入门

   2. 巩固基础

   3. 前端工程化

   4. 前端优化

   5. 前端生态

   6. 前端求职

   7. 前端未来

4. 我的前端学习路线

5. 尾声 - 持续学习

前言 - 学编程需要的特质

相信自己有能力，那么你就真的会有！

• 兴趣

• 坚持

• 付出

• 心态

一、前端入门

• 💬 描述：学习前端基础三件套，建议从实战开始，边学边练，培养兴趣，快速入门。

• 📚 资源

• • freeCodecamp 在线编程：https://learn.freecodecamp.one/

  • 阿里云前端实战学习：https://edu.aliyun.com/roadmap/frontend

  • W3Cschool 编程入门实战：https://www.w3cschool.cn/codecamp/

  • pink老师前端入门教程：https://www.bilibili.com/video/BV14J4114768

• 🎯 目标：了解和实践各语言的基础语法，并能使用开发工具来独立开发一个留言板网站。

⭐️ 开发工具

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

浏览器

• ⭐️ Chrome

• ✅ Edge

• ✅ Firefox

• ❌ Opera

• Safari

编辑器

• ⭐️ VSCode

• ✅ WebStorm

• Atom

• ⭐️ Sublime Text

• HBuilder X

• 记事本

• 在线 IDE

文档笔记

• ✅ Markdown 语法

• ✅ Typora

• 在线笔记

• • 语雀

  • 腾讯文档

  • 石墨文档

  • 印象笔记

• Mdnice

⭐️ HTML

• 💬 描述：用于定义一个网页结构的基本技术。

• 📚 资源：https://developer.mozilla.org/zh-CN/docs/Learn/HTML

• ⭐️ 基本语法

• ⭐️ 标签

• • 分区 div

  • 标题 h1 ~ h6

  • 段落 p

  • 图像 img

  • 列表 ul / ol

  • 超链接 a

  • 表单 form

  • 表格 table

  • 框架 iframe

• ⭐️ 属性

• ✅ HTML5 特性

• • localStorage

  • sessionStorage

  • ❌ Web SQL

  • 语义化标签

  • 浏览器支持

  • 多媒体标签

  • Canvas 画布

  • ❌ 内联 SVG

  • 本地存储

  • Web Workers

  • 应用缓存（Cache Manifest）

  • 无障碍

⭐️ CSS

• 💬 描述：层叠样式表，用于设计风格和布局。

• 📚 资源：https://developer.mozilla.org/zh-CN/docs/Learn/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

• 💬 描述：具有函数优先的轻量级，解释型或即时编译型的编程语言。

• 📚 资源：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

• ⭐️ 基本语法

• ⭐️ 数据类型

• • 对象 Object

  • 数组 Array

  • 函数 Function

  • 字符串 String

  • 数组 Number

  • 布尔 Boolean

  • 空值 Null

  • 未定义 Undefined

  • Symbol

  • 值类型

  • 引用类型

• ✅ 数据类型转换

• ✅ 函数

• • ⭐️ 全局调用

  • 构造函数调用

  • ⭐️ 函数方法调用

  • apply

  • call

  • ⭐️ 概念

  • ⭐️ 自定义函数

  • 调用方式

  • ✅❗ 闭包

• ✅ 对象

• • 数字 Number

  • 字符串 String 对象

  • 日期 Date 对象

  • 数组 Array

  • 布尔 Boolean

  • 算数 Math

  • 概念

  • this

  • 原型链和继承

  • 常用对象

  • 自定义对象

• ✅❗ 作用域（作用域链）

• ✅ BOM API

• ⭐️ DOM API

• ⭐️ JSON

• ⭐️ Ajax

• ✅ JavaScript 执行机制

✅ ES6+ 特性

• 💬 描述：新引入的 JavaScript 语法特性。

• 📚 资源：ES6 入门教程 https://es6.ruanyifeng.com/

• let 和 const

• 变量解构赋值

• 对象扩展和新增方法

• Symbol

• Set 和 Map 数据结构

• ⭐️❗ Promise & async / await 异步编程

• Generator 函数异步编程

二、巩固基础

• 💬 描述：学习前端、计算机、软件开发相关基础知识，并复习巩固上阶段学到的前端三件套。

• 📚 资源

• • 《JavaScript 高级程序设计》：https://www.code-nav.cn/rd/?rid=28ee4e3e606b1e1a0e3cfd8952d172cf

  • 《JavaScript 忍者秘籍》：https://www.code-nav.cn/rd/?rid=28ee4e3e606b16c00e3c5b18609e3dc2

• 🎯 目标：熟悉前端三件套语法，尤其是 JavaScript，并了解互联网、域名、浏览器、服务器等，扎实前端程序员的基本功，为下面进入实战开发做准备。

前端基础知识

• ✅ 互联网

• ⭐️ 域名

• ⭐️ DNS

• ⭐️ 服务器

• ✅ 浏览器

• • 浏览器 DOM 事件流 / 事件委托

  • ⭐️ 浏览器加载顺序

  • ⭐️ 浏览器渲染过程

  • 浏览器事件循环

  • 浏览器同源策略

  • ❗ 跨域解决方案

  • 浏览器缓存

  • 控制台调试技巧

• ✅ HTTP

• • 1xx 信息

  • 2xx 成功

  • 3xx 重定向

  • 4xx 客户端错误

  • 5xx 服务器错误

  • HTTP 1.0

  • ⭐️ HTTP 1.1

  • HTTP 2

  • HTTP 3

  • ❗ HTTP 请求过程

  • 常见 HTTP 协议

  • ⭐️ HTTP 请求类别

  • ⭐️ 常见状态码

  • WebSocket

  • ⭐️ Cookie

  • Session

  • ⭐️ HTTPS

计算机基础

✅ 算法和数据结构

• ⭐️ 时间 / 空间复杂度分析

• 数据结构

• • 数组

  • 字符串

  • 队列

  • 栈

  • 链表

  • 集合

  • 哈希表

  • 二叉树

• 算法

• • 排序

  • 双指针

  • 查找

  • 分治

  • 动态规划

  • 递归

  • 回溯

  • 贪心

  • 位运算

  • DFS

  • BFS

  • 图

✅ 计算机网络

• HTTP 协议

• 网络模型

• UDP / TCP 协议

✅ 操作系统

• 进程、线程

• 进程 / 线程间通讯方式

• 进程调度算法

• 进程 / 线程状态

• 死锁

• 内存管理

软件开发基础

✅ 设计模式

• 单例模式

• 代理模式

• 工厂模式

• 装饰者模式

• 观察者模式

• 策略模式

• 门面模式

⭐️ Git 版本控制

• 常用命令

✅ Linux 服务器

• 常用命令

✅ 正则表达式

三、前端工程化

• 💬 描述：前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高开发过程中的开发效率，减少不必要的重复工作时间。

• 📚 资源

• • 什么是前端工程化？https://www.zhihu.com/question/433854153/answer/1713597311

• 🎯 目标：至少学会一门主流的前端开发框架（Vue / React），并配合脚手架、组件库、工具等从 0 开始独立搭建并开发一个完整的前端网站，可以试着仿一些知名站点。要求遵循企业开发规范，将项目代码提交到代码仓库中，并独立发布上线，供他人访问。此外，建议抓住机会参与一些团队项目，感受团队开发模式和前端工程化的优势。

⭐️ 研发流程

1. 技术选型

2. 初始化

3. 开发

4. 本地测试

5. 代码提交

6. 编译、打包、构建

7. 部署

8. 集成测试

9. 发布上线

10. 监控运维

⭐️ 代码托管

• 💬 描述：集中存储、备份你的代码，还能和团队成员协作开发。

• ⭐️ GitHub

• Gitee

• GitLab

✅ Node.JS

• 💬 描述：一个开源与跨平台的 JavaScript 运行时环境。它是一个可用于几乎任何项目的流行工具！

• 📚 资源

• • Node.js 官方教程：http://nodejs.cn/learn

  • Node.js 入门：https://cnodejs.org/getstart

⭐️ 包管理

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

• ⭐️ npm

• ⭐️ yarn

• ❌ bower

• ✅ npx

开发框架

• Express

• Koa

• Egg

开发框架

• 💬 描述：解决特定的问题,提高开发效率、简化我们的代码复杂度。

⭐️ CSS 框架

• ✅ BootStrap

• ⭐️ Tailwind CSS

⭐️ JavaScript 框架

⭐️ Vue

• Vue Router

• Vuex

⭐️ React

• React DOM

• React Router

• Redux

• MobX

• React Hooks

❌ Angular

• RxJS

• NgRx

✅ Svelte

✅ UmiJS

封装库

⭐️ 组件库

• ✅ LayUI

• ⭐️ ElementUI（Vue）

• ✅ VantUI（Vue）

• ⭐️ Ant Design（React）

• Material UI

数据可视化

• ✅ AntV

• Apache ECharts

• HighCharts

• D3.js

组件（插件）

• 富文本编辑器

• 弹窗

• 轮播图

工具库

• ✅ jQuery

• ✅ Lodash

• ✅ Axios

• 时间处理 Moment.js

动效库

• ✅ Animate.css

• Ant Motion

字体图标库

• ⭐️ IconFont

• IconPark

• Font Awesome

⭐️ 脚手架

• 💬 描述：快速生成新项目的目录模板，提升开发效率和开发舒适性。

• 📚 资源：https://www.jianshu.com/p/25ce8cf2e6a7

• Vue CLI

• create-react-app

• ✅ Yeoman

⭐️ 前端架构设计

• 💬 描述：一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效可持续的工作流。

• 模块化

• 组件化

• ✅ MVVM

• 设计原则

• ⭐️ SPA 单页应用

• ⭐️ 多页应用

• ✅ 前端路由

• PWA

• 有损服务

✅ 服务端渲染

• 💬 描述：在服务端渲染 HTML 页面的模式。

• 📚 资源：https://www.zhihu.com/question/379563505

• Next.js（React）

• Nuxt.js（Vue）

• ❌ Universal（Angular）

BFF

• 💬 描述：Backend For Frontend（服务于前端的后端），就是服务器设计 API 时会考虑前端的使用，并在服务端直接进行业务逻辑的处理。

• 📚 资源：https://www.jianshu.com/p/eb1875c62ad3

• GraphQL

✅ 微前端

• 💬 描述：将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，从而解决庞大的一整块后端服务带来的变更与扩展方面的限制。

• 📚 资源：https://zhuanlan.zhihu.com/p/96464401

• qiankun

• single-spa

CSS in JS

• 💬 描述：用 JavaScript 来写 CSS。

• 📚 资源：http://www.ruanyifeng.com/blog/2017/04/css_in_js.html

• 内联样式

• 声明样式

• 引入样式

⭐️ CSS 模块化

• ⭐️ CSS Modules

• ✅ styled-components

• ✅ Styled JSX

• Emotion

✅ 开发调试

• 💬 描述：本地开发时热更新，提升开发效率。

• webpack-dev-server

• serve

内网穿透

• 💬 描述：将内网外网通过 nat 隧道打通，让内网的网站、数据让外网可以访问。

• Ngrok

• NATAPP

⭐️ CSS 预编译

• 💬 描述：使用新的扩展语言以增强 CSS 的能力，并通过预编译的方式将其转换为浏览器认识的 CSS 代码。

• ⭐️ SASS

• ✅ PostCSS

• Stylus

• ❌ LESS

测试

测试分类

• ⭐️ UT 单元测试

• SIT 系统集成测试

• E2E 端到端测试

• UAT 用户验收测试

✅ Mock

• 💬 描述：通过随机数据，模拟各种场景，增加单元测试的真实性。

• Mock.js

✅ 测试框架

• ✅ Jest

• Enzyme

• ✅ Puppeteer（Headless Browser）

• Mocha

• Jasmine

✅ 代码质量

开发规范

• 💬 描述：依照规范写出的代码会更加合理。

• 📚 资源：Airbnb 代码规范 https://github.com/BingKui/javascript-zh

• CSS Style Guide

• JavaScript Style Guide

类型校验

• TypeScript

代码检查

• ESLint

• StyleLint

代码风格

• 💬 描述：根据配置自动格式化代码，统一格式。

• Prettier

提交规范

• 约定式提交

提交检查

• 💬 描述：在提交代码时触发一些操作，比如检查代码的风格等。

• pre-commit

• husky

构建工具

自动化构建

• 💬 描述：按照配置好的流程自动打包构建项目，提高团队的开发效率，降低项目的维护难度。

• Gulp

• ✅ npm script

• Grunt

打包工具

• 💬 描述：将各种零散的📚 资源文件打包为可在浏览器等环境运行的代码。

• ⭐️ Webpack

• ✅ Rollup

• ✅ Vite

• Parcel

• Snowpack

CI / CD

• 💬 描述：通过在应用开发阶段引入自动化来频繁向客户交付应用。

• GitLab CI

• ✅ Jenkins

部署

⭐️ Web 服务器

⭐️ Nginx

• 💬 描述：高性能的 HTTP 和反向代理 web 服务器。

• 📚 资源：腾讯云动手实验室 https://cloud.tencent.com/developer/labs/gallery

• 反向代理

• 解决跨域

• 改写请求

✅ Apache

容器

✅ Docker

• 💬 描述：容器是一个标准化的软件单元，它将代码及其所有依赖关系打包，以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切：代码，运行时间，系统工具，系统库和设置。

• 📚 资源：Docker 从入门到实践 https://vuepress.mirror.docker-practice.com/

• Dockerfile

Kubernetes

部署策略

• 全量发布

• 蓝绿部署

• 滚动发布

• 灰度发布

监控告警

• 前端埋点

• 错误监控

• 性能监控

• 行为监控

四、前端优化

• 💬 描述：通过分析和优化手段，提高网站的性能和用户体验。

• 🎯 目标：实践前端优化方法，从多个方面优化自己做过的项目，最好能将优化后的网站与原网站进行对比，得到一些数据和体验上的明显提升。

✅ 性能优化

性能指标

• 💬 描述：用于衡量一个 Web 页面的性能。

• 📚 资源：https://juejin.cn/post/6844904153869713416

• FP（First Paint）

• • 💬 描述：从开始加载到浏览器首次绘制像素到屏幕上的时间，也就是页面在屏幕上首次发生视觉变化的时间。

• FCP（First Contentful Paint）

• • 💬 描述：浏览器首次绘制来自 DOM 的内容的时间。

• FMP（First Meaningful Paint）

• • 💬 描述：页面的主要内容绘制到屏幕上的时间。

• FSP（First Screen Paint）

• • 💬 描述：页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容。

• TTI（Time to Interactive）

• • 💬 描述：表示网页第一次完全达到可交互状态的时间点，浏览器已经可以持续性的响应用户的输入。

优化手段

• 性能监控

• • Performance API

• 样式优化

• JavaScript 优化

• • 防抖

  • 节流

• 代码分割

• 📚 资源压缩

• 打包优化

• 服务器优化

• 缓存优化

• • Service Worker

• 动画性能

• dns-prefetch

• Lazy loading

• 优化启动性能

• • 异步化

• 渲染优化

• 网络优化

• 移动端性能优化

• ✅ CDN

• • 💬 描述：内容分发网络，是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

  • 📚 资源：BootCDN https://www.bootcdn.cn/

用户体验

• 设计系统

• 骨架屏

✅ 兼容性

浏览器兼容性

• normalize.css

• html5shiv.js

• respond.js

• Babel

• Polyfill

屏幕分辨率兼容性

跨平台兼容性

SEO

• 💬 描述：搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

• 📚 资源：百度搜索📚 资源平台 https://ziyuan.baidu.com/cooperateresource/index

• robots.txt

• description

• keywords

• SiteMap

• HTML 标签优化

• 站内链接建设

• 友情链接

✅ 安全

• ⭐️ XSS

• CSRF

• 反爬虫

• SQL 注入

• DDoS

五、前端生态

• 💬 描述：如今，前端领域的范围越来越广，出现了更多前端工程师需要了解和关注的技术。

• 🎯 目标：能用学到的前端技术去做更多的事情，比如开发个人博客、文档网站、小程序、APP 等。

⭐️ 静态站点构建

开发

• React Static

博客

• ✅ Gatsby.js

• ✅ Docusaurus

• Hugo

• Hexo

文档

• JekyII

• ⭐️ Docsify

• VuePress

• ✅ Dumi

✅ 大前端

💬 描述：前端技术的融合更加紧密，应用的领域也更加广泛，前端领域的内容呈现多样化，除了网站外，还可以用前端技术跨平台开发 Android、iOS、小程序、虚拟现实、增强现实等。

移动应用

• Hybrid

• WebView

• React Native

• Flutter

移动应用打包

• Weex

• Cordova

• Phonegap

• Ionic

桌面应用

• Electron

• NW.js

• Proton Native

小程序

• 原生

• WebView

跨端开发框架

• ✅ uni-app

• ✅ Taro

• Flutter

• Chameleon

• Wepy

• Rax

移动端调试

• Chrome Dev Tools

• Android Simulator

• IOS Simulator

✅ Serverless

• 💬 描述：一种构建和管理基于微服务架构的完整流程，允许你在服务部署级别而不是服务器部署级别来管理你的应用部署，你甚至可以管理某个具体功能或端口的部署，这就能让开发者快速迭代，更快速地开发软件。

✅ 云开发

• 💬 描述：云端一体化的后端云服务 ，采用 Serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力降低了应用开发的门槛。使用云开发可以构建完整的小程序/小游戏、H5、Web、移动 App 等应用。

• ✅ 腾讯云云开发

• 阿里云云开发

低代码

• 💬 描述：无需编码（零代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。

• 腾讯云低码

• 阿里宜搭

六、前端求职

• 💬 描述：求职是一个漫长的过程，建议拉长战线，尽早准备。

• 🎯 目标：找到理想的工作。

流程

• 2020 秋招面经汇总：https://www.nowcoder.com/discuss/205497

简历

• 超级简历

面试题库

• 牛客前端工程师面试宝典：https://www.nowcoder.com/tutorial/96/f5212664ab664984882b00635066ded2

• 前端面试每日 3+1：https://github.com/haizlin/fe-interview

• React 面试题目 & 题解：https://github.com/sudheerj/reactjs-interview-questions

面经

• 前端面经汇总：https://www.nowcoder.com/discuss/experience?tagId=644

面试实战

• AI 模拟面试：https://www.nowcoder.com/interview/ai/cover?jobTagId=644

七、前端未来

• 💬 描述：前端未来可能的发展趋势和热门技术。

• 🎯 目标：关注前沿，持续进步。

• WebAssembly

• 智能 UI

• React Server Component

• CSS Houdini

WebComponents

• HTML templates（HTML模板）

• Custom elements（自定义元素）

• Shadow DOM（影子DOM）

我的前端学习路线

虽然上面整理的学习路线知识点非常多，但是大家也别太担心，其实按照一定顺序和方法来学习，并不会很难，聊聊我的学习经历。

1. 快速入门，培养兴趣

刚开始学习前端时，一定要以培养兴趣、快速入门为🎯 目标。我入门前端时，由于没有基础、啥都不懂，因此选择在线实战教程网站来学习，跟着教程案例一行行把代码敲下来，实时浏览显示效果，很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时，我对看过的知识点没有什么印象，基本是看了就忘，当我想要自己写一个网站，也根本无从下手。

于是，我开始试着死记硬背代码，结果发现背了之后还是不会写。那干脆一不做二不休，直接打开编辑器和教程网站，把之前在线实战时敲过的代码复制粘贴到编辑器中，然后再修改保存，到浏览器中打开文件。这样虽然要在编辑器和浏览器中来回切换，但起码能看到自己的网页文件运行的效果了。后来，我利用浏览器开发者工具提升了自己开发网站的调试效率，敲出的代码达不到满意的效果时，就再去查，再改，再浏览，最后终于完成了一个留言板网站！

通过这件事，我明白了一个道理，既然记不住知识，那就先别强行记忆，上手多写，忘了就去查不就好了？不要担心自己知识不够做不出来，只要你去试，都一定能实现。

2. 多看多写，巩固基础

在这种操作下，我虽然能使用基础三件套开发简易网站了，但做的很慢，还老出问题。于是，我开始完整地看了几本前端入门和项目实战书籍，有三件套入门的，也有响应式网站设计的，还有 JavaScript 综合讲解的，以及一套完整的视频教程，通过这些来复习巩固之前学过的知识，打好了基础，并且了解了更多实战教程上没见到的知识。

看书和视频的过程中，我跟着做了几个简易的网站，也是边看边做。在这之后，我发现自己渐渐地能够脱离文档来写网站了！

3. 框架学习，学以致用

但是，总感觉开发网站时，什么都要自己写，重复的代码写一大堆，很麻烦。于是，我试着上网搜了解决这些问题的方法，发现可以用组件库减少重复编写 HTML 和 CSS 代码，于是学了 LayUI，其实和之前一样的，就是打开官网找到要用的组件，然后复制到项目中修改就行了，写的多了竟然还真记住了一些（虽然这个没必要记）。

界面和样式代码简化了，但是 JavaScript 写的我依旧头疼。于是我决定进入下一个阶段的学习，当时先看了本书叫《锋利的 jQuery》来学习 jQuery，学会之后使用它趁热打铁做了几个网站，发现的确能大大简化繁琐的 JavaScript DOM 操作，让我尝到了甜头，又有了继续学习前端的动力。

在那之后大概半年，我开始学习主流前端框架 Vue，也是跟着视频教程学，并且结合 ElementUI 组件库开发了一个响应式网站。不得不说，习惯了用原生 JavaScript 和 jQuery 开发后，再去用 Vue 开发，真的是爽飞了，小有成就感。

4. 根据需要，自主学习

在那之后，我就是通过不断地做项目来积累经验，既然编程知识太多学不完，那我就随需随学，逐渐拓宽自己的知识面。举个例子，我要做一个移动端 H5 页面，那就去搜 Vue 的移动端组件库，学会了 MintUI、VantUI 等；项目中要处理日期，那我就去搜日期处理库，学会了 Moment.js；项目重复文件和代码太多，我就去网上搜一些组件化、模块化的最佳实践；项目代码太大、加载太慢，我就去网上搜一些前端压缩、性能优化的方式；要把开发好的项目变成 APP，那我就去网上搜到了 Cordova 等打包工具；跟其他同学一起做项目时比较混乱、开发效率低，我就去搜了一些代码规范、前端工程化等；遇到 Bug 时，也是自己去网上搜索解决方案，并且还要看看有没有知识点是我遗漏的，我会再去弥补学习。通过不断实践、不断遇到问题和自主解决问题，我始终保持着学习的积极性，学到了越来越多前端的知识，并通过归纳总结来加深印象。

5. 渐入佳境，拓宽视野

在那之后，我学前端技术非常快了，像 React、TypeScript、Redux、Dva、Umi、Lerna 等等都随用随学，随学随用。此外，我不仅仅关注前端网页开发本身，还同时关注前端的生态和发展，学习了微前端、Serverless、云开发、低代码等技术，因此个人的能力提升也很大。如今在鹅厂工作中也是，面对各种不同技术栈的前端项目，我都能迎难而上，毕竟不会就学嘛！

6. 总结

总结一下，学前端的路线其实就一句话：基础三件套 => 巩固基础 => 学习框架 => 多做项目 => 按需学习 => 拓宽视野。还有一个学任何编程技术都要注意的点，全程多敲代码！多敲代码！多敲代码！

尾声 - 持续学习

优秀前端人的特质

• 深厚的功底

• 良好的编码习惯

• 发现问题的洞察力

• 思维灵活，善于思考

• 追求技术，紧跟前沿

• 有创造力，有行动力

• 追求用户体验

• 时刻保持好奇

• 全栈意识

• 解决问题的能力强

• 懂得合作和高效沟通

• 重视工作，同样重视生活

• 责任心和全局观

• 个人的进步能带动团队的进步

学习📚 资源

• 编程导航（包含以下所有📚 资源，强烈推荐 👍）：https://www.code-nav.cn

• freeCodecamp 在线编程：https://learn.freecodecamp.one/

• 阿里云前端实战学习：https://edu.aliyun.com/roadmap/frontend

• W3Cschool 编程入门实战：https://www.w3cschool.cn/codecamp/

• 腾讯云动手实验室：https://cloud.tencent.com/developer/labs/gallery

• pink老师前端入门教程：https://www.bilibili.com/video/BV14J4114768

• MDN 前端文档：https://developer.mozilla.org/zh-CN

• Node.js 入门：https://cnodejs.org/getstart

• 前端清单：https://cheatsheets.devtool.tech/

• 前端小课：https://lefex.github.io/

• 被删的前端游乐场：http://www.godbasin.com/

• 《ES6 入门教程》：https://es6.ruanyifeng.com/

• 谷歌 Web 开发者：https://developers.google.com/web

• JavaScript 明星项目：https://risingstars.js.org/2020/zh

• Best of JS：https://bestofjs.org/

• Codewars：https://www.codewars.com/?language=javascript

• Vue.js examples：https://vuejsexamples.com/

前端资讯

• 掘金资讯：https://juejin.cn/news

• InfoQ：https://www.infoq.cn/topic/Front-end

• daily.dev：https://daily.dev/

技术博客

• 掘金：https://juejin.cn/frontend

• 腾讯前端 IMWEB：http://imweb.io

• 腾讯 Web 前端团队 Alloy Team：http://www.alloyteam.com

• 淘宝前端团队：http://taobaofed.org

• 百度 Web 前端研发部：http://fex.baidu.com

• 京东凹凸实验室：https://aotu.io

• 360 奇舞团：https://75team.com

• 七牛团队技术博客：http://blog.qiniu.com

• 有赞技术团队：https://tech.youzan.com/tag/front-end/

• 百度 EFE Tech：https://efe.baidu.com/

• css-tricks：https://css-tricks.com/archives

• web.dev：https://web.dev/blog/

学习要点

• 前期学习以培养兴趣为主，不要过于追求深层理解。

• 前端学习不能靠死记硬背，要多敲代码、多做项目实践。

• 不要急于求成，踏实积累才是硬道理。

  文档下载地址 

  点击下载md文档

适合我的前端学习路线（学习前端不迷路）

---

小伙伴们想学习前端，但是却不知如何入手，上网查前端学习路线，第一页往往充斥着各种培训公司的广告，又或者是搜前端学习路线图时，出现大量的路线图导致你还是不能确定适合自己的路线。

 

所以在这里我向大家分享一下我走的前端道路。

---

一：大体上学习前端的两种选择

---

意思就是你是选择自学还是报社会上的培训班学。为什么要先提这一点呢，因为在我看来这也是学习前端的关键一步。那我给出我的一些看法建议。

1：如果你现在是大一，大二，时间充裕，并且对学习前端有坚定的信念，这里我建议自学，如果你所在的专业开设的有前端课程，你要多与课程老师交流，如果你前端学的差不多了，让课程老师注意到你了，那么以后他可能会带你做项目，甚至把他的一些就业资源推给你。

2：如果你现在是大三，甚至是大三下学期，你要走前端这条路。那肯定最开始是自学。跟着b站上的视频一步一步的来，这时候你要利用好最后的一个寒假和暑假（因为大四上学期就要秋招了）。如果到大四秋招了，你去面试，如果找到工作了，那万事大吉。如果没找到工作，你可以继续学习到大四上学期的一次招聘，但是在我看来你也可以选择报培训班。这就看你的选择了，因为一般培训班的收费在一两万左右。（我目前是大三，正在自学，不知道能不能赶上今年秋招）.

3：如果你是大四才开始学习前端，又或者在大四秋招找到的工作不满意，这个时候就可以选择报培训班。一般培训班的收费在一两万左右，在培训班里，因为它对你的就业有一些保证，所以在学习的过程中可能会很严格，你如果认真学习，肯定是能够学会的。并且听说有些培训班如果你最后没找到工作，它会退你一些学费，而且它应该会有内推的名额，但肯定是优异者优先，而且会给你包装简历等等。（我这样说，肯定有些小伙伴会心动，但我可不是打广告的呀，毕竟你也是拿钱换来的资源）。

---

二：我的前端学习路线（只代表我个人）

---

 

这张图想必不少人都见过，凭借一图之力劝退的多少前端初学者，哈哈。其实没那么夸张，实际上到第三个阶段就差不多能找工作了，但前提是你要对其特别精通，最好自己开发的有项目。

我是在b站学习的尚硅谷的学习视频，它还整理的有学习路线图：2021年度全网最全Web前端学习路线 - 哔哩哔哩专栏 (bilibili.com)。我不知道其他品牌的教育视频，但在我看来，尚硅谷的学习视频也确实良心。（哈哈，这也不是打广告，大家自行选择。有一个方法，那就是在b站搜索相关知识点，直接跟着播放量高的视频学习）。

那我也分阶段讲述我的前端学习之路。

---

阶段一：打好基础

---

html-->css-->js-->js高级-->less-->jQuery-->BootStrap-->AJAX

---

HTML:超文本标记语言（网页结构）。学习视频：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

css：层叠样式表（添加样式）。学习视频：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

js：让网页相应某种行为（让网页动起来）。学习视频：尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

js高级：详细讲述，以后用到，面试必面。学习视频：尚硅谷JavaScript高级教程(javascript实战进阶)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

Less: 是一门 CSS 预处理语言.学习视频：尚硅谷前端less教程_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

jQuery:是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。学习视频：尚硅谷jQuery教程(jquery从入门到精通)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

BootStrap：提供了优雅的HTML和CSS规范。学习视频：【极客学院】一周学会Bootstrap_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

AJAX:前后端交互。学习视频：尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax最新版）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

阶段二：学习框架前的铺垫

---

ES6-->Node.js-->MongoDB-->Webpack-->Git-->TypeScript-->promise-->axios

小伙伴们不要觉得内容多，实际上每个知识点的内容都不多，平均每个知识点会花费两三天的时间，最多的不会超过一周。

---

ES6：一些新语法。学习视频：尚硅谷Web前端ES6教程，涵盖ES6-ES11_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili。

---

Node.js:对一些特殊用例进行优化，提供替代的API。学习视频：【尚硅谷】最经典Node.JS全套完整版教程(快速入门nodejs)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili。

---

MongoDB:非连接式数据库。学习视频：尚硅谷MongoDB基础教程(数据库精讲)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili。

---

Webpack：学习框架必不可少的。学习视频：尚硅谷最新版Webpack5实战教程(从入门到精通)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

Git：是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。学习视频：尚硅谷Git教程全套完整版（12h深入掌握git）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

TypeScript：学习过java的人对这应该很熟悉。学习视频：尚硅谷2021版TypeScript教程（李立超老师TS新课）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

promise：学习框架必不可少的一部分。学习视频：尚硅谷Web前端Promise教程从入门到精通（2021抢先版）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

axios：学习框架必不可少的一部分。学习视频：尚硅谷2021最新版axios入门与源码解析_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili（这个视频有几集会有问题，建议自己找视频学习）

---

阶段三：重头戏（框架）

---

React-->Vue-->Vue3-->微信小程序

---

React：一线城市多用框架。学习视频：尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

Vue：热门框架。学习视频：尚硅谷Vue核心技术实战教程全套完整版(vue.js初学者快速入门到精通)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

Vue3：新特性。热门框架。学习视频：尚硅谷2021最新Vue.JS教程快速入门到项目实战（Vue3/VueJS技术详解）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

阶段四：实战。

---

实战就是多做项目了，先是跟着网上的一些项目做，多练习。最后团队完成一个有意义的项目。

---

React实战：尚硅谷React项目教程(react实战全栈谷粒后台)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

vue实战：尚硅谷Vue实战教程(企业级vue项目，Vue项目硅谷外卖)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

---

阶段四：面试题

---

这里就让小伙伴们失望了。我也将要面临找工作了，但是在面试题上没什么资源，这里就仰仗万能的小伙伴了。求分享（哈哈）

---

三：相关技术的官网

---

html，css：HTML 系列教程 (w3school.com.cn)

js：JavaScript 教程 | 菜鸟教程 (runoob.com)

less：Less 中文网 (lesscss.cn)

jQuery：Download jQuery | jQuery

BootStrap：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)

ES6：ES6 入门教程 - ECMAScript 6入门 (ruanyifeng.com)

Node.js：Node.js (nodejs.org)

MongoDB：MongoDB中文网

Webpack：webpack (docschina.org)

Git：直接搜github

TypeScript：TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)

promise：JavaScript Promise 对象 | 菜鸟教程 (runoob.com)

axios：axios中文网|axios API 中文文档 | axios (axios-js.com)

React：React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (docschina.org)

Vue：Vue.js 教程 | 菜鸟教程 (runoob.com)

 

还有许多比较实用的网站比如：阿里的矢量图库，bootCDN等。

---

四：好书推荐

---

js红皮书和犀牛书。（如果你不懂什么意思，直接上淘宝搜就能找到，我还没买不知道全名叫什么，哈哈）。

---

五：结尾

---

希望大家多交流学习经验。目前我还没学完，做这个分享也花费不少时间，小伙伴们也不要吝啬一键三连哟。

如果有小伙伴想要一些资料的相关笔记代码，也可以评论私聊我。

这份学习路线并不完美，也不会有最终形态，正如前端不可预见、永无止境的未来。

大家好，我是鱼皮，肝了几天终于完成了这份保姆级前端学习路线。

💂 + 💻 = 👴🏽

先放一张图：

是不是有点儿长，感觉要被劝退了？不过不用担心，为了帮助大家更轻松地了解前端知识体系，我对这份路线撒了点 糖 ~

建议大家观看 B 站视频讲解，会清晰很多~

地址：https://www.bilibili.com/video/BV1nh411e7oG/

在我的公众号【程序员鱼皮】后台回复 “前端路线” 领取路线图 + 在线网站

以下是文档版：

路线特点

1. 一份全面的前端知识点大梳理和汇总
2. 分阶段学习，每个阶段给出学习目标
3. 使用符号对知识点的重要程度做了区分，按需学习
4. 知识点附有描述和资源链接
5. 提供一份清晰的个人顺序学习路线方法
6. 提供大量优质学习资源

符号表

可根据知识点前的符号按需选学，并获取知识点描述和学习资源。

• ⭐️ 必学（追求速成）

• ✅ 建议学（重要知识）

• ❗ 面试重点

• ❌ 一般没必要学习

• 💬 描述

• 📚 资源

• 🎯 目标

大纲

1. 前言 - 学编程需要的特质
2. 前端学习七阶段
   1. 前端入门
   2. 巩固基础
   3. 前端工程化
   4. 前端优化
   5. 前端生态
   6. 前端求职
   7. 前端未来
3. 我的前端学习路线
4. 尾声 - 持续学习

前言 - 学编程需要的特质

相信自己有能力，那么你就真的会有！

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

一、前端入门

• 💬 描述：学习前端基础三件套，建议从实战开始，边学边练，培养兴趣，快速入门。

• 📚 资源

  • freeCodecamp 在线编程：https://learn.freecodecamp.one/
  • 阿里云前端实战学习：https://edu.aliyun.com/roadmap/frontend
  • W3Cschool 编程入门实战：https://www.w3cschool.cn/codecamp/
  • pink老师前端入门教程：https://www.bilibili.com/video/BV14J4114768

• 🎯 目标：了解和实践各语言的基础语法，并能使用开发工具来独立开发一个留言板网站。

⭐️ 开发工具

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

浏览器

• ⭐️ Chrome
• ✅ Edge
• ✅ Firefox
• ❌ Opera
• Safari

编辑器

• ⭐️ VSCode
• ✅ WebStorm
• Atom
• ⭐️ Sublime Text
• HBuilder X
• 记事本
• 在线 IDE

文档笔记

• ✅ Markdown 语法
• ✅ Typora
• 在线笔记
  • 语雀
  • 腾讯文档
  • 石墨文档
  • 印象笔记
• Mdnice

⭐️ HTML

• 💬 描述：用于定义一个网页结构的基本技术。

• 📚 资源：https://developer.mozilla.org/zh-CN/docs/Learn/HTML

• ⭐️ 基本语法

• ⭐️ 标签

  • 分区 div
  • 标题 h1 ~ h6
  • 段落 p
  • 图像 img
  • 列表 ul / ol
  • 超链接 a
  • 表单 form
  • 表格 table
  • 框架 iframe

• ⭐️ 属性

• ✅ HTML5 特性

  • 语义化标签
  • 浏览器支持
  • 多媒体标签
  • Canvas 画布
  • ❌ 内联 SVG
  • 本地存储
    • localStorage
    • sessionStorage
    • ❌ Web SQL
  • Web Workers
  • 应用缓存（Cache Manifest）
  • 无障碍

⭐️ CSS

• 💬 描述：层叠样式表，用于设计风格和布局。

• 📚 资源：https://developer.mozilla.org/zh-CN/docs/Learn/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

• 💬 描述：具有函数优先的轻量级，解释型或即时编译型的编程语言。

• 📚 资源：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

• ⭐️ 基本语法

• ⭐️ 数据类型

  • 值类型
    • 字符串 String
    • 数组 Number
    • 布尔 Boolean
    • 空值 Null
    • 未定义 Undefined
    • Symbol
  • 引用类型
    • 对象 Object
    • 数组 Array
    • 函数 Function

• ✅ 数据类型转换

• ✅ 函数

  • ⭐️ 概念
  • ⭐️ 自定义函数
  • 调用方式
    • ⭐️ 全局调用
    • 构造函数调用
    • ⭐️ 函数方法调用
    • apply
    • call
  • ✅❗ 闭包

• ✅ 对象

  • 概念
  • this
  • 原型链和继承
  • 常用对象
    • 数字 Number
    • 字符串 String 对象
    • 日期 Date 对象
    • 数组 Array
    • 布尔 Boolean
    • 算数 Math
  • 自定义对象

• ✅❗ 作用域（作用域链）

• ✅ BOM API

• ⭐️ DOM API

• ⭐️ JSON

• ⭐️ Ajax

• ✅ JavaScript 执行机制

✅ ES6+ 特性

• 💬 描述：新引入的 JavaScript 语法特性。

• 📚 资源：ES6 入门教程 https://es6.ruanyifeng.com/

• let 和 const

• 变量解构赋值

• 对象扩展和新增方法

• Symbol

• Set 和 Map 数据结构

• ⭐️❗ Promise & async / await 异步编程

• Generator 函数异步编程

二、巩固基础

• 💬 描述：学习前端、计算机、软件开发相关基础知识，并复习巩固上阶段学到的前端三件套。

• 📚 资源

  • 《JavaScript 高级程序设计》：https://www.code-nav.cn/rd/?rid=28ee4e3e606b1e1a0e3cfd8952d172cf
  • 《JavaScript 忍者秘籍》：https://www.code-nav.cn/rd/?rid=28ee4e3e606b16c00e3c5b18609e3dc2

• 🎯 目标：熟悉前端三件套语法，尤其是 JavaScript，并了解互联网、域名、浏览器、服务器等，扎实前端程序员的基本功，为下面进入实战开发做准备。

前端基础知识

• ✅ 互联网

• ⭐️ 域名

• ⭐️ DNS

• ⭐️ 服务器

• ✅ 浏览器

  • 浏览器 DOM 事件流 / 事件委托
  • ⭐️ 浏览器加载顺序
  • ⭐️ 浏览器渲染过程
  • 浏览器事件循环
  • 浏览器同源策略
  • ❗ 跨域解决方案
  • 浏览器缓存
  • 控制台调试技巧

• ✅ HTTP

  • ❗ HTTP 请求过程
  • 常见 HTTP 协议
    • HTTP 1.0
    • ⭐️ HTTP 1.1
    • HTTP 2
    • HTTP 3
  • ⭐️ HTTP 请求类别
  • ⭐️ 常见状态码
    • 1xx 信息
    • 2xx 成功
    • 3xx 重定向
    • 4xx 客户端错误
    • 5xx 服务器错误
  • WebSocket
  • ⭐️ Cookie
  • Session
  • ⭐️ HTTPS

计算机基础

✅ 算法和数据结构

• ⭐️ 时间 / 空间复杂度分析

• 数据结构

  • 数组
  • 字符串
  • 队列
  • 栈
  • 链表
  • 集合
  • 哈希表
  • 二叉树

• 算法

  • 排序
  • 双指针
  • 查找
  • 分治
  • 动态规划
  • 递归
  • 回溯
  • 贪心
  • 位运算
  • DFS
  • BFS
  • 图

✅ 计算机网络

• HTTP 协议
• 网络模型
• UDP / TCP 协议

✅ 操作系统

• 进程、线程
• 进程 / 线程间通讯方式
• 进程调度算法
• 进程 / 线程状态
• 死锁
• 内存管理

软件开发基础

✅ 设计模式

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

⭐️ Git 版本控制

• 常用命令

✅ Linux 服务器

• 常用命令

✅ 正则表达式

三、前端工程化

• 💬 描述：前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高开发过程中的开发效率，减少不必要的重复工作时间。

• 📚 资源

  • 什么是前端工程化？https://www.zhihu.com/question/433854153/answer/1713597311

• 🎯 目标：至少学会一门主流的前端开发框架（Vue / React），并配合脚手架、组件库、工具等从 0 开始独立搭建并开发一个完整的前端网站，可以试着仿一些知名站点。要求遵循企业开发规范，将项目代码提交到代码仓库中，并独立发布上线，供他人访问。此外，建议抓住机会参与一些团队项目，感受团队开发模式和前端工程化的优势。

⭐️ 研发流程

1. 技术选型
2. 初始化
3. 开发
4. 本地测试
5. 代码提交
6. 编译、打包、构建
7. 部署
8. 集成测试
9. 发布上线
10. 监控运维

⭐️ 代码托管

• 💬 描述：集中存储、备份你的代码，还能和团队成员协作开发。

• ⭐️ GitHub

• Gitee

• GitLab

✅ Node.JS

• 💬 描述：一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！
• 📚 资源
  • Node.js 官方教程：http://nodejs.cn/learn
  • Node.js 入门：https://cnodejs.org/getstart

⭐️ 包管理

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

• ⭐️ npm

• ⭐️ yarn

• ❌ bower

• ✅ npx

开发框架

• Express
• Koa
• Egg

开发框架

• 💬 描述：解决特定的问题,提高开发效率、简化我们的代码复杂度。

⭐️ CSS 框架

• ✅ BootStrap
• ⭐️ Tailwind CSS

⭐️ JavaScript 框架

⭐️ Vue

• Vue Router
• Vuex

⭐️ React

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

❌ Angular

• RxJS
• NgRx

✅ Svelte

✅ UmiJS

封装库

⭐️ 组件库

• ✅ LayUI
• ⭐️ ElementUI（Vue）
• ✅ VantUI（Vue）
• ⭐️ Ant Design（React）
• Material UI

数据可视化

• ✅ AntV
• Apache ECharts
• HighCharts
• D3.js

组件（插件）

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

工具库

• ✅ jQuery
• ✅ Lodash
• ✅ Axios
• 时间处理 Moment.js

动效库

• ✅ Animate.css
• Ant Motion

字体图标库

• ⭐️ IconFont
• IconPark
• Font Awesome

⭐️ 脚手架

• 💬 描述：快速生成新项目的目录模板，提升开发效率和开发舒适性。

• 📚 资源：https://www.jianshu.com/p/25ce8cf2e6a7

• Vue CLI

• create-react-app

• ✅ Yeoman

⭐️ 前端架构设计

• 💬 描述：一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效可持续的工作流。

• 模块化

• 组件化

• ✅ MVVM

• 设计原则

• ⭐️ SPA 单页应用

• ⭐️ 多页应用

• ✅ 前端路由

• PWA

• 有损服务

✅ 服务端渲染

• 💬 描述：在服务端渲染 HTML 页面的模式。

• 📚 资源：https://www.zhihu.com/question/379563505

• Next.js（React）

• Nuxt.js（Vue）

• ❌ Universal（Angular）

BFF

• 💬 描述：Backend For Frontend（服务于前端的后端），就是服务器设计 API 时会考虑前端的使用，并在服务端直接进行业务逻辑的处理。

• 📚 资源：https://www.jianshu.com/p/eb1875c62ad3

• GraphQL

✅ 微前端

• 💬 描述：将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，从而解决庞大的一整块后端服务带来的变更与扩展方面的限制。

• 📚 资源：https://zhuanlan.zhihu.com/p/96464401

• qiankun

• single-spa

CSS in JS

• 💬 描述：用 JavaScript 来写 CSS。

• 📚 资源：http://www.ruanyifeng.com/blog/2017/04/css_in_js.html

• 内联样式

• 声明样式

• 引入样式

⭐️ CSS 模块化

• ⭐️ CSS Modules
• ✅ styled-components
• ✅ Styled JSX
• Emotion

✅ 开发调试

• 💬 描述：本地开发时热更新，提升开发效率。

• webpack-dev-server

• serve

内网穿透

• 💬 描述：将内网外网通过 nat 隧道打通，让内网的网站、数据让外网可以访问。

• Ngrok

• NATAPP

⭐️ CSS 预编译

• 💬 描述：使用新的扩展语言以增强 CSS 的能力，并通过预编译的方式将其转换为浏览器认识的 CSS 代码。

• ⭐️ SASS

• ✅ PostCSS

• Stylus

• ❌ LESS

测试

测试分类

• ⭐️ UT 单元测试
• SIT 系统集成测试
• E2E 端到端测试
• UAT 用户验收测试

✅ Mock

• 💬 描述：通过随机数据，模拟各种场景，增加单元测试的真实性。

• Mock.js

✅ 测试框架

• ✅ Jest

• Enzyme

• ✅ Puppeteer（Headless Browser）

• Mocha

• Jasmine

✅ 代码质量

开发规范

• 💬 描述：依照规范写出的代码会更加合理。

• 📚 资源：Airbnb 代码规范 https://github.com/BingKui/javascript-zh

• CSS Style Guide

• JavaScript Style Guide

类型校验

• TypeScript

代码检查

• ESLint
• StyleLint

代码风格

• 💬 描述：根据配置自动格式化代码，统一格式。

• Prettier

提交规范

• 约定式提交

提交检查

• 💬 描述：在提交代码时触发一些操作，比如检查代码的风格等。

• pre-commit

• husky

构建工具

自动化构建

• 💬 描述：按照配置好的流程自动打包构建项目，提高团队的开发效率，降低项目的维护难度。

• Gulp

• ✅ npm script

• Grunt

打包工具

• 💬 描述：将各种零散的📚 资源文件打包为可在浏览器等环境运行的代码。

• ⭐️ Webpack

• ✅ Rollup

• ✅ Vite

• Parcel

• Snowpack

CI / CD

• 💬 描述：通过在应用开发阶段引入自动化来频繁向客户交付应用。
• GitLab CI
• ✅ Jenkins

部署

⭐️ Web 服务器

⭐️ Nginx

• 💬 描述：高性能的 HTTP 和反向代理 web 服务器。

• 📚 资源：腾讯云动手实验室 https://cloud.tencent.com/developer/labs/gallery

• 反向代理

• 解决跨域

• 改写请求

✅ Apache

容器

✅ Docker

• 💬 描述：容器是一个标准化的软件单元，它将代码及其所有依赖关系打包，以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切：代码，运行时间，系统工具，系统库和设置。

• 📚 资源：Docker 从入门到实践 https://vuepress.mirror.docker-practice.com/

• Dockerfile

Kubernetes

部署策略

• 全量发布
• 蓝绿部署
• 滚动发布
• 灰度发布

监控告警

• 前端埋点
• 错误监控
• 性能监控
• 行为监控

四、前端优化

• 💬 描述：通过分析和优化手段，提高网站的性能和用户体验。

• 🎯 目标：实践前端优化方法，从多个方面优化自己做过的项目，最好能将优化后的网站与原网站进行对比，得到一些数据和体验上的明显提升。

✅ 性能优化

性能指标

• 💬 描述：用于衡量一个 Web 页面的性能。

• 📚 资源：https://juejin.cn/post/6844904153869713416

• FP（First Paint）

  • 💬 描述：从开始加载到浏览器首次绘制像素到屏幕上的时间，也就是页面在屏幕上首次发生视觉变化的时间。

• FCP（First Contentful Paint）

  • 💬 描述：浏览器首次绘制来自 DOM 的内容的时间。

• FMP（First Meaningful Paint）

  • 💬 描述：页面的主要内容绘制到屏幕上的时间。

• FSP（First Screen Paint）

  • 💬 描述：页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容。

• TTI（Time to Interactive）

  • 💬 描述：表示网页第一次完全达到可交互状态的时间点，浏览器已经可以持续性的响应用户的输入。

优化手段

• 性能监控

  • Performance API

• 样式优化

• JavaScript 优化

  • 防抖
  • 节流

• 代码分割

• 📚 资源压缩

• 打包优化

• 服务器优化

• 缓存优化

  • Service Worker

• 动画性能

• dns-prefetch

• Lazy loading

• 优化启动性能

  • 异步化

• 渲染优化

• 网络优化

• 移动端性能优化

• ✅ CDN

  • 💬 描述：内容分发网络，是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
  • 📚 资源：BootCDN https://www.bootcdn.cn/

用户体验

• 设计系统
• 骨架屏

✅ 兼容性

浏览器兼容性

• normalize.css
• html5shiv.js
• respond.js
• Babel
• Polyfill

屏幕分辨率兼容性

跨平台兼容性

SEO

• 💬 描述：搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

• 📚 资源：百度搜索📚 资源平台 https://ziyuan.baidu.com/cooperateresource/index

• robots.txt

• description

• keywords

• SiteMap

• HTML 标签优化

• 站内链接建设

• 友情链接

✅ 安全

• ⭐️ XSS
• CSRF
• 反爬虫
• SQL 注入
• DDoS

五、前端生态

• 💬 描述：如今，前端领域的范围越来越广，出现了更多前端工程师需要了解和关注的技术。

• 🎯 目标：能用学到的前端技术去做更多的事情，比如开发个人博客、文档网站、小程序、APP 等。

⭐️ 静态站点构建

开发

• React Static

博客

• ✅ Gatsby.js
• ✅ Docusaurus
• Hugo
• Hexo

文档

• JekyII
• ⭐️ Docsify
• VuePress
• ✅ Dumi

✅ 大前端

💬 描述：前端技术的融合更加紧密，应用的领域也更加广泛，前端领域的内容呈现多样化，除了网站外，还可以用前端技术跨平台开发 Android、iOS、小程序、虚拟现实、增强现实等。

移动应用

• Hybrid
• WebView
• React Native
• Flutter

移动应用打包

• Weex
• Cordova
• Phonegap
• Ionic

桌面应用

• Electron
• NW.js
• Proton Native

小程序

• 原生
• WebView

跨端开发框架

• ✅ uni-app
• ✅ Taro
• Flutter
• Chameleon
• Wepy
• Rax

移动端调试

• Chrome Dev Tools
• Android Simulator
• IOS Simulator

✅ Serverless

• 💬 描述：一种构建和管理基于微服务架构的完整流程，允许你在服务部署级别而不是服务器部署级别来管理你的应用部署，你甚至可以管理某个具体功能或端口的部署，这就能让开发者快速迭代，更快速地开发软件。

✅ 云开发

• 💬 描述：云端一体化的后端云服务 ，采用 Serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力降低了应用开发的门槛。使用云开发可以构建完整的小程序/小游戏、H5、Web、移动 App 等应用。

• ✅ 腾讯云云开发

• 阿里云云开发

低代码

• 💬 描述：无需编码（零代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。

• 腾讯云低码

• 阿里宜搭

六、前端求职

• 💬 描述：求职是一个漫长的过程，建议拉长战线，尽早准备。

• 🎯 目标：找到理想的工作。

流程

• 2020 秋招面经汇总：https://www.nowcoder.com/discuss/205497

简历

• 超级简历

面试题库

• 牛客前端工程师面试宝典：https://www.nowcoder.com/tutorial/96/f5212664ab664984882b00635066ded2
• 前端面试每日 3+1：https://github.com/haizlin/fe-interview
• React 面试题目 & 题解：https://github.com/sudheerj/reactjs-interview-questions

面经

• 前端面经汇总：https://www.nowcoder.com/discuss/experience?tagId=644

面试实战

• AI 模拟面试：https://www.nowcoder.com/interview/ai/cover?jobTagId=644

七、前端未来

• 💬 描述：前端未来可能的发展趋势和热门技术。

• 🎯 目标：关注前沿，持续进步。

• WebAssembly

• 智能 UI

• React Server Component

• CSS Houdini

WebComponents

• HTML templates（HTML模板）
• Custom elements（自定义元素）
• Shadow DOM（影子DOM）

我的前端学习路线

虽然上面整理的学习路线知识点非常多，但是大家也别太担心，其实按照一定顺序和方法来学习，并不会很难，聊聊我的学习经历。

1. 快速入门，培养兴趣

刚开始学习前端时，一定要以培养兴趣、快速入门为目标。我入门前端时，由于没有基础、啥都不懂，因此选择在线实战教程网站来学习，跟着教程案例一行行把代码敲下来，实时浏览显示效果，很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时，我对看过的知识点没有什么印象，基本是看了就忘，当我想要自己写一个网站，也根本无从下手。

于是，我开始试着死记硬背代码，结果发现背了之后还是不会写。那干脆一不做二不休，直接打开编辑器和教程网站，把之前在线实战时敲过的代码复制粘贴到编辑器中，然后再修改保存，到浏览器中打开文件。这样虽然要在编辑器和浏览器中来回切换，但起码能看到自己的网页文件运行的效果了。后来，我利用浏览器开发者工具提升了自己开发网站的调试效率，敲出的代码达不到满意的效果时，就再去查，再改，再浏览，最后终于完成了一个留言板网站！

通过这件事，我明白了一个道理，既然记不住知识，那就先别强行记忆，上手多写，忘了就去查不就好了？不要担心自己知识不够做不出来，只要你去试，都一定能实现。

2. 多看多写，巩固基础

在这种操作下，我虽然能使用基础三件套开发简易网站了，但做的很慢，还老出问题。于是，我开始完整地看了几本前端入门和项目实战书籍，有三件套入门的，也有响应式网站设计的，还有 JavaScript 综合讲解的，以及一套完整的视频教程，通过这些来复习巩固之前学过的知识，打好了基础，并且了解了更多实战教程上没见到的知识。

看书和视频的过程中，我跟着做了几个简易的网站，也是边看边做。在这之后，我发现自己渐渐地能够脱离文档来写网站了！

3. 框架学习，学以致用

但是，总感觉开发网站时，什么都要自己写，重复的代码写一大堆，很麻烦。于是，我试着上网搜了解决这些问题的方法，发现可以用组件库减少重复编写 HTML 和 CSS 代码，于是学了 LayUI，其实和之前一样的，就是打开官网找到要用的组件，然后复制到项目中修改就行了，写的多了竟然还真记住了一些（虽然这个没必要记）。

界面和样式代码简化了，但是 JavaScript 写的我依旧头疼。于是我决定进入下一个阶段的学习，当时先看了本书叫《锋利的 jQuery》来学习 jQuery，学会之后使用它趁热打铁做了几个网站，发现的确能大大简化繁琐的 JavaScript DOM 操作，让我尝到了甜头，又有了继续学习前端的动力。

在那之后大概半年，我开始学习主流前端框架 Vue，也是跟着视频教程学，并且结合 ElementUI 组件库开发了一个响应式网站。不得不说，习惯了用原生 JavaScript 和 jQuery 开发后，再去用 Vue 开发，真的是爽飞了，小有成就感。

4. 根据需要，自主学习

在那之后，我就是通过不断地做项目来积累经验，既然编程知识太多学不完，那我就随需随学，逐渐拓宽自己的知识面。举个例子，我要做一个移动端 H5 页面，那就去搜 Vue 的移动端组件库，学会了 MintUI、VantUI 等；项目中要处理日期，那我就去搜日期处理库，学会了 Moment.js；项目重复文件和代码太多，我就去网上搜一些组件化、模块化的最佳实践；项目代码太大、加载太慢，我就去网上搜一些前端压缩、性能优化的方式；要把开发好的项目变成 APP，那我就去网上搜到了 Cordova 等打包工具；跟其他同学一起做项目时比较混乱、开发效率低，我就去搜了一些代码规范、前端工程化等；遇到 Bug 时，也是自己去网上搜索解决方案，并且还要看看有没有知识点是我遗漏的，我会再去弥补学习。通过不断实践、不断遇到问题和自主解决问题，我始终保持着学习的积极性，学到了越来越多前端的知识，并通过归纳总结来加深印象。

5. 渐入佳境，拓宽视野

在那之后，我学前端技术非常快了，像 React、TypeScript、Redux、Dva、Umi、Lerna 等等都随用随学，随学随用。此外，我不仅仅关注前端网页开发本身，还同时关注前端的生态和发展，学习了微前端、Serverless、云开发、低代码等技术，因此个人的能力提升也很大。如今在鹅厂工作中也是，面对各种不同技术栈的前端项目，我都能迎难而上，毕竟不会就学嘛！

哦，写的渐入佳境，我都忘了，自己是一名后端工程师，还搁这儿吹牛逼呢（ 所以本路线难免会有不专业的地方，请大家见谅~

6. 总结

总结一下，学前端的路线其实就一句话：基础三件套 => 巩固基础 => 学习框架 => 多做项目 => 按需学习 => 拓宽视野。还有一个学任何编程技术都要注意的点，全程多敲代码！多敲代码！多敲代码！

尾声 - 持续学习

优秀前端人的特质

• 深厚的功底

• 良好的编码习惯

• 发现问题的洞察力

• 思维灵活，善于思考

• 追求技术，紧跟前沿

• 有创造力，有行动力

• 追求用户体验

• 时刻保持好奇

• 全栈意识

• 解决问题的能力强

• 懂得合作和高效沟通

• 重视工作，同样重视生活

• 责任心和全局观

• 个人的进步能带动团队的进步

学习资源

• 编程导航（包含以下所有资源，强烈推荐 👍）：https://www.code-nav.cn
• freeCodecamp 在线编程：https://learn.freecodecamp.one/
• 阿里云前端实战学习：https://edu.aliyun.com/roadmap/frontend
• W3Cschool 编程入门实战：https://www.w3cschool.cn/codecamp/
• 腾讯云动手实验室：https://cloud.tencent.com/developer/labs/gallery
• pink老师前端入门教程：https://www.bilibili.com/video/BV14J4114768
• MDN 前端文档：https://developer.mozilla.org/zh-CN
• Node.js 入门：https://cnodejs.org/getstart
• 前端清单：https://cheatsheets.devtool.tech/
• 前端小课：https://lefex.github.io/
• 被删的前端游乐场：http://www.godbasin.com/
• 《ES6 入门教程》：https://es6.ruanyifeng.com/
• 谷歌 Web 开发者：https://developers.google.com/web
• JavaScript 明星项目：https://risingstars.js.org/2020/zh
• Best of JS：https://bestofjs.org/
• Codewars：https://www.codewars.com/?language=javascript
• Vue.js examples：https://vuejsexamples.com/

前端资讯

• 掘金资讯：https://juejin.cn/news
• InfoQ：https://www.infoq.cn/topic/Front-end
• daily.dev：https://daily.dev/

技术博客

• 掘金：https://juejin.cn/frontend

• 腾讯前端 IMWEB：http://imweb.io

• 腾讯 Web 前端团队 Alloy Team：http://www.alloyteam.com

• 淘宝前端团队：http://taobaofed.org

• 百度 Web 前端研发部：http://fex.baidu.com

• 京东凹凸实验室：https://aotu.io

• 360 奇舞团：https://75team.com

• 七牛团队技术博客：http://blog.qiniu.com

• 有赞技术团队：https://tech.youzan.com/tag/front-end/

• 百度 EFE Tech：https://efe.baidu.com/

• css-tricks：https://css-tricks.com/archives

• web.dev：https://web.dev/blog/

学习要点

• 前期学习以培养兴趣为主，不要过于追求深层理解。
• 前端学习不能靠死记硬背，要多敲代码、多做项目实践。
• 不要急于求成，踏实积累才是硬道理。

---

在我的公众号【程序员鱼皮】后台回复 “前端路线” 领取路线图 + 在线网站。

大家冲鸭！

如果觉得有帮助，求朋友们 点赞 支持下，给俺点创作的动力 ❤️

---

您好，我是鱼皮，98 年生，有野心的天蝎座，20 届本科毕业加入 腾讯，从事全栈应用开发，同时也是 腾讯云开发高级布道师 。

我热爱学习和分享编程技术，在公众号、抖音、B 站、知乎、GitHub 等多个平台创作（都叫 “程序员鱼皮”），全网累计收获近 20w 粉丝的关注。

我熟悉多种编程语言和技术栈，包括但不限于 Java 后端、前端、小程序开发，在校期间就带工作室建设了几十个校园网站，以 专业第一 的成绩拿过国家奖学金、挑战杯学术竞赛国奖、上海市优秀毕业生，出版过区块链教材，也曾有过字节跳动、腾讯等三家公司的实习经历，甚至还有段创业经历，并成功积分落户上海。

此外，我独立开发了【编程导航】全栈项目（ https://www.code-nav.cn ），已经帮助上万名小伙伴找到优质编程学习资源！

感谢大家的关注~