本篇基于互联网，汇总了前端技术的从0基础到进阶的学习大纲，会逐渐对每个专题进行文档输出

学习方式

前端发展历史进程

前端开发工具

  • vscode常用插件及设置

  • markdown语法笔记工具及使用

  • 掌握谷歌浏览器控制台的调试技巧

HTML

  • HTML核心

  • HTML语义：学会如何写出更优html

  • HTML及扩展

CSS

CSS核心

  • CSS样式之颜色、文字、文本设置

  • CSS三大特性：层叠性、继承性、优先级

  • 盒子模型及使用技巧

    • 视觉格式化模型

    • 盒子模型的计算

    • box-sizing: content-box/border-box

    • margin负值技巧

    • border使用技三角形制作

  • 掌握ps及雪碧图的处理

    • 背景background属性

    • 雪碧图的制作和使用

  • 表单处理及实践

    • 常用表单元素

    • 表单元素属性

  • CSS高级常见技巧汇总

  • CSS高级属性绘制技巧

  • CSS绘制

    • linear-gradient

    • radial-gradient

    • background

    • box-shadow

    • text-shadow

    • border-radius

    • filter

    • clip-path

    • counter

    • 等

  • CSS机制at-rule

    • @charset

    • @import

    • @namespace

    • @document

    • @fontface

    • @keyframe

    • @media

    • @page

    • @supports

  • CSS变量

CSS选择器深度剖析

  • CSS选择器汇总

  • 选择器的权重优先级

  • 选择器的命名规范

  • 精通选择符-众多高级选择器技术的核心

  • 选择器中的正则表达式

  • AMCSS开发模式简介

  • 全面解读伪类和伪元素

布局及实战套路

  • float布局

    • 浮动及清除浮动的方法

    • 浮动原理BFC

  • 盒布局

  • flex布局

  • grid布局

  • columns布局

  • Shapes布局

  • PC经典布局方案深度解析

  • 新布局方案深度解析

定位和层叠上下文

定位常见值及原理

  • 相对定位、绝对定位、固定定位

position、fixed和sticky

层叠上下文形成条件

层叠上下文和层叠顺序

层叠上下文对z-index的影响

  • 层级关系z-index

icon全解析

img及HTML area技术

background-icon

icon-Sprites

iconfont-HTML

iconfont-CSS

SVG icon

CSS绘制icon

icon各种使用技巧汇总

字体图标库实战使用

彻底弄懂前端动画

动画细节和原理深入解析

transform全解

transition过渡

animation动画与交互

关键帧动画steps功能符深入介绍

移动端响应式布局技巧

设备像素、设备独立像素、CSS像素、PPI、devicePixelRatio

layout viewport与visual viewport

viewport缩放适配

媒体查询@media

vw弹性适配

动态rem适配

300ms延迟、fastclick原理和实现

点击穿透、1px实现

移动端响应式适配的主流布局方案

CSS工程化和框架应用

预处理器作用和原理

  • CSS预处理器之less
  • CSS预处理器之sass
  • CSS预处理器之stylus

less/sass/stylus代码实践

bootstrap原理和方法

  • 栅格系统
  • 源码解读

PostCSS和基于PostCSS的CSS工程化体系

CSS模块化方案（CSS Modules）

Vue和React框架中的CSS使用

CSS框架应用

CSS工作原理和性能优化

CSS渲染和解析原理

CSS布局模型：流动模型（Flow）

CSS布局模型：浮动模型（Float）

CSS布局模型：层模型（Layer）

BFC的原理及功能

IFC的原理及功能

理解font-size | line-hieght | vergical-align

提升CSS渲染性能的方面汇总

absolute/display隐藏与回流等性能优化

base64:URL背景图片与web页面性能优化

经典面试真题解析

掌握盒子水平垂直居中的五大方案

已知宽高实现盒子水平垂直居中

宽高不定实现盒子水平垂直居中

关于CSS3中盒模型的几道面试题

经典布局方案：圣杯、双飞翼布局等

面试必问：移动端响应式布局开发的三大方案

经典的CSS3面试题解析（BAT|TMD面试题）

CSS效果案例实现

https://juejin.cn/post/6844904033405108232#comment

https://juejin.cn/post/6881546676188741645#comment

CSS库的实现与封装

https://juejin.cn/post/6844903519359598599

JavaScript

全面剖析JS基础知识

  • ECMAScript的发展历程和重大变革

  • 声明变量的5种方案

  • 操作语句中的3种循环和3种判断

  • 9种数据类型及详细剖析

  • 数据类型检测和相互转换详解

  • 函数详解：形参/实参/返回值/arguments

  • 对象object详解

    • object中关于属性的增删改查

    • 原始值类型和对象类型的区别

