共计 6870 个字符，预计需要花费 18 分钟才能阅读完成。
先说观点，我强烈建议每个人都要自学，不要加入培训班。
我干 web 前端工程师这个职位曾经有 6 年多的工夫，之前在蚂蚁金服做过 2 年，起初来到是因为加班切实熬不住才走的，像这些曾经上市的互联网公司简直没有不加班的，基本上都是 996，尽管工资给的是很高，但谁也顶不住总加班没有生存的状态。因为本人在这行业曾经有 6 年的工作教训，所以对这个行业的状况还是比拟理解的，像在蚂蚁金服、腾讯、百度、美团、饿了么这样的大厂中，你简直找不到哪个程序员是培训班进去的，根本都是自学进去技术很好或者是科班出身的人，因为培训班进去的人根底都十分单薄，都是教训老道的面试官，只有在面试中轻易聊几句，就能够分辨进去你是否是培训班刚进去的，一旦发现是培训班刚进去的，间接面试完结。但自学进去的人不一样，个别自学进去的人工夫都比拟长，通过长期的学习积攒，能够把根底打得很好，每一个步骤把握的都很扎实，并且能保持长期自学下来的人，他们广泛都有很强的意志力和良好的学习能力，所以公司肯定是偏向于这类人。
在咱们这个行业中有一个奇怪的景象，就是很多做 Web 前端技术的人基本做不到 35 岁，能保持做 10 年以上技术的人非常少，根本都是干个三四年就转行去做其余的行业，因为他曾经很长时间没有晋升，技术始终都在原地踏步，大家都晓得咱们这个行业一旦不能持续晋升，就会被起初的人追上最初淘汰。而干到中途就转行的人，能够说 99% 都是速成培训班进去的，因为他们没有良好的语言根底，平时本人也不被动学习，因为没有养成良好的学习习惯，都认为加入培训班后就能够一劳永逸，当前就不须要学习了，然而在任何一个行业都一样，始终原地踏步不晋升的人，肯定会被他所在的行业淘汰，这是天然的法则。
有人问 Web 前端当初还能学吗？
齐全不必放心饱和的问题，如果说 Java 有点饱和这话我是信的，毕竟 Java 语言曾经 20 多年的工夫，然而 Web 前端的概念受到重视的工夫并不长，所以目前各个互联网公司都十分缺好的 Web 前端技术人才，像字节跳动这样的公司前段时间放出招聘需要，月薪根本都是 30K 以上的，各种渠道寻求内推人才，然而招人还是很难，各种猎头在各种内推群，想招聘到一个不错的 Web 前端人才还是比拟难，所以就目前的 Web 前端市场来看，齐全是能够学习的，而且前端的入门还是比拟容易的，相比 Java 而言，要更加适宜初学者。
我提倡的学习形式是：本人学习 + 有人领导
其实作为一个真的想做这行的人，首先他要对技术有一种酷爱，喜爱编程这种货色，学习的急躁和毅力是必须具备的，而后在整个学习过程中，有一个人去领导他，进步他的学习效率，尽量的少走弯路就能够了，剩下的其实都要靠本人去学。有的时候我感觉很可笑，为什么会有那么多的人认为去加入了线下培训班就不是自学了呢？我感觉持有这样想法的人肯定是走不远的，学习这种事件最初都是本人的事，并不是他人能够掌控的。
如果感觉本人在学习过程中有很多困惑，走了太多弯路，遇到一个问题须要好几个小时能力解决，也不晓得应该学到什么水平能力待业，能够随时来问我，我平时工作不忙的时候给大家解答。上面是我建设的一个 3000 人 Web 前端开发交流学习群，曾经有 5 年的工夫，汇集了 2000 多个前端学习者，心愿大家当前一起提高和守业。这就是 WEB 前端裙。后面三个输出 296，两头三个输出 212，前面三个输出 562。
给那些其余业余或者行业想学习 Web 前端做技术的人一些倡议：
1、略微理解一点的人都晓得，Web 前端的技术更新是十分快的，所以咱们在学习的时候肯定要学最新的技术体系。
2、Web 前端并没有特地残缺的内容，因为前端属于一个职位，想要做这个工作都须要学习哪些内容要明确，并不是要把所有的内容学完能力去找工作，常识是学不完的，但它有一些支流的技术是必须把握的，如果是高级的前端开发工作，把次要的技术学好后就能够尝试去找工作，尽量在工作中去学习你能力学到更多。
3、语言根底才是外围竞争力，无论当前前端开发出多少框架，它们都只是工具而已，而你只须要把握应用工具的技巧就能够，做前端开发的人，学好 JavaScript 是重中之重，如果你 JavaScript 学的不好，就不要往下持续学了，没有任何意义。
4、有机会找大佬带你入门就找大佬带你，本人一个人想要达到待业的程度很低，每个本人摸索的人必然走的是弯路，有的人走完了弯路还能回来，然而大部分人的后果都是因为“积重难返”最初放弃，其实并不是你智商不够，而是因为你对此不理解，齐全是摸着石头过河。
最初给大家总结了一下 2021 年 web 前端的学习内容，可能内容过于多，然而从具备竞争力的角度思考，我尽量把大前端全栈工程师要学习的内容都给大家列了进去，依照我这个规范去学，保底待业薪资在 15K 以上，如果在网上找不到这些学习资源，能够到这个 WEB 前端裙。后面三个输出 296，两头三个输出 212，前面三个输出 562。
一、HTML/CSS3 局部
前端概念总览、vscode 开发工具应用、markdown 文档工具应用、浏览器平台环境、标签根底、DTD 与 META
语义化、选择器、权重与优先级、匹配规定、浮动与革除、BFC、类名组合规定、SEO 前端技巧、定位、叠加技巧、
伪类、伪元素、盒子模型、代码标准、性能优化、渲染原理、CSS Sprites、iconfont 字体图标、布局思路、布局定式
css3 动画、css3 选择器、css3 过渡、flex 布局、背景突变、css3 实用动效、3D 模块、css3 变量、em/rem/vw
企业外部多页面我的项目实战（非仿站）有残缺 PSD 与切图
二、JavaScript 局部
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、原型属性、对象润饰、代理拦挡、链式询问、空值合并运算符、泡泡龙面向对象游戏开发
三、HTML5 / 挪动端开发 局部
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 层适配计划 原型布局搭建 模板化生成
工具函数开发、面向对象式业务设计 性能类日期对象开发
交互业务封装 模块对接 优化设计 面向对象高级程序设计
四、Nodejs 与工程化开发 局部
Node 原生根底
Node 根底概念、NPM 命令、V8 引擎概念、JavaScript 模块化 CMD AMD UMD、EventLoop 事件循环、同步异步、阻塞非阻塞、工作队列、宏工作、微工作、
原生 Node 模块、外围模块与 require、module、触发器 events 与 path 模块、fs 模块、Buffer 对象、URL 模块、HTTP 模块、stream 流
Node 原生封装 HTTP 与文件服务器
Node 框架
express 框架应用、中间件、外围对象、路由配置、模板引擎、数据脚本、Router 外围、CORS 配置、错误处理、校验封装、PM2 治理、nodemoon 治理
MORGAN 日志解决、查问正则捕捉、中间件开发、bodyParse 等第三方中间件应用、文件流上传下载、文件流切分
webpack 工程化构建
工程化概念、工程化工具介绍、webpack 基础知识、webpack 配置与运行、plugin 插件、loader 应用、入口进口配置、模块 modules、依赖解决、dev Server
target、文件切分、build 打包、热处理、package 治理、性能优化、测试解决、第三方插件应用、babel 等
前后端数据交互
HTTP 通信交互原理、申请响应、MIME、URI 地址、报文解析、端口、报文流、测试监听抓包、TCP/IP 握手机制、网络业务模型
代理、缓存、网关、隧道等概念、method 与申请头分类
根底 XMLHTTPRequest 对象办法属性、办法、ajax 异步交互、同源策略原理
原生 js 封装 ajax 交互、jquery 的 ajax 封装交互、jsonp 跨域解决、cors 跨域解决、携带 cookie 与跨域解决、代理服务器跨域解决、
cookie 验证与通信、axios 库的应用 代理、封装、拦挡、合并、二次封装
通信加密策略、数据对称加密、数据非对称加密、RSA 加密实际、MD5 加密实际
登录注册与鉴权机制、Authenticity 认证、Token 认证、JWT 认证、session 状态治理、oauth 认证
RESTful 接口设计
RESTful 设计准则、状态码设计与标准、服务器响应规定与格局、前后端接口协议制订、传统 RESTful 改良
API 设计规范、资源定位、JSON 模式、合约阐明、资源标识符、缓存敌对 API、HTTP 头治理、文档定义、松耦合准则、一致性、重用、稳定性准则
数据库存储
MongoDB 根底概念、NoSQL 与 SQL、CAP 定理、RDBMS、MongoDB 语法、指令、监控与 GUI、MongoDb 驱动、Mongoose 利用
数据库创立、汇合增删改查、文档增删改查、数据库查问、高级查问操作、通道查问、多条件查问、反向筛选、索引解决、aggregate 聚合管道、
validation 验证、population 联表、middleware 中间件解决、查问 ERROR 类二次封装
博客后盾我的项目实战
数据库设计、服务端路由搭建、接口设计与 API 治理、通信交互管道封装、注册登录、路由导航、前端路由治理、权限治理、用户治理、分类管理、标签治理
、文章治理、模块化性能封装、校验库封装、promise 链式行为封装、
异步模块解决、SPA 单页面利用高级实现、原生集中行为控制器、模板化 + 模块化 + 预处理 + 工程化实现前端页面
组件化封装
组件化根底概念、组件设计准则、组件封装、组件耦合与解耦、工程化 + 模板化 + 模块化实现原生组件化性能、
五、Vue 框架局部
vue 根底
vue 开发筹备、工具与插件、mvc mvp mvvm 设计理念、原生 js 实现 MVVM 外围框架、vue 设计模式、生命周期、命令与属性、组件化
数据驱动与双向绑定、虚构 DOM 概念原理、模板语法、条件与列表、数组监测、计算属性、事件处理、润饰与表单、监听器、过滤器、
methods watch computed filter 比照、组件化开发、动静组件、组件通信、高级组件通信、插槽、vue 动画、实例对象、set、get、nextTick、vue 插件
vue 工程化
Babel、webpack 配置 vue、vue 单文件组件、vue-cli、工程平台解决、postCss、animate、core、socket、lodash 工具、vue-cli 插件、preset、动态资源解决、
环境变量与膜还是切换、工程化部署、工程构建
vue Router
vue 路由概念、嵌套路由、路由视图、动静路由、路由匹配、编程式导航、history、hash 模式治理、命名视图、重定向与别名、导航守卫、路由元信息、滚动与懒加载、导航故障解决
vuex
vuex 外围概念、EventBus 比照、状态管理模式、Store、state、getter、mutation、action、moudule
vuex 辅助函数与 API 性能、vuex 环境抉择、vuex 模块化解决规定与技巧、对象格调提交形式、模块重用等
vue 我的项目实战
vue 博客我的项目实战 PC + 挪动端、elementUI、vantUI、websocket 聊天室、虚构人偶、vueScroll、store、qs、nprogress、editor、
文章分类、词云成果、spa 单页面利用、挪动 PC 无缝切换、残缺注册登录、vue 加密鉴权、http 封装治理、错误处理封装、vuex 外围状态治理、本地存储状态更新、令牌解决、
文章富文本编辑、点赞、珍藏、拜访、评论、组件封装、组件复用、组件混合、高级组件开发、复合性组件通信、vue 中解决原生 DOM 行为、vue 常见错误处理、
重置 vue 数据响应、个人信息批改、头像上传、告诉组件封装、postcss 利用、我的项目打包优化