1、互联网的初期，围绕着如何能构建更好的页面展开
互联网伊始以HTML-超文本标记语言为基础的网页开发开始引发了每一个普通人的注意，当网景公司开创了最先的图文浏览器时，全世界的目光都聚焦在这个窗口上。经过网络IP地址访问各类各样的网页是最初人们网上冲浪的兴趣所在。
可是人性的懒惰是根深蒂固的，IP地址的逆人性特质很快就遭到了嫌弃。因而便于记忆的域名技术应运而生，其本质上解决的是便于记忆，方便使用。域名须要绑定对应的IP地址才能实现访问，因此须要有一个域名解析服务器（DNS）去作这件简单的使人发指的事情。
看似风平浪静的繁华，实际上只是暗流涌动的假象。互联网的属性本就是人人参与，也就意味着每一个开发者的习惯都是截然不同的，这也是为何HTML这个语言有那么多废弃的标签的缘由——人们只想单纯的实现本身的效果，标签上的style属性已经不能知足于人们疯狂的诉求。因而<center><font> <color> <s><strong>等一系列标签解决了燃眉之急。这样发展下去根本不利于后期的维护和扩展，因而人们发明了CSS-层叠样式表来解决这个问题。经过编写和维护一份样式代码多个页面实现统一的效果。
后来人们有了搜索或者登陆的需求场景，有了最先的用户交互行为，当时的网速不好（以kb为单位），用户输入信息提交后，须要等很长时间才能从服务器返回结果，结果返回了一个错误，这样的交互体验是极差的。网景公司首先想到了这一点，让布兰登开发一种在浏览器运行的脚本语言，经过发送信息前校验用户的输入，优化交互体验，这个仅用了10天就创造出来的语言就是LiveScript，因为当时背景下SUN公司的Java语言很火爆，因而网景公司顺势将该语言改名javascript——请注意javascript与Java一点关系都没有，可是两个语言都有互相借鉴的部分。
至此，前端三大技术基本成型。javascript提供的DOM和BOM对象，实现了操做页面文档和浏览器的api接口，微软发布IE也实现了操做DOM和BOM的功能-JScript，愈来愈多的浏览器开始出现，致使了开发人员要编写兼容性的代码，这让项目开始变得难以维护。互联网的创始人蒂姆伯纳斯李组建了W3C组织来制定互联网技术的相关技术标准，第一次浏览器大战落下帷幕。
2、互联网的发展期，围绕着如何能构建更好的交互体验展开
为前端带来转折的是一种异步通信的技术-Ajax-Async JavaScript and XML。Ajax经过异步请求的方式，能够在不刷新整个页面的状况下更新页面的数据，第二次浏览器大战就此展开。网景此时已经将精力关注在1：1对ECMA标准实现的FireFox上，IE发布了4-6，Safari和Chrome也加入进来，还有Opera，这就是5大主流浏览器和5大浏览器内核的由来。
Ajax为前端开发带来了全新的交互方式和更友好的用户体验，在这个进程中各类javascript库百花齐放。protoType ，DOJO，雅虎的YUI，Ext JS，Mootools，还有jQuery。可是jQuery凭借着先天的优点——轻量的体积，完善的兼容性，强大的选择器，链式操做，事件处理机制和完善的Ajax，以Write less, do more为设计核心迅速的成为了javascript库的佼佼者。
浏览器的同源策略是为了提高其安全性的一种机制，可是多服务器部署方式，让开发者甚是头痛。为了解决使用其余服务器文件资源，一种新的技术产生了——JSONP，经过使用具有跨域能力的Script标签，引用其余服务器资源，并经过callback回调的方式实现数据的交互。
跨域原本是一种很友好的方式，可是其安全性也一再接收考验，XSS跨站脚本攻击一时间狼烟四起。为了应对这个安全问题——跨站资源共享方案出现了，经过在服务器端设置可接收的访问方式，设置请求头类型来防范XSS等网络攻击。固然还有再也不常常用到的iframe，也有相似的遭遇。
当解决了API兼容性的问题后，前端进入了快速的发展时期，2007年随着移动设备的出现——移动互联网的时代开启了。对移动设备来讲流量是他们关注的核心，移动端项目的第一任务是解决应用体积的问题，以及页面的性能。Zepto库的出现偏偏是移动端的一个型号，移动端轻量级的标准开始普及开来。随着移动终端的屏幕尺寸愈来愈多，另外一个问题出现了——如何能开发一套代码适配多个移动终端设备？——响应式布局方案出现了。经过编写一套代码适配多种移动终端设备，便于维护减小成本。
这个时期，以bootstrap为表明的UI框架出现了，也表明着前端进入了繁荣时期。经过使用媒体查询API能够动态的设置页面的展现效果，从而在不一样移动终端呈现完美的布局和交互。
3、互联网的成熟期，当技术愈发成熟，更快更友好的构建应用变得可能
当前端应用的体积迅速增大后，经过压缩和合并方式，减小项目体积的工具大量涌现。UglifyJS，gulp,grount都是具备表明性的相关工具。而页面的数量缺并无减小，人们经过抽取公共代码的形式，将项目拆分红不一样的页面结构——组件的模糊概念呼之欲出。经过组合不一样的页面结构，能够减小不少的维护成本，还有开发量。目前市面上仍是能看到不少经过这种方式实现的项目。如今，webpack将全部的工程开发的工做集成一体，配置简单易学，但却功能强大。
最早到来的是模块化，requirejs,seajs是这一时期很有表明性的两个库，经过将不一样的功能代码拆分，在不一样的页面中将模块注入，来实现业务层和视图层解耦。包括后期的commonjs都是在解耦的路上越走越远。AMD规范和CMD规范是针对模块化开发的两种实现方式，它们都是为了实现解耦而出现。紧接着对前端来讲具备里程碑意义的angular出现了,同时表明着前端进入了框架时代。这相似于Java之于Spring Boot框架，经过将通用的模块进行封装成库，减小了不少入坑的难题。让开发人员不用再为了项目环境抓紧掣肘。
对于前端来讲，这一切都要归功于 nodejs的诞生，将前端开发集成化和工程化开发推向了顶峰。angularjs经过将前端抽象成数据层，控制器层，视图层开启了一个单页面应用的时代。这一方式充分的实践了MVC开发思想。angularjs经过使用指令的方式实现DOM操做，事件绑定，路由控制，而且经过原生JS编写相应的业务逻辑——固然其中还有单向数据流的开发思想实现。也正是由于angularjs，使得后来的不少框架借鉴了其优点，让前端的开发方式变得愈加轻松。
当facebook面对一样的项目开发问题的时候，发现当时的全部开发方式都不符合本身的预期。因而，facebook开发了一套开源的前端框架——react，经过JS的新特性，和良好的性能体验，迅速得到了开发者的拥护。react在性能上的创新来自于虚拟DOM，经过虚拟DOM与真实DOM的比较修改对应的节点，以此来提升性能。然后来的Flux和redux都是借鉴angularjs的单向数据流思想的一种实现。经过使用状态管理模块，实现数据的可预测，以及数据状态的集中管理和分发。
当国内还处于基础的前端开发阶段时，一个适合国内开发者的前端框架诞生了——vuejs。其同时借鉴了angular和react，将这两个框架的核心思想一指令，虚拟DOM一继承和发扬光大。vuejs经过完美的封装，解决了开发者的学习难度和成本。更加轻量的文件体积，更加优秀的性能，以及直观的开发方式，迅速在开发者中引爆开来。经过编写更少的代码，实现更多更丰富的交互。
至此, 前端框架三足鼎立，但同时又另外一个问题浮出水面。如此多的项目技术栈，如何才能更快的搭建开发环境？——这就是脚手架工具的由来，经过简单的几行指令快速的搭建一个项目，迅速上手任何框架没有任何压力。而大部分的脚手架工具都选择webpack最为基础配置，足以说明其的简洁配置和性能优越。
2009年开始，大屏智能手机开始陆续出现，到后来 4G 移动网络的普及。使得前端从单一的基于的 PC 浏览器 展现的 web 应用，开始向手机、平板覆盖（HTML，CSS，JavaScript 也陆续推出了本身的新标准）。前端对于跨端浏览的需求愈来愈大，前端再也不仅仅是 PC web 方面的开发，手机配置，与 app 进行 hybird 开发，变成了常态。甚至于 Facebook 推出了 React-Native，国内微信、支付宝推出小程序，试图整合web、native 开发。为何会有这样的情形发生呢，网速愈来愈快，硬件性能愈来愈好，js 在各个终端的运行能力与 native 开发（IOS、Android）的差距愈来愈小，就让咱们搞事儿（喜欢偷懒）的程序员们想着能不能写一套代码，而后四处运行呢。javascript
能的，这个能够有，React-Native，小程序，以致于后来出现的 Electron，使得用 JavaScript 开发桌面应用都成为了可能（VSCode）。谷歌近两年也推出了 Flutter 的开发语言，能够实现一套代码，多处运行（web、app）。前端真的再也不是只能切图，开发静态页面的前端。后端能够搞、爬虫能够搞（node），app 能够写（Weex、RN、Flutter），桌面应用能够开发（Electron）,算法和语言的严谨性还有点短板，可是 TypeScript 的出现，以及后续 ECMA 标准的近一步完善，会使得前端更加的全能化，也可能会出现更多的细分工做领域。前端