是不是有点儿长，感觉要被劝退了？不过不用担心，为了帮助大家更轻松地了解前端知识体系，我对这份路线撒了点 糖 ~ 建议大家观看 B 站视频讲解，会清晰很多~ 地址：www.bilibili.com/video/BV1nh… 在我的公众号【程序员鱼皮】后台回复 “前端路线” 领取路线图 + 在线网站 以下是文档版： 路线特点
- 一份全面的前端知识点大梳理和汇总
- 分阶段学习，每个阶段给出学习目标
- 使用符号对知识点的重要程度做了区分，按需学习
- 知识点附有描述和资源链接
- 提供一份清晰的个人顺序学习路线方法
- 提供大量优质学习资源 符号表 可根据知识点前的符号按需选学，并获取知识点描述和学习资源。 · ⭐️ 必学（追求速成） · ✅ 建议学（重要知识） · ❗ 面试重点 · ❌ 一般没必要学习 · 💬 描述 · 📚 资源 · 🎯 目标 大纲
- 前言 - 学编程需要的特质
- 前端学习七阶段
- 前端入门
- 巩固基础
- 前端工程化
- 前端优化
- 前端生态
- 前端求职
- 前端未来
- 我的前端学习路线
- 尾声 - 持续学习 前言 - 学编程需要的特质 相信自己有能力，那么你就真的会有！ · 兴趣 · 坚持 · 付出 · 心态 一、前端入门 · 💬 描述：学习前端基础三件套，建议从实战开始，边学边练，培养兴趣，快速入门。 · 📚 资源 o freeCodecamp 在线编程：learn.freecodecamp.one/ o 阿里云前端实战学习：edu.aliyun.com/roadmap/fro… o W3Cschool 编程入门实战：www.w3cschool.cn/codecamp/ o pink老师前端入门教程：www.bilibili.com/video/BV14J… · 🎯 目标：了解和实践各语言的基础语法，并能使用开发工具来独立开发一个留言板网站。 ⭐️ 开发工具 · 💬 描述：工欲善其事，必先利其器。
- 浏览器
- · ⭐️ Chrome
- · ✅ Edge
- · ✅ Firefox
- · ❌ Opera
- · Safari 编辑器
- · ⭐️ VSCode
- · ✅ WebStorm
- · Atom
- · ⭐️ Sublime Text
- · HBuilder X
- · 记事本
- · 在线 IDE 文档笔记
- · ✅ Markdown 语法
- · ✅ Typora
- · 在线笔记
- o 语雀
- o 腾讯文档
- o 石墨文档
- o 印象笔记
- · Mdnice ⭐️ HTML
- · 💬 描述：用于定义一个网页结构的基本技术。
- · 📚 资源：developer.mozilla.org/zh-CN/docs/…
- · ⭐️ 基本语法
- · ⭐️ 标签
- o 分区 div
- o 标题 h1 ~ h6
- o 段落 p
- o 图像 img
- o 列表 ul / ol
- o 超链接 a
- o 表单 form
- o 表格 table
- o 框架 iframe
- · ⭐️ 属性
- · ✅ HTML5 特性
- o 语义化标签
- o 浏览器支持
- o 多媒体标签
- o Canvas 画布
- o ❌ 内联 SVG
- o 本地存储
- o localStorage
- o sessionStorage
- o ❌ Web SQL
- o Web Workers
- o 应用缓存（Cache Manifest）
- o 无障碍 ⭐️ CSS
- · 💬 描述：层叠样式表，用于设计风格和布局。
- · 📚 资源：developer.mozilla.org/zh-CN/docs/…
- · ⭐️ 基本语法
- · ⭐️ 引入方式
- o 行内样式
- o 内部样式表
- o 外部样式表
- · ⭐️ 选择器
- o 通用选择器
- o 标签选择器
- o id 选择器
- o class 选择器
- o 属性选择器
- o 派生选择器
- o 后代选择器
- o 子元素选择器
- o 相邻兄弟选择器
- o 组合选择器
- o 伪选择器
- o 选择器优先级
- · ⭐️ 属性
- o 单位
- o px
- o em
- o rem
- o vw
- o vh
- o 背景
- o 文本
- o 字体
- o 列表
- o 表格
- · ⭐️ 文档流
- o 标准流
- o 浮动流
- o 定位流
- · ⭐️ 内联元素 / 块状元素
- · ⭐️ 盒子模型
- o content
- o padding
- o border
- o margin
- · ⭐️ 浮动
- o 设置浮动 float
- o 清除浮动 clear
- · ⭐️ 定位
- o static
- o absolute
- o fixed
- o relative
- o sticky
- · ⭐️ 层叠规则
- · ❗ BFC 和 IFC 机制
- · CSS3
- o ⭐️ 响应式布局
- o 媒体查询
- o Flex 布局
- o Grid 布局
- o 瀑布流
- o 动画
- o 过渡
- o 渐变
- o 背景
- o 边框
- o 圆角
- o 字体
- o 2D / 3D 转换 ⭐️ JavaScript
- · 💬 描述：具有函数优先的轻量级，解释型或即时编译型的编程语言。
- · 📚 资源：developer.mozilla.org/zh-CN/docs/…
- · ⭐️ 基本语法
- · ⭐️ 数据类型
- o 值类型
- o 字符串 String
- o 数组 Number
- o 布尔 Boolean
- o 空值 Null
- o 未定义 Undefined
- o Symbol
- o 引用类型
- o 对象 Object
- o 数组 Array
- o 函数 Function
- · ✅ 数据类型转换
- · ✅ 函数
- o ⭐️ 概念
- o ⭐️ 自定义函数
- o 调用方式
- o ⭐️ 全局调用
- o 构造函数调用
- o ⭐️ 函数方法调用
- o apply
- o call
- o ✅❗ 闭包
- · ✅ 对象
- o 概念
- o this
- o 原型链和继承
- o 常用对象
- o 数字 Number
- o 字符串 String 对象
- o 日期 Date 对象
- o 数组 Array
- o 布尔 Boolean
- o 算数 Math
- o 自定义对象
- · ✅❗ 作用域（作用域链）
- · ✅ BOM API
- · ⭐️ DOM API
- · ⭐️ JSON
- · ⭐️ Ajax
- · ✅ JavaScript 执行机制 ✅ ES6+ 特性
- · 💬 描述：新引入的 JavaScript 语法特性。
- · 📚 资源：ES6 入门教程 es6.ruanyifeng.com/
- · let 和 const
- · 变量解构赋值
- · 对象扩展和新增方法
- · Symbol
- · Set 和 Map 数据结构
- · ⭐️❗ Promise & async / await 异步编程
- · Generator 函数异步编程 二、巩固基础
- · 💬 描述：学习前端、计算机、软件开发相关基础知识，并复习巩固上阶段学到的前端三件套。
- · 📚 资源
- o 《JavaScript 高级程序设计》：www.code-nav.cn/rd/?rid=28e…
- o 《JavaScript 忍者秘籍》：www.code-nav.cn/rd/?rid=28e…
- · 🎯 目标：熟悉前端三件套语法，尤其是 JavaScript，并了解互联网、域名、浏览器、服务器等，扎实前端程序员的基本功，为下面进入实战开发做准备。
- 前端基础知识
- · ✅ 互联网
- · ⭐️ 域名
- · ⭐️ DNS
- · ⭐️ 服务器
- · ✅ 浏览器
- o 浏览器 DOM 事件流 / 事件委托
- o ⭐️ 浏览器加载顺序
- o ⭐️ 浏览器渲染过程
- o 浏览器事件循环
- o 浏览器同源策略
- o ❗ 跨域解决方案
- o 浏览器缓存
- o 控制台调试技巧
- · ✅ HTTP
- o ❗ HTTP 请求过程
- o 常见 HTTP 协议
- o HTTP 1.0
- o ⭐️ HTTP 1.1
- o HTTP 2
- o HTTP 3
- o ⭐️ HTTP 请求类别
- o ⭐️ 常见状态码
- o 1xx 信息
- o 2xx 成功
- o 3xx 重定向
- o 4xx 客户端错误
- o 5xx 服务器错误
- o WebSocket
- o ⭐️ Cookie
- o Session
- o ⭐️ HTTPS 计算机基础 ✅ 算法和数据结构
- · ⭐️ 时间 / 空间复杂度分析
- · 数据结构
- o 数组
- o 字符串
- o 队列
- o 栈
- o 链表
- o 集合
- o 哈希表
- o 二叉树
- · 算法
- o 排序
- o 双指针
- o 查找
- o 分治
- o 动态规划
- o 递归
- o 回溯
- o 贪心
- o 位运算
- o DFS
- o BFS
- o 图 ✅ 计算机网络
- · HTTP 协议
- · 网络模型
- · UDP / TCP 协议 ✅ 操作系统
- · 进程、线程
- · 进程 / 线程间通讯方式
- · 进程调度算法
- · 进程 / 线程状态
- · 死锁
- · 内存管理 软件开发基础 ✅ 设计模式
- · 单例模式
- · 代理模式
- · 工厂模式
- · 装饰者模式
- · 观察者模式
- · 策略模式
- · 门面模式 ⭐️ Git 版本控制
- · 常用命令 ✅ Linux 服务器
- · 常用命令 ✅ 正则表达式 三、前端工程化
- · 💬 描述：前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高开发过程中的开发效率，减少不必要的重复工作时间。
- · 📚 资源
- o 什么是前端工程化？www.zhihu.com/question/43…
- · 🎯 目标：至少学会一门主流的前端开发框架（Vue / React），并配合脚手架、组件库、工具等从 0 开始独立搭建并开发一个完整的前端网站，可以试着仿一些知名站点。要求遵循企业开发规范，将项目代码提交到代码仓库中，并独立发布上线，供他人访问。此外，建议抓住机会参与一些团队项目，感受团队开发模式和前端工程化的优势。 ⭐️ 研发流程
- 技术选型
- 初始化
- 开发
- 本地测试
- 代码提交
- 编译、打包、构建
- 部署
- 集成测试
- 发布上线
- 监控运维 ⭐️ 代码托管
- · 💬 描述：集中存储、备份你的代码，还能和团队成员协作开发。
- · ⭐️ GitHub
- · Gitee
- · GitLab ✅ Node.JS
- · 💬 描述：一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！
- · 📚 资源
- o Node.js 官方教程：nodejs.cn/learn
- o Node.js 入门：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 ⭐️ 脚手架
- · 💬 描述：快速生成新项目的目录模板，提升开发效率和开发舒适性。
- · 📚 资源：www.jianshu.com/p/25ce8cf2e…
- · Vue CLI
- · create-react-app
- · ✅ Yeoman ⭐️ 前端架构设计
- · 💬 描述：一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效可持续的工作流。
- · 模块化
- · 组件化
- · ✅ MVVM
- · 设计原则
- · ⭐️ SPA 单页应用
- · ⭐️ 多页应用
- · ✅ 前端路由
- · PWA
- · 有损服务 ✅ 服务端渲染
- · 💬 描述：在服务端渲染 HTML 页面的模式。
- · 📚 资源：www.zhihu.com/question/37…
- · Next.js（React）
- · Nuxt.js（Vue）
- · ❌ Universal（Angular） BFF
- · 💬 描述：Backend For Frontend（服务于前端的后端），就是服务器设计 API 时会考虑前端的使用，并在服务端直接进行业务逻辑的处理。
- · 📚 资源：www.jianshu.com/p/eb1875c62…
- · GraphQL ✅ 微前端
- · 💬 描述：将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，从而解决庞大的一整块后端服务带来的变更与扩展方面的限制。
- · 📚 资源：zhuanlan.zhihu.com/p/96464401
- · qiankun
- · single-spa CSS in JS
- · 💬 描述：用 JavaScript 来写 CSS。
- · 📚 资源：www.ruanyifeng.com/blog/2017/0…
- · 内联样式
- · 声明样式
- · 引入样式 ⭐️ 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.com/BingKui/jav…
- · 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 服务器。 · 📚 资源：腾讯云动手实验室 cloud.tencent.com/developer/l… · 反向代理 · 解决跨域 · 改写请求 ✅ Apache 容器 ✅ Docker · 💬 描述：容器是一个标准化的软件单元，它将代码及其所有依赖关系打包，以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切：代码，运行时间，系统工具，系统库和设置。 · 📚 资源：Docker 从入门到实践 vuepress.mirror.docker-practice.com/ · Dockerfile Kubernetes 部署策略
- · 全量发布
- · 蓝绿部署
- · 滚动发布
- · 灰度发布 监控告警
- · 前端埋点
- · 错误监控
- · 性能监控
- · 行为监控 四、前端优化 · 💬 描述：通过分析和优化手段，提高网站的性能和用户体验。 · 🎯 目标：实践前端优化方法，从多个方面优化自己做过的项目，最好能将优化后的网站与原网站进行对比，得到一些数据和体验上的明显提升。 ✅ 性能优化 性能指标 · 💬 描述：用于衡量一个 Web 页面的性能。 · 📚 资源：juejin.cn/post/684490… · FP（First Paint） o 💬 描述：从开始加载到浏览器首次绘制像素到屏幕上的时间，也就是页面在屏幕上首次发生视觉变化的时间。 · FCP（First Contentful Paint） o 💬 描述：浏览器首次绘制来自 DOM 的内容的时间。 · FMP（First Meaningful Paint） o 💬 描述：页面的主要内容绘制到屏幕上的时间。 · FSP（First Screen Paint） o 💬 描述：页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容。 · TTI（Time to Interactive） o 💬 描述：表示网页第一次完全达到可交互状态的时间点，浏览器已经可以持续性的响应用户的输入。 优化手段
- · 性能监控
- o Performance API
- · 样式优化
- · JavaScript 优化
- o 防抖
- o 节流
- · 代码分割
- · 📚 资源压缩
- · 打包优化
- · 服务器优化
- · 缓存优化
- o Service Worker
- · 动画性能
- · dns-prefetch
- · Lazy loading
- · 优化启动性能
- o 异步化
- · 渲染优化
- · 网络优化
- · 移动端性能优化
- · ✅ CDN
- o 💬 描述：内容分发网络，是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
- o 📚 资源：BootCDN www.bootcdn.cn/ 用户体验 · 设计系统 · 骨架屏 ✅ 兼容性 浏览器兼容性 · normalize.css · html5shiv.js · respond.js · Babel · Polyfill 屏幕分辨率兼容性 跨平台兼容性 SEO · 💬 描述：搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。 · 📚 资源：百度搜索📚 资源平台 ziyuan.baidu.com/cooperatere… · 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 秋招面经汇总：www.nowcoder.com/discuss/205… 简历 · 超级简历 面试题库 · 牛客前端工程师面试宝典：www.nowcoder.com/tutorial/96… · 前端面试每日 3+1：github.com/haizlin/fe-… · React 面试题目 & 题解：github.com/sudheerj/re… 面经 · 前端面经汇总：www.nowcoder.com/discuss/exp… 面试实战 · AI 模拟面试：www.nowcoder.com/interview/a… 七、前端未来 · 💬 描述：前端未来可能的发展趋势和热门技术。 · 🎯 目标：关注前沿，持续进步。 · WebAssembly · 智能 UI · React Server Component · CSS Houdini WebComponents · HTML templates（HTML模板） · Custom elements（自定义元素） · Shadow DOM（影子DOM） 我的前端学习路线 虽然上面整理的学习路线知识点非常多，但是大家也别太担心，其实按照一定顺序和方法来学习，并不会很难，聊聊我的学习经历。
- 快速入门，培养兴趣 刚开始学习前端时，一定要以培养兴趣、快速入门为目标。我入门前端时，由于没有基础、啥都不懂，因此选择在线实战教程网站来学习，跟着教程案例一行行把代码敲下来，实时浏览显示效果，很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时，我对看过的知识点没有什么印象，基本是看了就忘，当我想要自己写一个网站，也根本无从下手。 于是，我开始试着死记硬背代码，结果发现背了之后还是不会写。那干脆一不做二不休，直接打开编辑器和教程网站，把之前在线实战时敲过的代码复制粘贴到编辑器中，然后再修改保存，到浏览器中打开文件。这样虽然要在编辑器和浏览器中来回切换，但起码能看到自己的网页文件运行的效果了。后来，我利用浏览器开发者工具提升了自己开发网站的调试效率，敲出的代码达不到满意的效果时，就再去查，再改，再浏览，最后终于完成了一个留言板网站！ 通过这件事，我明白了一个道理，既然记不住知识，那就先别强行记忆，上手多写，忘了就去查不就好了？不要担心自己知识不够做不出来，只要你去试，都一定能实现。
- 多看多写，巩固基础 在这种操作下，我虽然能使用基础三件套开发简易网站了，但做的很慢，还老出问题。于是，我开始完整地看了几本前端入门和项目实战书籍，有三件套入门的，也有响应式网站设计的，还有 JavaScript 综合讲解的，以及一套完整的视频教程，通过这些来复习巩固之前学过的知识，打好了基础，并且了解了更多实战教程上没见到的知识。 看书和视频的过程中，我跟着做了几个简易的网站，也是边看边做。在这之后，我发现自己渐渐地能够脱离文档来写网站了！
- 框架学习，学以致用 但是，总感觉开发网站时，什么都要自己写，重复的代码写一大堆，很麻烦。于是，我试着上网搜了解决这些问题的方法，发现可以用组件库减少重复编写 HTML 和 CSS 代码，于是学了 LayUI，其实和之前一样的，就是打开官网找到要用的组件，然后复制到项目中修改就行了，写的多了竟然还真记住了一些（虽然这个没必要记）。 界面和样式代码简化了，但是 JavaScript 写的我依旧头疼。于是我决定进入下一个阶段的学习，当时先看了本书叫《锋利的 jQuery》来学习 jQuery，学会之后使用它趁热打铁做了几个网站，发现的确能大大简化繁琐的 JavaScript DOM 操作，让我尝到了甜头，又有了继续学习前端的动力。 在那之后大概半年，我开始学习主流前端框架 Vue，也是跟着视频教程学，并且结合 ElementUI 组件库开发了一个响应式网站。不得不说，习惯了用原生 JavaScript 和 jQuery 开发后，再去用 Vue 开发，真的是爽飞了，小有成就感。
- 根据需要，自主学习 在那之后，我就是通过不断地做项目来积累经验，既然编程知识太多学不完，那我就随需随学，逐渐拓宽自己的知识面。举个例子，我要做一个移动端 H5 页面，那就去搜 Vue 的移动端组件库，学会了 MintUI、VantUI 等；项目中要处理日期，那我就去搜日期处理库，学会了 Moment.js；项目重复文件和代码太多，我就去网上搜一些组件化、模块化的最佳实践；项目代码太大、加载太慢，我就去网上搜一些前端压缩、性能优化的方式；要把开发好的项目变成 APP，那我就去网上搜到了 Cordova 等打包工具；跟其他同学一起做项目时比较混乱、开发效率低，我就去搜了一些代码规范、前端工程化等；遇到 Bug 时，也是自己去网上搜索解决方案，并且还要看看有没有知识点是我遗漏的，我会再去弥补学习。通过不断实践、不断遇到问题和自主解决问题，我始终保持着学习的积极性，学到了越来越多前端的知识，并通过归纳总结来加深印象。
- 渐入佳境，拓宽视野 在那之后，我学前端技术非常快了，像 React、TypeScript、Redux、Dva、Umi、Lerna 等等都随用随学，随学随用。此外，我不仅仅关注前端网页开发本身，还同时关注前端的生态和发展，学习了微前端、Serverless、云开发、低代码等技术，因此个人的能力提升也很大。如今在鹅厂工作中也是，面对各种不同技术栈的前端项目，我都能迎难而上，毕竟不会就学嘛！ 哦，写的渐入佳境，我都忘了，自己是一名后端工程师，还搁这儿吹牛逼呢（ 所以本路线难免会有不专业的地方，请大家见谅~
- 总结 总结一下，学前端的路线其实就一句话：基础三件套 => 巩固基础 => 学习框架 => 多做项目 => 按需学习 => 拓宽视野。还有一个学任何编程技术都要注意的点，全程多敲代码！多敲代码！多敲代码！ 尾声 - 持续学习 优秀前端人的特质 · 深厚的功底 · 良好的编码习惯 · 发现问题的洞察力 · 思维灵活，善于思考 · 追求技术，紧跟前沿 · 有创造力，有行动力 · 追求用户体验 · 时刻保持好奇 · 全栈意识 · 解决问题的能力强 · 懂得合作和高效沟通 · 重视工作，同样重视生活 · 责任心和全局观 · 个人的进步能带动团队的进步 学习资源 · 编程导航（包含以下所有资源，强烈推荐 👍）：www.code-nav.cn · freeCodecamp 在线编程：learn.freecodecamp.one/ · 阿里云前端实战学习：edu.aliyun.com/roadmap/fro… · W3Cschool 编程入门实战：www.w3cschool.cn/codecamp/ · 腾讯云动手实验室：cloud.tencent.com/developer/l… · pink老师前端入门教程：www.bilibili.com/video/BV14J… · MDN 前端文档：developer.mozilla.org/zh-CN · Node.js 入门：cnodejs.org/getstart · 前端清单：cheatsheets.devtool.tech/ · 前端小课：lefex.github.io/ · 被删的前端游乐场：www.godbasin.com/ · 《ES6 入门教程》：es6.ruanyifeng.com/ · 谷歌 Web 开发者：developers.google.com/web · JavaScript 明星项目：risingstars.js.org/2020/zh · Best of JS：bestofjs.org/ · Codewars：www.codewars.com/?language=j… · Vue.js examples：vuejsexamples.com/ 前端资讯 · 掘金资讯：juejin.cn/news · InfoQ：www.infoq.cn/topic/Front… · daily.dev：daily.dev/ 技术博客 · 掘金：juejin.cn/frontend · 腾讯前端 IMWEB：imweb.io · 腾讯 Web 前端团队 Alloy Team：www.alloyteam.com · 淘宝前端团队：taobaofed.org · 百度 Web 前端研发部：fex.baidu.com · 京东凹凸实验室：aotu.io · 360 奇舞团：75team.com · 七牛团队技术博客：blog.qiniu.com · 有赞技术团队：tech.youzan.com/tag/front-e… · 百度 EFE Tech：efe.baidu.com/ · css-tricks：css-tricks.com/archives · web.dev：web.dev/blog/ 学习要点 · 前期学习以培养兴趣为主，不要过于追求深层理解。 · 前端学习不能靠死记硬背，要多敲代码、多做项目实践。 · 不要急于求成，踏实积累才是硬道理。
在我的公众号【程序员鱼皮】后台回复 “前端路线” 领取路线图 + 在线网站。 大家冲鸭！
- -
