前端开发10年，聊聊我是怎么从零基础到年薪40万的

用微信扫码二维码

分享至好友和朋友圈

多年以后，身为前阿里前端的我，回想起曾经在自己租的10平米出租屋内学习前端的日子，在看看现在的我正在自己刚买150平大三居中，为要学习前端新手的小白出谋划策写文章，我总是会想起那句“年年岁岁花相似，岁岁年年人不同”。

开始网站开发，起先是从手机网站的UBB语法开始的，也因此有了深入学习的兴趣。为了让学习的热情膨胀，我有意的培养这一爱好 ，定位了自己要成为一名优秀的网站开发员的目标。 作为一名只有大专水平的零基础初学者，周围也没有掌握相关知识的朋友，打算自学的我只有通过google,baidu来了解要学习网站开发所需要的知识点。

在正文开始前，我还是先说一下我个人对于前端职业发展前景的看法。希望对那些站在前端学习起点，或者已经在路上，但犹豫不决的同学有所启发。

总的来说，到了2023年，初级前端在市场上是供大于求的，而高级前端依然是供小于求。这个判断主要是通过这些年面试的情况来看，没有全面的数据支撑，仅代表我个人观点。

初级前端供大于求。在培训机构和互联网公司的共同推动下，市场的初级前端很多。相比我2020年回答这个问题时，互联网公司在前端工程师的招聘要求高了很多。我毕业那年只是在学校里做了一个“图书管理系统”，边做边学搞了4个月，就可以拿到百度、淘宝的offer，而如今能做到这一点的候选人实在太多了。

高级前端供小于求。本质上因为互联网公司的发展速度高于市场上的前端工程师的平均成长速度。所以，虽然新手多了，企业招人依然困难。比如，天猫消费者端的导购页面，为了提高购买转化率，这些年来，在导购效率、用户体验维度做了非常多系统级体验优化方案，复杂度很高;又比如，阿里巴巴供应链平台，为了构建一套适用于阿里所有零售场景的供应链解决方案，同样在系统架构、用户体验、体验与研发效率的平衡等维度做了大量封装、抽象。这些是企业的高速发展的必然结果，然而市场上能够满足这样场景的同学，真的不容易找。

如何提升自己的技能呢？今天就在这里总结一下知识体系：

一 初级篇：HTML/CSS/JavaScript基础知识

第一阶段:HTML/CSS3

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

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

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

第二阶段:JavaScrip部分

JavaScript部分是前端的重点!到这一部分就可以结合书籍一起学习了，书籍推荐《JavaScript高级程序设计》《你不知道的JavaScript(上/中下)》这几本书能够吃下，你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库和工具库，能够修改第三方库源码以供业务特殊需求使用。

学完以后最好就是找一个小项目进行练习，检验自己的学习情况。

第三阶段:HTML5/移动端开发

这个阶段的学习周期在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适配、vwvh适配

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

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

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

终端样式美化与访问判断

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

常用类库/工具

jquery:元素选择、增删改差、事件处理、位置获取、动画过渡、高级方法、特效应用zepto:移动端的jquery、DOM操作、移动端事件、click延迟处理、touch事件组9基础UI库:layerUI、easyUI、bootStrap、Ul模块化、UI库使用技巧、文档解读、案例调试、表单系统

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

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

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

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

vscode高级插件与配置liveserver sass

模板化应用、预处理应用

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

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

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

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

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

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

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

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

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

需要学习的内容包含:

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加密实践

达标水平：能够理清完整的WEB应用情景和交互行为,从理论到实践掌握常规数据库设计、路由设计、工程化、模块化、组件化、权限、鉴权、加密、跨域、认证，能够完成从前端到后台到数据库一整条线路的注册、登录、查询、修改、管理等功能。

第五阶段:VUE框架

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

需要学习的内容包含:

vue基础

vue开发准备、工具与插件、mvcmvpmvvm设计理念、原生js实现MVVM核心框架、vue设计模式、生命周期、命令与属性、组件化

数据驱动与双向绑定9、虚拟DOM概念原理、模板语法、条件与列表、数组监测、计算属性、事件处理、修饰与表单、监听器、过滤器

methodswatch computed filter对比、组件化开发9、动态组件、组件通信、高级组件通信、插槽、vue动画、实例对象、set、get、nextTick、vue插件

vue工程化

Babel、webpack配置vue、vue单文件组件、vue-cli设、工程平台处理、postCss、animate、core、socket、lodash工具、vue-cli插件、preset9、静态资源处理、环境变量与膜还是切换、工程化部署、工程构建

达标水平：能够熟练运用vue、、vuerouter、vue-cli、webpack、postcss、babel 以及各种第三方库，实现项目开发需求，独立完成完整的前端现代化工程项目，并且深入框架原理掌握mvvm核心，能够用原生JavaScript模拟实现vue的内核

学习前端大概就是这样的过程，很多人在学习html的时候觉得非常简单，觉得前端也挺好学的。到了css的时候，很多人就会觉得有些麻烦，调试效果的时候改来改去，最后也能挺过去。到了JavaScript的时候，难度就上去一大截，很多人由于没有编程基础，也没有掌握学习JavaScript的技巧，50%以上的人就会在这块内容时，越学越没有动力，也没有产生对于编程的兴趣，最后都是选择放弃。到后面学到。

学习前端我建议在北京、上海、杭州、深圳这样的城市去找，发展一般的城市前端很难有立足之地，想要达到月薪3万以上，只能选择这些城市。去招聘网站投简历肯定是机会最多的一种方式，但很多人的简历写的很差，所以写简历也是一门技术，只要简历写的好，就有很多的面试机会，面试50家还拿不到10家offer吗？到时候工作就随便你找，前提也是技术能力过关。

还有一种方式就是通过别人介绍，其实在到后来，有了5年工作经验以后，就不需要投简历自己去找，如果你是一个优秀的程序员，就会有很多猎头去挖你。目前这市场上的程序员虽然多，但真正能称得上比较优秀的程序员很少。

所以多认识一些猎头或者HR，给自己以后铺路，这都是需要提前准备的，说白了能靠关系尽量靠关系。如果你在大公司里面有认识的人，那么你想要进去就会方便很多，给你一个内推的机会，只要能过了技术这关，就进本能拿到offer。找工作能往大厂进就去大厂，大厂福利待遇好，而且工资都稳定，不会出现发不出工资的情况。有了大厂的工作背景和项目背景后，以后在跳槽其他公司都会被疯抢，就不会在担心找不到工作的问题。

特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.