近年来，前端技术的发展迅速，但因为前端知识面庞大，在实际学习当中往往无法理清其中的脉络。下面从各种库、框架、插件的层面上，对前端知识点做一些简单的梳理。从软件工程上，将前端分为四个由浅及深的层面或阶段。
一、基础层（浏览器原生支持html/css/js）
- html超文本标记语言，用标签构建网页的内容。HTML5扩展了标签及其功能。
- CSS层叠样式表，控制页面内容的表现。CSS3增加了更多的特效，比如文本效果和2D/3D转换，以及动画。
- javascript的原生API（包括DOM、BOM、Style样式、Canvas、SVG、WebGL等）
有了这些以后，我们已经可以开发基本的网络应用了，但是会发现它们并不好用，或者说存在一些缺陷，有优化的余地。
- 当前后端分离后，将数据填充到页面，传统HTML的拼接字符串的不太好用
- CSS不能像其他程序语言一样，通过变量、计算、继承等方式很好的管理。
- JS原生API不好用，还存在浏览器兼容等问题。
本来这些问题，前端开发者只能默默的认了（因为自己不会制作客户端软件工具，NODE的出现将改变这一切），所以大部分精力就用来封装基础API制作各种库，这就形成了第二个阶段——框架层。
二、框架层（各类前端库）
JQuery、YUI、Zepto、以及针对H5中canvas的游戏库Lufylegend等等，主要为了解决浏览器原生API不好用和兼容问题，即对原型API做了二次封装，使其更易于开发和掌握，本质上其实并没有变。在此基础上，又针对一些常用的页面组件，扩展了为插件，形成第三阶段——组件层。
三、组件层（或插件）
常用的如：日历选择器、富文本编辑器、图片轮播等等。仅仅这些还并不能适用于网络应用的全部，一些平台的业务逻辑属于——应用层
四、应用层（业务层）
如登陆注册，后台管理等等，应用层的业务逻辑通常跟后台关系密切。
如上只是传统的开发模式，随着前后端的分离，前端开发分担了越来越多业务逻辑。通过ajax或jsonp等方式与后台交互数据，然后通过拼接字符串的方式，生成浏览器识别的DOM结构与样式。这些都让前端开发越来越重，但js本身不能很好的实现模块化管理，所以出现了require、sea等AMD和CMD的模块加载框架。
Node的出现，让前端领域发生了巨大的改变，前端开发者终于可以自己开发工具了（如同猿人学会了制造工具，前端脱离了刀耕火种的年代）。随着自动化工具glup、webpack的火热，多种多样的预编译程序（如HTML模板引擎jade、Ejs等，CSS预处理器Sass、Less等），以及前端MVC、MVVM框架angular、react、vue等如雨后春笋般蜂拥出现。这让前端开发进入一次全面封装的时代，但究其本质，最后都是被编译成浏览器识别的HTML/CSS/JS。
移动端的出现，在一定程度上，也对前端技术提出了更高的要求，H5页面需要用最少的资源实现最大化的效果。
最后小程序的推出，进一步拓展了前端开发的应用领域，将应用程序存储到云端的嵌入式开发，或许是未来应用的新方向。