一、互联网的初期，围绕着如何能构建更好的页面展开
互联网伊始以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组织来制定互联网技术的相关技术标准，第一次浏览器大战落下帷幕。
二、互联网的发展期，围绕着如何能构建更好的交互体验展开
为前端带来转折的是一种异步通讯的技术-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可以动态的设置页面的展示效果，从而在不同移动终端呈现完美的布局和交互。
三、互联网的成熟期，当技术愈发成熟，更快更友好的构建应用变得可能
当前端应用的体积迅速增大后，通过压缩和合并方式，减少项目体积的工具大量涌现。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）的差距越来越小，就让我们搞事儿（喜欢偷懒）的程序员们想着能不能写一套代码，然后四处运行呢。
能的，这个可以有，React-Native，小程序，以至于后来出现的 Electron，使得用 JavaScript 开发桌面应用都成为了可能（VSCode）。谷歌近两年也推出了 Flutter 的开发语言，可以实现一套代码，多处运行（web、app）。前端真的不再是只能切图，开发静态页面的前端。后端可以搞、爬虫可以搞（node），app 可以写（Weex、RN、Flutter），桌面应用可以开发（Electron）,算法和语言的严谨性还有点短板，但是 TypeScript 的出现，以及后续 ECMA 标准的近一步完善，会使得前端更加的全能化，也可能会出现更多的细分工作领域。