String/Math/Array/Object常用API

  • String字符串中常见的15种方法

  • Math数学函数中的常用的10种方法

  • Array数组中常用的20中方法

  • Object对象中常用的10种方法

  • 面试必考：queryURLParams地址参数解析

  • 案例剖析：随机验证码的实现原理

ES6新语法特性剖析

  • let/const以及Symbol/Bigint

  • 对象/数据/字符串的解构赋值

  • 箭头函数和运算符的基础应用

  • Promise/async/await的基础应用

  • Class类声明的基础应用

  • Set/Map/WeakSet/WeakMap的基础应用

  • 其余常用ES6+基础知识

DOM/BOM编程艺术

  • DOM文档树中常用的属性和方法

DOM节点书中常用的属性和方法

JS中常用的13个盒模型属性

DOM中的事件操作

BOM中的常用的操作方法

小案例：页卡切换和购物车计算器

jQuery和Zepto应用指南

jQuery选择器和常用dom操作

jQuery中的样式和属性操作

jQuery中的动画和事件处理

jQuery中的ajax和工具类方法

Zepto和jQuery的区别

小案例：JQ/Swiper实现轮播图

实战案例：瀑布流效果和图片延迟加载

综合实战案例

  • 小米商城官网
  • 网易新闻APP
  • QQ音乐APP
  • 凤凰新闻APP
  • 花瓣网（瀑布流效果）
  • 摩拜单车响应式官网
  • 企业OA办公管理系统

JavaScript核心运行机制与实战开发

14大核心模块+10大专题课程
全面覆盖JS、AJAX、HTTP、webpack、Vue、React、Node、小程序、数据结构和算法、数据可视化等核心内容

基础知识+各种框架源码解读+开源插件组件封装+性能优化+大量实战案例

JS第一座大山：堆栈内存和闭包作用域

9种数据类型区别及相互转换

词法解析和变量提升

ES5/6混合模式下的V8词法分析和变量提升机制

堆（Heap）栈（Stack）内存及垃圾回收机制

JS底层运行机制：EC/AO/VO/GO

作用域（Scope）和作用域链（Scope-Chain）

闭包及其两大作用（保存/保护）

高阶编程：惰性函数/柯理化函数/compose组合函数

BAT/TMD经典面试题深入剖析

jQuery源码解读（基本骨架）

Lodash源码解读（函数防抖和节流等）

JS第二座大山：面向对象（OOP）程序设计

全方位剖析面向对象程序设计

构造函数（constructor）和new底层实现机制

原型（prototype）和原型链（proto）

函数3种角色及Function/Object的相互依赖机制

BAT/TMD经典面试题深入剖析

This的5大场景及实战应用

call/apply/bind/instanceof/Object.create()等源码剖析

JS中4大继承方案的深入解析

jQuery源码解读（数据类型监测的封装及底层核心）

Lodash源码解读（数组/对象的深拷贝和深比较）

JS的第三座大山：同步异步编程及浏览器渲染机制

浏览器底层渲染机制

V8渲染页面的全套机制及DOM性能优化

DOM树/CSSOM树/RENDER树

DOM的回流（Reflow）重绘（Repaint）及实战应用

同步（Sync）异步（Async）编程

事件循环（EventLoop）和事件队列（EventQueue）

EventLoop事件循环机制

微任务（Microtask）和宏任务（Macrotask）

CRP关键节点性能优化（Critical Rendering Path）

页面白屏优化之骨架屏技术（Skeleton）

BAT/TMD经典面试题深入剖析

JS第四座大山：DOM事件及设计模式

详细解读事件及事件对象

DOM2级事件的核心运行机制

事件传播机制和事件代理

观察者（Observer）和发布订阅（Pub-Sub）设计模式

代理（Proxy）和装饰器（Decorator）设计模式

从零实现开源级插件组件封装

BAT/TMD经典面试题深入剖析

京东放大镜、B站楼层导航、百度可拖拽登录框等10多个经典案例

JS第五座大山：ES6+核心知识和源码分析

let/const和var的区别

箭头函数和普通函数的区别

class类和类的装饰器（Decorator）

Set/Map/WeakSet/WeakMap

Promise和Promise A+规范源码

https://blog.csdn.net/qq_40588413/article/details/104437358

https://promisesaplus.com/

async/await及内部实现原理

Generator生成器和Interator迭代器

模块化发展历程：AMD、CMD、CommonJS、ES Module

Object.defineProperty和Proxy深度对比

函数式编程和命令式编程

