前端发展简史

前端的发展进程本质上是互联网发展进程的具体表现，从最初的局域网到现在的全球互联，每次的技术变革和演化都是所见即所得。前端是从web应用开发分离出来的用户层，也就是用户接口，直接与每一个用户进行交互，通信技术的发展促进了很多前端技术的变革。作为一名准备或者已经从事前端开发的编程人员，知其然更要知其所以然，招式固然重要，内功心法才能让功力大增。

互联网的初期，围绕着如何能构建更好的页面展开

互联网伊始以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最为基础配置，足以说明其的简洁配置和性能优越。

自从乔帮主推出iphone，以及谷歌扶持安卓以来，iOS和安卓阵营就APP之争就没有停止过。iOS一直以流畅性和优秀的交互著称，而安卓以开源的方式提供给各大厂商“深度定制”。但在APP开发上都是需要为用户提供流畅的用户体验的。也因此原生APP开发独领风骚多年，原生app开发的需求也日渐疯狂。而开发原生APP后期在时间和成本上已经越发笨重，混合APP的趋势开始显露，web APP由于性能和体验问题并没有什么优势可言。

最早以react-native为开端，混合APP开始出现，从流畅性和交互上几乎可以与原生APP相媲美。这也是国内后来很多初创型公司的APP首选开发方式，并且通过热更新的方式，实现了快速迭代需求和优化功能。虽然不能完全取代原生APP，但是多种实现方式，本身就是互联网技术开放的本质。Lonic也是一个混合APP的前端开发框架，多年来一直保持着可观的热度。

当然还有桌面应用开发，仍然要感谢nodejs让javascript这门浏览器上的脚本语言，跨越了浏览器这个宿主环境，走向越来越广阔的平台。桌面应用开发以NWjs 和 Electron为代表，通多javascript这门语言前端开发者可以编写桌面级的应用，并且与系统应用别无二致。

小结

以上就是前端从上世纪90年代发展至今的相关简史，如有不足欢迎指正。通过梳理相关的技术时间线，使自己更加清晰的了解这些年的技术方向，以及相关基础知识的不足。以此激励自己在以后的道路上继续保持旺盛的好奇心，学习更新更新的技术知识。