共计 6697 个字符，预计需要花费 17 分钟才能阅读完成。
昨天在一个前端群里产生了一件很有意思的事件，群成员 A 在群里提了一个对于行内元素排列间隙解决的问题，群成员 B 帮 A 解决了，两个人就聊了起来，发现两个人都是自学的前端，学历都是一般二本。但 A 的月薪是 10K，B 的月薪只有 6K。明天就借着这件事跟大家聊一下，为什么同样是自学前端，有的人第一份工作能拿 10K，有的人只能拿 6K。
在聊这个话题之前，咱们先把学历、天才这些无奈扭转的因素排除在外，就说作为一个普通人该怎么做，能力让第一份工作拿到更高的薪资。
- 抉择一座好城市
城市的倒退有良性循环和恶性循环。大城市基础设施欠缺，工作岗位多，就会吸引更多的人才涌入，人口越多生产能力越强，就会吸引更多的资本投资，资本投资会产生更多的高薪工作机会，从而造成良性循环。而小城市则会造成人口和资本外流的恶性循环。
所以。做前端开发的，筛选一座好城市真的十分重要，大城市起薪都高，并且成长速度也快。拿我的两个敌人举例，两个人都是湖南人，都是一毕业就去了深圳，一个待了一年，感觉一线城市太累，工作压力大，于是就回了长沙，另一个在深圳呆了 5 年，去年才回去。当初他们两个在长沙的薪资，一个是 18K，一个是 25K。从事前端开发，我始终都是倡议能去一线城市就去一线城市，不想去一线城市，最起码也要在省会城市。
2. 找一份好的教程
网上的教程很多，有些教程讲的会比拟深刻，有些教程讲的比拟浅，学的水平不一样，天然薪资就不一样。举个例子，一般教程 ajax 前后端交互会在学完 js 后间接讲 XMLHttp 的 API 办法和应用, 跨域和封装也都是只限于前端代码局部的解说和库的应用, 而一份好的教程则会在这根底上拓展 HTTP 实践、交互通信原理、服务端 http 服务器搭建、MIME、报文端口、监听抓包、网络业务模型、代理缓存、cookie session 鉴权认证、平安加密、Token、JWT、oauth、session 治理、RESTful 接口设计、协商合约、资源标识等原理规则性常识，可能让你真正分明整个交互的前因后果 而不只是单纯的抄办法 跟着教程写代码而已。所以，一份好的教程，也是你是否找到一份好的工作的关键点。
因为很多初学者对于这个行业齐全不理解，也无奈辨别教程的优劣。所以我整顿了一套最零碎的优质前端教程，能够退出我的学习裙，后面三位 484，两头三位 757，前面三位 760，我收费分享给大家。群外面也有很多工作多年的大佬，平时遇见有问题能够在外面问。我心愿把这个群打造成一个好的前端圈子，之后有好的工作机会能够相互内推。
3. 指标薪资与议价能力
大多数初学者对于这个行业并不理解，并不知道本人的程度可能拿多少薪资。能够在招聘网站上收集一些能拿到 10K 的工作岗位，招聘需要下面须要会的货色，本人都有肯定理解，那就能够投。面试前多刷刷面试题，面试后复盘总结，发现有有余的中央就补上，而后进行下一场面试。很多公司都是面试造火箭，工作拧螺丝。6k 的前端和 10K 的前端，平时干的活差不了太多。面试问题答复得都不错，问你冀望薪资是多少，自信点，间接要 10K 或者是说 11K 就好（多报 1k 当做议价空间），不要说什么 8 -10K，这么说那就是 8K 了。
4. 找个有教训的大佬带你
初学者对于这个行业不理解，不晓得本人学怎么样，根底是否扎实，心里没有一个底。有时候一个问题卡好几个小时都无奈解决，也会打击到学习的信念。所以，肯定要找个能领导你的人。这里不是说叫你加入培训，很多机构外表上看老师都很厉害，但事实是你接触不到这些厉害的老师，这些厉害的老师都只是录制一个课程，课程的答疑都是助教。助教大多都是在这些机构学完找不到工作的，遇到问题也就是这个助教替你去百度，对你的帮忙并不大。真正对你有帮忙的肯定是有个大佬带你，可能依据你的状况把问题给你解说得很透彻，帮你弄清楚为什么会呈现这个问题、该怎么解决这个问题。能够看看身边有没有从事前端开发工作的敌人，有的话能够让他带带你。
如果身边没有敌人是做这方面的，那就借助“网友”的力量。能够退出咱们这个 WEB 前端开发群，外面有很多工作很多年的前端大佬，问一个问题很快就能失去答案，并且会通知你目前欠缺哪些常识，给你分享他们的教训，感兴趣能够退出咱们的学习裙，后面三位 484，两头三位 757，前面三位 760。
最初给大家一份零碎全面的学习路线，下面的知识点只有能把握大部分，找一份 15K 以上的工作就很简略，可能全副把握，就能去加入大厂面试了。
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 利用、我的项目打包优化.