函数设计规范

  • 普通
  • 构造函数
  • 箭头函数
  • 生成器函数
  • 静态对象

JS第六座大山：AJAX/HTTP前后端数据通信

HTTP1.0和HTTP2.0的区别

HTTP和HTTPS的区别

TCP的三次握手和四次挥手

DNS和DNS预解析

强缓存(Expires/Cache-control)和协商缓存（Last-Modified/ETag）

HTTP报文和HTTP网络状态码

XMLHttpRequest及内部核心操作

数据传输格式：FormData/x-www-form-urlencoded/raw/binary

Axios库及Axios的二次配置

基于Promise从零封装Axios库

Fetch及Fetch库的封装

N种跨域解决方案及底层原理

前端性能优化方案汇总（全面深入分析 + 实战演练）

进阶专题

数据结构和算法

堆/栈/队列/优先级队列

链表/反向链表/HASH/二叉树/红黑树

大O标识法和时间复杂度

N种排序算法的详细解析

N种去重算法的详细解析

递归算法及深度优先/广度优先

BAT/TMD算法原题解析

持续性更新算法题库（Leet-Code和大厂原题）

H5及响应式布局开发

响应式布局方案：@media/rem/flex/vw/vh

layout viewport与visual viewport与dpi适配

音频audio和视频video处理方案

移动端Touch事件及事件库封装

FileReader文件系统及实战应用

Swiper框架及实战应用

实战案例：创意H5场景交互案例

Canvas和数据可视化

canvas的基本用法及图像处理

svg的基本用法

canvas动画及小游戏开发

基于canvas实现QQ头像的裁切和上传

Echarts基本用法及在使用时需注意的点

webGL/three.js基础及实战应用Echarts

实战多元化/个性化图表练习

正则表达式深入剖析

正则表达式中的元字符和修饰符

正则匹配及常用的正则表达式编写

正向预查和负向预查

正则捕获的懒惰性和贪婪性

exec/match/replace的底层实现原理

实战案例：queryURLParams、千分符、时间格式化等

BAT/TMD经典面试题深入剖析

源码阅读及打造开源级插件组件

手撕惰性函数/柯理化函数/组合函数等高阶编程技巧的源码

手撕call/apply/bind/instance/Object.ceate/new等内置方法源码

手撕Promise A+/async/await源码

jQuery/Lodas/underscore/Axios等类库核心源码逐行剖析

深度解读前端经典的10+设计模式

开源级插件组件封装

  • 树形折叠菜单组件
  • 图片延迟加载组件
  • 万能Dialog模态框组件
  • 文件上传（含切片上传、断点续传）组件
  • 炫酷的3D轮播图组件
  • ……

企业OA办公管理系统

登录注册的前后端处理机制

加密策略：encodeURIComponent/MD5等

存储方案：cookie/webStorage/session等

用户权限和登录态的校验处理

Token及JWT的校验处理

项目实战开发技巧及性能优化

电子商城Hybrid混合APP

Hybrid混合APP开发

JSBridge通信机制和底层原理

微信JS SDK

基于Hbuilder实现APP打包

移动端联调处理方案

项目实战开发技巧及性能优化

Vue/React/Webpack核心知识与实战开发

工程化开发和部署

webpack

webpack核心基础知识

单（多）入口项目打包

webpack devServer和Proxy代理

loader及plugin的处理

CSS样式的抽离、压缩及兼容性处理

less/sass等预编译语言的处理

基于babel转换ES6/ES7语法及Polyfill兼容处理

resolve/sourceMap

webpack性能优化（TreeShaking、CDN加载热更新、图片压缩等）

vue-cli脚手架的应用/配置和性能优化

vite

vite/snowpack基础语法和实战应用

rollup

框架

vue2.0

  • vue2基本使用

  • mvvm双向数据绑定实现的原理

  • dom-diff及其实现原理

  • v-model及其实现原理

  • template模板语法和render

  • JSX语法受控组件（data）和非受控组件（ref）属性及属性的校验规则

  • 常用的指令和Vue.directive自定义指令

  • watch与computed的深度对比和实现机制

  • 事件处理及修饰符

  • 表单元素和条件及循环渲染

  • vue transition动画和路由切换动效

  • 生命周期（钩子）函数及实战应用

  • Componet组件化开发及slot插槽

  • 实战案例：淘宝商城购物车信息管理

