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

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

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

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

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

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

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

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

JavaScript部分是前端的重点!到这一部分就可以结合书籍一起学习了，书籍推荐《JavaScript高级程序设计》《你不知道的JavaScript(上/中下)》这几本书能够吃下，你JavaScript这门语言在语法层面就没有任何问题了。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

达标水平:能够独立实现移动端H5开发适配各种移动设备并且能够处理各种兼容问题，能够利用原生js结合H5新特性实现各种功能组。