大前端学习路线图（2022最新/附教程/书籍推荐） - 哔哩哔哩

有很多零基础的初学者，想要从事前端开发的工作，不知道需要学习哪些技术。今天给大家整理一份高质量的大前端学习路线。

这份前端学习路线，比较注重打好基本功，为以后进阶发展做准备。把这份学习路线掌握到应用开发层面，找到一份15K左右的工作不是问题。工作之后，用几年的时间去消化吸收进一步的掌握，年薪三四十万确实没啥问题。

干货满满，觉得有帮助千万别忘了一键三连噢~

第一阶段：HTML/CSS

这个阶段的学习周期大概在20天左右

需要学习的内容包含：vscode开发工具使用、markdown文档工具使用、浏览器平台环境、标签基础、DTD与META、语义化、选择器、权重与优先级、匹配规则、浮动与清除、BFC、类名组合规则、SEO前端技巧、定位、叠加技巧、伪类、伪元素、盒子模型、代码规范、性能优化、渲染原理、CSS Sprites 、 iconfont字体图标、布局思路、布局定式css3动画、 css3选择器、 css3过渡、flex布局、背景渐变、css3实用动效、3D模块、css3变量、em/rem/vw

达标水平：熟练掌握HTML、CSS核心语法，掌握多种布局技巧，能够独立绘制前端静态页面。能够做到按照企业开发模式还原设计图原型图，并保证符合w3c规范，结构健壮，代码精简，可扩展性强，兼容性强，SEO语义性强的页面项目。

视频教程推荐：

64:08:11

2021年最新录制大前端全套经典教程（450+课时）

7.3万观看 1716弹幕

网页链接

需要用到的软件安装包：

链接：

提取码：2q1s

HTML和CSS这部分的内容，看视频教程和文档就可以了。实在要结合书籍学习，推荐以下两本：

《疯狂HTML5/CSS3/JavaScript讲义》

这本书非常适合初学者，是一本全面介绍HTML5、CSS3和JavaScript前端开发技术的图书，系统地介绍了HTML5常用的元素和属性、HTML5的表单元素和属性、HTML5的绘图支持、HTML 5的多媒体支持、CSS 3的功能和用法、最前沿的变形与动画功能等。除此之外，本书还系统地介绍了JavaScript编程知识，包括JavaScript基本语法、DOM编程，以及HTML 5新增的本地存储、离线应用、JavaScript多线程、客户端通信支持、WebSocket编程等。

《响应式Web设计:HTML5和CSS3实战》

本书将当前Web 设计中热门的响应式设计技术与HTML5 和CSS3 结合起来，为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。书中不仅讨论了媒体查询、弹性布局、响应式图片，更将最新和最有用的HTML5 和CSS3 技术一并讲解，是学习最新Web 设计技术不可多得的佳作。 本书适合所有Web 开发和设计人员阅读。

第二阶段：JavaScript部分

这个阶段的学习周期大概在50天左右

需要学习的内容包含：

JavaScript概念

基础认知、发展历史、应用范围。

ECMAScript

语言概览、语句语法、数据类型、运算符、隐式转换、运算规则、控制流程、作用域、作用域链、作用域解析、js解释引擎、字符串属性方法、for of/for in

数组属性方法、对象、广义对象概念、对象特性、存储机制、深拷贝、对象实际应用、工厂模式、构造函数、原型、原型链、原型指向、封装

多种继承、包装对象、this、this指向、js数据处理、垃圾GC、闭包原理与应用、debug方法论、浏览器控制台工具应用、面向对象开发、函数式开发

纯函数、递归函数、回调函数、组合函数、缓存函数、柯里化函数、偏函数、函数防抖与节流、高级函数、IIFE函数、模块化

数学对象、高级数组方法（reduce、filter、map、every、some、forEach、find、findIndex、include）等

高级对象方法（entires、defineProperty、freeze、fromEntries、assign、keys、create、hasOwnProperty）等

this通过bind、call、apply指向偏移、同步与异步、闭包模块化、数据形变处理、性能处理

DOM/BOM