Vue生态及进阶（vuex/vue-router）

  • 复合组件信息通信的6大方案

  • $on / $emit自定义事件

  • vuex基础：state/getter/mutation/action

  • vuex的模块化管理和mapXXX遍历

  • vuex核心源码解读

  • SPA（单页面应用）和MPA（多页面应用）对比

  • HASH路由和BROWSER路由对比

  • 编程式导航和动态路由

  • 路由导航守卫及权限校验

  • keep-alive组件静态/动态缓存

  • vue-router核心源码解读

  • 实战案例：TASK OA任务管理系统

Vue综合实战和性能优化

  • element-ui/cube-ui/vant实战应用和二次封装

  • 从零开始封装专业级的UI组件

  • Vue-DevTools前端调试工具与单元测试

  • 长列表和无限列表性能优化方案

  • 基于babel-plugin-componet实现组件按需导入

  • 图片/路由/数据等资源的懒加载

  • loading/骨架屏等优化技巧的实战应用

  • webpack编译打包层面的优化处理

  • CSRF/XSS等方面的网络安全优化处理

  • 综合实战案例

    • 基于Vue + Vue-Router打造今日头条客户端

    • 基于Vue + VantUI/CubeUI开发知乎日报APP

    • 基于Vue + Vuex开发QQ音乐播放器

    • 基于Vue + Vuex + Vue-Router开发网易云音乐

    • 【大型实战】珠峰在线课堂APP

    • 【大型实战】企业级OA办公管理系统

Vue3.0基础知识与实战应用

  • 全方位深度对比vue2和vue3的区别

  • Vue3新特性全面剖析

  • 基于vite/webpack实现vue3工程化部署

  • 掌握setup和10种响应式系统API

  • 掌握新生命周期函数和模板refs的使用

  • vue3中的响应式系统和dom-diff

  • 基于vue3实现知乎日报APP开发

  • 随着vue3及其生态更新

React基础知识和核心原理

create-react-app脚手架的应用与优化

jsx的基础知识和实战应用

虚拟DOM到真实DOM的渲染原理

react中的dom-diff实现原理

属性和状态的管理（深入剖析setState的同步和异步）

受控组件和非受控组件

react合成事件和双向事件绑定

函数式组件和React Hooks

类组件及其生命周期函数

Components VS PureComponent

复合组件和组件嵌套

基于属性实现父子组件信息通信

基于上下文（React.createContext）实现组件信息通信

React生态及进阶（redux/react-router-dom）

redux的操作流程和实战应用

react-redux的实战引用和中间件处理

高阶组件（代理组件）及其实现原理

redux/react-redux/中间件 源码解读

Dva和UmiJS及其实战应用

react-router-dom的基础常规操作

withRouter高阶函数

编程式导航和动态路由

实战案例：TASK OA任务管理系统

React综合实战和性能优化

从零开始封装专业级UI组件

Ant Design UI库的应用和二次封装

axios/fetch二次配置和API接口模块化管理

第三方登录和支付功能

Code Splitting代码“懒加载”

shouldComponentUpdate与PuerComponent

列表类组件优化处理技巧

基于Immutable.js进行性能优化

react-addons-perf性能监测

进阶专题

微信小程序开发

小程序注册和IDE

rpx适配、模板使用、图片处理等

小程序中核心组件/API的使用

导航及列表渲染（包含无限渲染）

HTTP-PROMISE及服务器的交互处理

获取用户信息及地理位置

小程序中的支付处理

mpvue框架的实战应用

uni-app框架的实战应用

大型实战案例：美团商城小程序开发

全面贯穿node.js/express全栈开发

node的安装和npm包管理器

fs内置模块和PromiseFS封装

http内置模块和搭建web服务器

搭建数据服务器和实现Restful API规范的接口

Express框架的基础知识

Express中路由和中间件的实战应用

Koa2框架的基础知识

数据Mock和MongoDB数据库应用

实战案例：小米有品电子商城APP的Node后台开发

实战案例：企业级OA办公管理系统的Node后台开发

GIT团队协作开发

Git的简介和安装

集中式（SVN）和分布式（GIT）的对比

工作区、暂存区、历史区、远程仓库

历史回滚和差异对比

和远程仓库的信息同步

Git分支处理

分支合并和处理冲突

玩转GitHub和构建个人博客

TypeScript

TypeScript的安装和编译

数据类型/函数/类

接口/泛型/类型变换模块 VS命名空间

TypeScript的工程化处理

Flutter

Flutter dart语法及环境配置

Flutter常用组件和布局

Flutter导航和动画处理

Flutter版珠峰课堂项目实战

就业指导和职业规划

阿里九段人才培养方案中各级别的要求

教你编写出一份优秀的个人简历

十多年心血汇总：“面试必杀技”

大厂面试流程和侧重点

如何才能成为一名优秀的IT工程师

企业内推资源和一对一模拟面试