前端学习路线（详细）
（来自鱼皮~~）
这份学习路线并不完美，也不会有最终形态，正如前端不可预见、永无止境的未来。
特点
-
一份全面的前端知识点大梳理和汇总
-
分阶段学习，每个阶段给出学习目标
-
使用符号对知识点的重要程度做了区分，按需学习
-
知识点附有描述和资源链接
-
提供大量优质学习资源
符号表
可根据知识点前的符号按需选学，并获取知识点描述和学习资源。
-
⭐️ 必学（追求速成）
-
✅ 建议学（重要知识）
-
❗ 面试重点
-
❌ 一般没必要学习
-
描述
-
资源
-
目标
大纲
-
前言 - 学编程需要的特质
-
前端学习七阶段
-
-
前端入门
-
巩固基础
-
前端工程化
-
前端优化
-
前端生态
-
前端求职
-
前端未来
-
-
我的前端学习路线
-
尾声 - 持续学习
前言 - 学编程需要的特质
相信自己有能力，那么你就真的会有！
-
兴趣
-
坚持
-
付出
-
心态
一、前端入门
-
描述：学习前端基础三件套，建议从实战开始，边学边练，培养兴趣，快速入门。
-
资源
-
-
freeCodecamp 在线编程：Learn to Code — For Free (freecodecamp.org)
-
阿里云前端实战学习：前端开发学习路线（学+测） - 阿里云开发者社区
-
W3Cschool 编程入门实战：在线编程实战训练CodeCamp_w3cschool编程实战
-
pink老师前端入门教程：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
-
-
目标：了解和实践各语言的基础语法，并能使用开发工具来独立开发一个留言板网站。
⭐️ 开发工具
-
描述：工欲善其事，必先利其器。
浏览器
-
⭐️ Chrome
-
✅ Edge
-
✅ Firefox
-
❌ Opera
-
Safari
编辑器
-
⭐️ VSCode
-
✅ WebStorm
-
Atom
-
⭐️ Sublime Text
-
HBuilder X
-
记事本
-
在线 IDE
文档笔记
-
✅ Markdown 语法
-
✅ Typora
-
在线笔记
-
-
语雀
-
腾讯文档
-
石墨文档
-
印象笔记
-
-
Mdnice
⭐️ HTML
-
描述：用于定义一个网页结构的基本技术。
-
资源：使用 HTML 组织网站内容 - 学习 Web 开发 | MDN
-
⭐️ 基本语法
-
⭐️ 标签
-
-
分区 div
-
标题 h1 ~ h6
-
段落 p
-
图像 img
-
列表 ul / ol
-
超链接 a
-
表单 form
-
表格 table
-
框架 iframe
-
-
⭐️ 属性
-
✅ HTML5 特性
-
-
localStorage
-
sessionStorage
-
❌ Web SQL
-
语义化标签
-
浏览器支持
-
多媒体标签
-
Canvas 画布
-
❌ 内联 SVG
-
本地存储
-
Web Workers
-
应用缓存（Cache Manifest）
-
无障碍
-
⭐️ CSS
-
描述：层叠样式表，用于设计风格和布局。
-
资源：CSS - 学习 Web 开发 | MDN
-
⭐️ 基本语法
-
⭐️ 引入方式
-
-
行内样式
-
内部样式表
-
外部样式表
-
-
⭐️ 选择器
-
-
后代选择器
-
子元素选择器
-
相邻兄弟选择器
-
通用选择器
-
标签选择器
-
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
-
描述：具有函数优先的轻量级，解释型或即时编译型的编程语言。
-
资源：JavaScript | MDN
-
⭐️ 基本语法
-
⭐️ 数据类型
-
-
对象 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 入门教程 ES6 入门教程
-
let 和 const
-
变量解构赋值
-
对象扩展和新增方法
-
Symbol
-
Set 和 Map 数据结构
-
⭐️❗ Promise & async / await 异步编程
-
Generator 函数异步编程
二、巩固基础
-
描述：学习前端、计算机、软件开发相关基础知识，并复习巩固上阶段学到的前端三件套。
-
资源
-
-
《JavaScript 高级程序设计》：编程导航 - 发现优质编程资源
-
《JavaScript 忍者秘籍》：编程导航 - 发现优质编程资源
-
-
目标：熟悉前端三件套语法，尤其是 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 服务器
-
常用命令
✅ 正则表达式
三、前端工程化
-
描述：前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高开发过程中的开发效率，减少不必要的重复工作时间。
-
资源
-
-
什么是前端工程化？什么是前端工程化？ - 知乎
-
-
目标：至少学会一门主流的前端开发框架（Vue / React），并配合脚手架、组件库、工具等从 0 开始独立搭建并开发一个完整的前端网站，可以试着仿一些知名站点。要求遵循企业开发规范，将项目代码提交到代码仓库中，并独立发布上线，供他人访问。此外，建议抓住机会参与一些团队项目，感受团队开发模式和前端工程化的优势。
⭐️ 研发流程
-
技术选型
-
初始化
-
开发
-
本地测试
-
代码提交
-
编译、打包、构建
-
部署
-
集成测试
-
发布上线
-
监控运维
⭐️ 代码托管
-
描述：集中存储、备份你的代码，还能和团队成员协作开发。
-
⭐️ GitHub
-
Gitee
-
GitLab
✅ Node.JS
-
描述：一个开源与跨平台的 JavaScript 运行时环境。它是一个可用于几乎任何项目的流行工具！
-
资源
-
-
Node.js 官方教程：http://nodejs.cn/learn
-
Node.js 入门：Node.js 新手入门 - CNode技术社区
-
⭐️ 包管理
-
描述：用于安装 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 页面的模式。
-
资源：到底什么才是服务端渲染？ - 知乎
-
Next.js（React）
-
Nuxt.js（Vue）
-
❌ Universal（Angular）
BFF
-
描述：Backend For Frontend（服务于前端的后端），就是服务器设计 API 时会考虑前端的使用，并在服务端直接进行业务逻辑的处理。
-
资源：https://www.jianshu.com/p/eb1875c62ad3
-
GraphQL
✅ 微前端
-
描述：将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，从而解决庞大的一整块后端服务带来的变更与扩展方面的限制。
-
资源：微前端到底是什么？ - 知乎
-
qiankun
-
single-spa
CSS in JS
-
描述：用 JavaScript 来写 CSS。
-
资源：CSS in JS 简介 - 阮一峰的网络日志
-
内联样式
-
声明样式
-
引入样式
⭐️ 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 代码规范 GitHub - BingKui/javascript-zh: Airbnb 出品，目前非常流行的 JavaScript 代码规范（中文版）。其内对各种 js 范式的写法进行了详细的规定与说明，按照此规范写出的代码将会更加合理。
-
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 服务器。
-
资源：腾讯云动手实验室 腾讯云 - 值得信赖
-
反向代理
-
解决跨域
-
改写请求
✅ Apache
容器
✅ Docker
-
描述：容器是一个标准化的软件单元，它将代码及其所有依赖关系打包，以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切：代码，运行时间，系统工具，系统库和设置。
-
资源：Docker 从入门到实践 Docker — 从入门到实践 | Docker 从入门到实践
-
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 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
-
用户体验
-
设计系统
-
骨架屏
✅ 兼容性
浏览器兼容性
-
normalize.css
-
html5shiv.js
-
respond.js
-
Babel
-
Polyfill
屏幕分辨率兼容性
跨平台兼容性
SEO
-
描述：搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
-
资源：百度搜索 资源平台 百度搜索资源平台_共创共享鲜活搜索
-
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 秋招面经汇总：2020秋招面经大汇总！（岗位划分）_笔经面经_牛客网
简历
-
超级简历
面试题库
-
牛客前端工程师面试宝典：【前端工程师面试宝典】学习说明_互联网校招面试真题面经汇总_牛客网
-
前端面试每日 3+1：GitHub - haizlin/fe-interview: 前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！每天早上5点纯手工发布面试题（死磕自己，愉悦大家），6000+道前端面试题全面覆盖，HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
-
React 面试题目 & 题解：GitHub - sudheerj/reactjs-interview-questions: List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!
面经
-
前端面经汇总：前端工程师精选面经汇总_校招实习社招_牛客网_牛客网
面试实战
-
AI 模拟面试：【前端工程师模拟面试】企业面试真题_情景模拟面试_牛客网
七、前端未来
-
描述：前端未来可能的发展趋势和热门技术。
-
目标：关注前沿，持续进步。
-
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. 总结
总结一下，学前端的路线其实就一句话：基础三件套 => 巩固基础 => 学习框架 => 多做项目 => 按需学习 => 拓宽视野。还有一个学任何编程技术都要注意的点，全程多敲代码！多敲代码！多敲代码！
尾声 - 持续学习
优秀前端人的特质
-
深厚的功底
-
良好的编码习惯
-
发现问题的洞察力
-
思维灵活，善于思考
-
追求技术，紧跟前沿
-
有创造力，有行动力
-
追求用户体验
-
时刻保持好奇
-
全栈意识
-
解决问题的能力强
-
懂得合作和高效沟通
-
重视工作，同样重视生活
-
责任心和全局观
-
个人的进步能带动团队的进步
学习 资源
-
编程导航（包含以下所有 资源，强烈推荐 ）：编程导航 - 发现优质编程资源
-
freeCodecamp 在线编程：Learn to Code — For Free (freecodecamp.org)
-
阿里云前端实战学习：前端开发学习路线（学+测） - 阿里云开发者社区
-
W3Cschool 编程入门实战：在线编程实战训练CodeCamp_w3cschool编程实战
-
腾讯云动手实验室：腾讯云 - 值得信赖
-
pink老师前端入门教程：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
-
MDN 前端文档：MDN Web Docs
-
Node.js 入门：Node.js 新手入门 - CNode技术社区
-
前端清单：https://cheatsheets.devtool.tech/
-
前端小课：前端小课
-
被删的前端游乐场：被删的前端游乐场
-
《ES6 入门教程》：ES6 入门教程
-
谷歌 Web 开发者：https://developers.google.com/web
-
JavaScript 明星项目：2020年 JavaScript 明星项目
-
Best of JS：Best of JS
-
Codewars：Codewars - Achieve mastery through coding practice and developer mentorship
-
Vue.js examples：Vue.js Examples
前端资讯
-
掘金资讯：资讯 - 掘金
-
InfoQ：前端_前端_前端开发_web前端-InfoQ_InfoQ精选频道
-
daily.dev：daily.dev | Where developers grow together
技术博客
-
掘金：推荐 - 文章 - 掘金
-
腾讯前端 IMWEB：腾讯 IMWeb 前端团队
-
腾讯 Web 前端团队 Alloy Team：AlloyTeam|腾讯全端 AlloyTeam 团队
-
淘宝前端团队：404 Not Found
-
百度 Web 前端研发部：FEX - FEX
-
京东凹凸实验室：Aotu.io「凹凸实验室」
-
360 奇舞团：https://75team.com
-
七牛团队技术博客：博客 - 七牛云
-
有赞技术团队：前端 - Page 1 - 有赞技术团队
-
百度 EFE Tech：https://efe.baidu.com/
-
css-tricks：Archives | CSS-Tricks - CSS-Tricks
-
web.dev：Blog
学习要点
-
前期学习以培养兴趣为主，不要过于追求深层理解。
-
前端学习不能靠死记硬背，要多敲代码、多做项目实践。
-
不要急于求成，踏实积累才是硬道理。
文档下载地址
点击下载md文档