DOM对象与方法、节点与遍历树、DOM选择器、DOM节点增删改查、DOM样式操作、DOM位置获取与偏移、DOM对象与标签区别、DOM虚拟化、DOM事件、Event对象、定时器与监听器、事件委托、事件代理、事件分流、事件冒泡、默认行为、事件捕获、防抖、节流、滚动、键盘行为、事件降频、行为锁机制、拖拽模组、碰撞检测、距离判断、三角函数、方向判断、运动框架、弹性运动、重力加速度、DOM树、CSSOM树、渲染解析、加载、回流、重绘、浏览器线程与阻塞、BOM深入、window对象、navigator、history、screen、location、spa概念、本地传参、日期对象使用、日期格式化封装、随机封装、DOM分片容器

JS业务应用扩展

JSON对象、数据解析、JSON方法、模板渲染、缓存懒加载、正则表达式RegExp、元字符、修饰符、正向预查、贪婪模式、replace方法、分组与不分组、test、match与exec

正则库封装、表单校验、图片预存懒加载、自定义封装滚动组件、多重轮播（循环、视差、旋转木马）、选项卡切换、楼梯导航、吸顶导航、拖拽导航

JavaScript编码风格指南、console应用技巧

ECMAScript5 --- ECMAScript9扩展

版本解读、应用环境、let、const、解构赋值、箭头函数、对象解构、reset参数解构、class、set、get、extends、super、static、private实现、symbol、promise、proxy代理拦截、async/await

对象新增API、数组新增API、字符串新增API、原型属性、对象修饰、代理拦截、链式询问、空值合并运算符

达标水平：能够使用原生javascript进行业务开发，能实现常见的DOM库和工具库，能够修改第三方库源码以供业务特殊需求使用。

视频教程推荐：

81:10:36

JavaScript全套教程（上集），零基础JavaScript入门，Web前端实战教程

4万观看 1272弹幕

32:00:38

JavaScript全套教程（下集），零基础JavaScript入门，Web前端实战教程

1.2万观看 218弹幕

书籍推荐：

《JavaScript权威指南(第5版)》

这本书全面介绍了JavaScript语言的核心，以及Web浏览器中实现的遗留和标准的DOM。它运用了一些复杂的例子，说明如何处理验证表单数据、使用cookie、创建可移植的DHTML动画等常见任务。《JavaScript权威指南(第5版)》还包括详细的参考手册，涵盖了JavaScript的核心API、遗留的客户端API和W3C标准DOM API，记述了这些API中的每一个JavaScript对象、方法、性质、构造函数、常量和事件处理程序。

《JavaScript高级程序设计（第4版）》

这本书是JavaScript经典图书的新版。第4版全面、深入地介绍了JavaScript开发者必须掌握的前端开发技术，涉及JavaScript的基础特性和高级特性。书中详尽讨论了JavaScript的各个方面，从JavaScript的起源开始，逐步讲解到新出现的技术，其中重点介绍ECMAScript和DOM标准。在此基础上，接下来的各章揭示了JavaScript的基本概念，包括类、期约、迭代器、代理，等等。另外，书中深入探讨了客户端检测、事件、动画、表单、错误处理及JSON。本书同时也介绍了近几年来涌现的重要新规范，包括Fetch API、模块、工作者线程、服务线程以及大量新API。

《高性能JavaScript》

如果你使用JavaScript构建交互丰富的Web应用，那么JavaScript代码可能是造成你的Web应用速度变慢的主要原因。《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能，包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位JavaScript专家介绍了页面代码加载的最佳方法和编程技巧，来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践，以及有助于定位线上问题的工具。

第三阶段：移动端开发

这个阶段的学习周期在30天左右

需要学习的内容包含：

HTML5标签与API

HTML5概念、定义、新增特性、DTD对比、新增H5标签、新增语义化H5标签、H5表单

H5拖拽事件 video、audio、fullScreen、FileReader文件流、Blob对象、sessionStorage、localStorage、

网络状态、页面生命周期、网页状态监听、地理信息与定位、canvas画布、worker多线程、Notifications桌面通知

播放器开发 canvas交互特效开发

移动端适配/事件

