一. 上古时代：(1990-2004)
这个时期，浏览器的开发者，以后台开发人员居多，大部分前后端开发是一体的，大致开发流程是：后端收到浏览器的请求 ---> 发送静态页面 ---> 发送到浏览器。即使是有专门的前端开发，也只是用 HTML 写写页面模板、CSS 给页面排个好看点的版式（要不是我堂堂程序员看不上这点活，你们这些个切图仔就得要饭去~）
1、静态页面阶段
那是1990年的12月25日，恰是西方的圣诞节，Tim Berners-Lee在他的NeXT电脑上部署了第一套“主机-网站-浏览器”构成的Web系统，这标志BS架构的网站应用软件的开端，也是前端工程的开端。
1993年4月Mosaic浏览器作为第一款正式的浏览器发布。1994年11月，鼎鼎大名的Navigator浏览器发布发布了，到年底W3C在Berners-Lee的主持下成立，标志着万维网进入了标准化发展的阶段。
这个阶段的网页还非常的原始，主要以HTML为主，是纯静态的只读网页。
2、Javascript诞生及第一次浏览器战争
1995年，NetScape公司的工程师Brendan Eich设计了javascript脚本语言，并集成到了navigator2.0版本中。随后微软也意识到了javascript的潜力，并模仿开发VBScript和JScript应用到了IE中，这直接开启了NetScape和微软的浏览器竞争。
由于微软的IE集成在windows操作系统上的优势，NetScape的navigator很快在浏览器市场上落于下风。于是他们把javascript提交到了ECMA，推动制订了ECMAScript标准，成功实现了javascript的标准国际化。虽然第一次浏览器战争最后IE大胜Navigator，但是NetScape的javascript主导了W3C的官方标准。
3、动态页面的发展
Javascript的诞生之初，就给网页带来了一些跑马灯、浮动广告之类的特效和应用，让网页动了起来。但是网页真正开始向动态交互发展的开端，却是PHP、JSP和ASP为代表的后端动态页面技术的出现。
这些服务器端的动态页面技术使得网页可以获取服务器的数据信息并保持更新，推动了Google为代表的搜索引擎和各种论坛的出现，万维网开始快速发展。
服务器端网页动态交互功能的不断丰富，伴随的是后端逻辑的复杂度快速上升，代码越来越复杂。为了更好的管理后端逻辑，出现了大量后端的MVC框架。
二. 小前端时代：(2004-2008)
不管怎么说，前端开发也算是能写点逻辑代码了，不再是只能画画页面的低端开发了。随着AJax 的流行，前端开发从 web1.0迈向了web2.0，前端从纯内容的静态展示，发展到了动态网页，富交互，前端数据处理的新时期。
由于动态交互、数据交互的需求增多，还衍生出了jQuery（2006） 这样优秀的跨浏览器的 js 工具库，主要用于 DOM 操作，数据交互。有些古老的项目，甚至近几年开发的大型项目现在还在使用 jQuery，以至于 jQuery 库现在还在更新，虽然体量上已经远远不及 React、Vue 这些优秀的前端库。
4、Ajax的流行开启Web2.0时代
2004年前的动态页面都是由后端技术驱动的，虽然实现了动态交互和数据即时存取，但是每一次的数据交互都需要刷新一次浏览器。频繁的页面刷新非常影响用户的体验，这个问题直到谷歌在2004年应用Ajax技术开发的Gmail和谷歌地图的发布，1998年 出现的AJax 才得到了重视，流行了起来。
这背后的秘密就是Ajax技术中实现的异步HTTP请求，这让页面无需刷新就可以发起HTTP请求，用户也不用专门等待请求的响应，而是可以继续网页的浏览或操作。
Ajax开启了web2.0的时代。
三. 大前端时代：(2008-2015)
自 2004 以后，前端发展渡过了一段比较平稳的时期，各大浏览器厂商除了按部就班的更新自己的浏览器产品之外，没有再作妖搞点其他事情。但是我们程序员们耐不住寂寞啊，工业化推动了信息化的快速到来，浏览器呈现的数据量越来越大，网页动态交互的需求越来越多，JavaScript 通过操作 DOM 的弊端和瓶颈越来越明显（频繁的交互操作，导致页面会很卡顿），仅仅从代码层面去提升页面性能，变得越来越难。于是优秀的大佬们又干了点惊天动地的小事儿：
- 2008 年，谷歌 V8 引擎发布，终结微软 IE 时代。
- 2009 年 AngularJS 诞生、Node诞生使得前端人员也能开发服务器端程序。
- 2011 年 ReactJS 诞生。
- 2014 年 VueJS 诞生。
- 2015年6月，ECMAScript 6.0，现已更名ES2015
5、前端兼容性框架的出现
NetScape在第一次浏览器之战中败给了IE之后，创办了Mozilla技术社区，该社区之后发布了遵循W3C标准的firefox浏览器，和Opera浏览器一起代表W3C阵营和IE开始了第二次浏览器战争。
不同的浏览器技术标准有不小的差异，不利于兼容开发，这催生了Dojo、Mooltools、YUIExtJS、jQuery等前端兼容框架，其中jQuery应用最为广泛。
6、HTML5出现及第二次浏览器战争
Mozilla和Opera在2004年6月提议W3C扩展HTML和DOM的Web Forms 2.0 草案被否决后，一些浏览器厂商便成立了网页超文本应用技术工作小组（WHATWG），提出了Web Applications 1.0规范草案，这两种规范后来合并成为HTML5。W3C在2007年接纳了HTML5草案规范，并成立了新的HTML工作团队，在2008年1月22日，HTML5正式草案发布。
在HTML5新规范的指引下，各个浏览器厂商都为了支持HTML5而不断改进浏览器，第二次浏览器战争走向了良性竞争。值得注意的是，谷歌以javascript引擎V8为基础研发的Chrome浏览器发展迅猛。
2014年10月28日，W3C正式发布HTML5.0推荐标准。
7、Node.js爆发
2009年，Ryan Dahl以Chrome的V8引擎为基础开发了基于事件循环的异步I/O框架-Node.js。
Node.js使得前端开发人员可以利用javascript开发服务器端程序，深受前端开发人员的欢迎。很快，大量的Node.js使用者就建构了一个用NPM包管理工具管理的Node.js生态系统。
Node.js也催生了node.webkit等项目，拓展了javascript开发跨平台的桌面软件的能力。
8、前端MVC、MVVM架构及SPA时代的开启
随着各大浏览器纷纷开始支持HTML5，前端能够实现的交互功能越多，相应的代码复杂度也快速提高，以前用于后端的MV*框架也开始出现在前端部分。从2010年10月出现的Backbone开始，Knockout、Anjular、Ember、Meteor、Vue相继出现。
这些框架的运用，使得网站从Web Site进化成了Web App，开启了网站应用的SPA（Single Page Application）的时代。
9、移动Web和Hybrid App
随着智能手机的发展，移动端成了重要的信息和流量端口，为了满足不同移动端浏览器的兼容需求，发展出了jQuery Mobile、Sencha Touch、Framework7等框架。
Hybrid技术指的是利用Web开发技术，调用Native相关的API，实现移动与Web二者的有机结合，既能利用Web开发周期短的优势，又能为用户提供Native的体验。
Native App的性能和UI体验依然比移动Web App要好，但移动Web开发成本低、跨平台、发布周期短的特点不容忽视，未来可期。
10、ECMAScript6
2015年6月，ECMAScript 6.0发布，该版本增加了很多新的语法，极大的拓展了javascript的开发潜力。由于浏览器ES6语法的支持滞后，出现了Babel和TypeScript来把ES6代码编译成ES5等现有浏览器支持的代码。
ES6现已更名为ES2015，以后每年会发布新的ES标准，这标志着javascript的发展将会更快。
四. 全能前端时代：(2015-2020)
随着网速越来越快，硬件性能越来越好，js 在各个终端的运行能力与 native 开发（IOS、Android）的差距越来越小，就让我们搞事儿（喜欢偷懒）的程序员们想着能不能写一套代码，然后四处运行呢。
能的，这个可以有，React-Native，小程序，以至于后来出现的 Electron，使得用 JavaScript 开发桌面应用都成为了可能（VSCode）。谷歌近两年也推出了 Flutter 的开发语言，可以实现一套代码，多处运行（web、app）。前端真的不再是只能切图，开发静态页面的前端。后端可以搞、爬虫可以搞（node），app 可以写（Weex、RN、Flutter），桌面应用可以开发（Electron）,算法和语言的严谨性还有点短板，但是 TypeScript 的出现，以及后续 ECMA 标准的近一步完善，会使得前端更加的全能化，也可能会出现更多的细分工作领域。
11、今天的前端
今天的前端技术已经形成了一个大的技术系统。
以Github为代表的代码管理仓库；NPM和Yarn为代表的包管理工具；ES6及Babel和TypeScript构成的脚本体系；HTML5；CSS3和相应的处理技术；React、Vue、Anjular为代表的框架；Webpack为代表的打包工具；Node.js为基础的Express和KOA后端框架；Hybrid技术。