移动端适配概念、尺寸与分辨率原理、PPI与DPI计算、DIP与DPR设备像素概念、视口viewport概念、布局视口、视觉视口、理想视口

视口适配方案（Meta viewport）缩放设置 、screen窗口大小API、媒体查询@media、rem适配、vw vh适配

移动端适配方案、flexible rem方案、 vh vw方案 、复合方案、高清适配方案、移动端字体缩放解决、1px边框问题解决、半像素线

图片高清适配、image-set、srcset、js拼接URL技巧、IPhonex刘海屏适配、安全区域、fit与env

Meta权限管理、兼容优化、IOS头部底部闪屏回退输入框问题、输入法空格问题、默认首字母大写问题、滑动卡顿问题等

终端样式美化与访问判断

Touch事件组封装、click延迟处理、FastClick使用、禁用缩放设置理想视口

常用类库/工具

jquery: 元素选择、增删改差、事件处理、位置获取、动画过渡、高级方法、特效应用

zepto：移动端的jquery、DOM操作、移动端事件、click延迟处理、touch事件组

基础UI库: layerUI 、easyUI、bootStrap、UI模块化、UI库使用技巧、文档解读、案例调试、表单系统

iScroll、touchjs等移动端事件库使用

swiper：移动端网站触摸滑动、轮播图插件、模块化应用、源码解读

art-template: 模板引擎 模板语法、渲染方法、原生模板引擎实现

CSS预处理：sass、less使用 stylus深入学习 、预处理语法、css编程、 Minxin 、预处理函数、继承、嵌套

vscode高级插件与配置 liveserver sass

模板化应用 、预处理应用

date-picker移动端原生组件开发

需求分析、业务规则、技术栈选型、文件输出规则、技术分析

MVC模型概念与设计、业务逻辑分类

view层适配方案 原型布局搭建 模板化生成

工具函数开发、面向对象式业务设计 功能类日期对象开发

交互业务封装 模块对接 优化设计 面向对象高级程序设计

达标水平：能够独立实现移动端H5开发适配各种移动设备并且能够处理各种兼容问题，能够利用原生js结合H5 新特性实现各种功能组件，例如音频视频播放器、懒加载、下拉刷新、等业务组件。

视频教程推荐：

65:28:40

移动端开发 H5前端教程 前端课程 0基础入门+实战教程

4.1万观看 261弹幕

书籍推荐：

《移动Web前端高效开发实战》

是一本梳理移动前端和Native客户端技术体系的入门实战书。 涵盖了移动Web前端开发中的各个关键技术环节，共14章。分别从HTML 5、CSS 3、JavaScript的ECMAScript 5和ECMAScript 6版本、移动端常用布局方案、MV*类新时代框架、预编译技术、性能优化、开发调试、混合式应用、单元测试、工程化等方面全面地还原一线互联网公司Web前端技术栈。 帮助移动Web前端开发领域的工程师们，勾画出一张实用并且具体的技术图，帮助读者正确且快速地掌握学习路径。包括大量基于Web前端的优秀开源技术类库和框架介绍，是进入移动Web开发领域的绝佳之选。

《HTML5移动开发》

全面讲解了使用HTML5和CSS3开发网站和Web应用的技术。 《HTML5移动开发》总共也分为14章，其内容包含移动开发环境的设置，HTML5的元素、语法和语义，使用来构建表单，探究应用于图像、音视频的HTML5媒体API以及AppCache、localStorage和其他API，CSS3选择器和语法以及更为深入的特性，响应式Web设计的特性，以及针对所有平台进行性能、用户体验和可靠性的设计。 《HTML5移动开发》适合具有一定经验的Web前端开发人员阅读。

第四阶段：Nodejs与工程化开发

这个阶段的学习周期在50天左右

需要学习的内容包含：

Node原生基础

Node基础概念、NPM命令、V8引擎概念、JavaScript模块化 CMD AMD UMD、EventLoop事件循环、同步异步、 阻塞非阻塞 、任务队列、宏任务、微任务、

原生Node模块、核心模块与require、module、触发器events与path模块、fs模块、Buffer对象、URL模块、HTTP模块 、stream流