前端发展简史

作为一名干了10年开发的搬砖工程师，一直以来对前端是既熟悉，而更多的又陌生。熟悉是因为会使用各种常用的前端技术和框架来完成日常工作（其实主要是jQuery），而陌生则来自于近些年前端技术百花齐放的蓬勃发展所带来的各种变化。这些变化层出不穷，眼花缭乱，让人真实感觉到脑子不够用了。为了找回对自己智商的自信，也为了更好的理解前端当前的发展，我决定花点时间好好研究一下前端（不只限于前端技术）。首先，让我们从前端的发展历程开始吧。

任何一个事物从诞生到发展，再到成熟，最终走向灭亡的整个过程，都受到外部环境和内部条件等客观事实和规律的左右。就像人类文明能够发展到今天，既有很多偶然，也是必然一样。那些现在看来是偶然的历史事件，在当时的环境下，都是合理的，必然发生的。前端的发展也一样，它一路伴随着互联网的产生而产生，伴随着计算机技术和互联网的发展而发展。

第一阶段，三驾马车诞生，拉开前端发展序幕

20世纪70年代，互联网诞生，诞生之初的互联网，仅仅只是在电脑之间传输和显示文本，那时候，没有浏览器，没有HTML，只有TCP/IP。到了90年代，随着通过互联网传递信息并将信息链接起来的需求不断出现，迫切需要一个文件格式规范，来更好的组织互联网上的文本。1991年，在CERN工作的英国物理学家蒂姆·伯纳斯-李，提出了HTML Tags，并使用它制作了几个网页文件，为了展示这些网页，他还写了第一个网页浏览器。随后他提出WWW（World Wide Web）万维网的概念 —— 一个由许多互相链接的超文本组成的系统，通过互联网访问。并持续推动万维网的建立。1995年，IETF发布了HTML 2.0标准，这是第一个成为后续标准的依据的HTML规范。

最初的HTML，只是一种用来结构化文本信息的超文本标记语言，它本身并不包含显示样式。为了显示文本，不同浏览器都结合了自己的样式语言，读者可以通过调节这些样式来调整网页的显示方式。但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加，浏览器定义样式的语言越来越没有意义了。1994年哈肯·维姆·莱提出了CSS的最初建议，并由W3C与1996年底，发布了CSS1.0。

1994年，网景公司推出了世界上第一款商用浏览器Navigator，很快便成为世界上最流行的浏览器。随后，微软也发布了其IE浏览器，并利用Windows操作系统的捆绑销售，形成对网景的有力竞争。为了在商业上保持优势，网景不断创新浏览器产品，期望在静态HTML文档中，能加入一些动态效果。为此，网景创建了Javascript脚本语言，并大获成功。随后，微软也在IE浏览器中推出JScript语言，加入与网景的竞争。为了对两个主流的浏览器脚本语言标准化，1997年由网景、Sun、微软、Borland等公司组织及个人组成的技术委员会在ECMA（欧洲计算机制造商协会）确定定义了一种名叫ECMAScript的新脚本语言标准，规范名为ECMA-262。JavaScript成为了ECMAScript的实现之一。完整的JavaScript实现应该包含三个部分，即ECMAScript（语言核心）、DOM（文档对象模型）、BOM（浏览器对象模型）。

至此，前端三驾马车HTML、CSS、Javascript正式建立，前端也迎来了初生。在Web1.0时代，互联网以公司产生内容为主，大量的门户网站涌现。这时的前端，还是以HTML和CSS为主，Javascript辅助实现一些动态效果。所有的前端展示内容，都是由服务器端通过模板直接输出。对于前端工程师来说，这时候，工作更多的是基于三驾马车的网页模板制作。

第二阶段，默默无闻的积蓄力量，在平静中等待爆发

从1998年至2004年，网景在与微软的竞争中，逐渐落败。在浏览器领域，微软一家独大，控制了绝大部分市场份额，没有了残酷的商业竞争，浏览器产品的创新和发展也开始放慢了脚步。随着互联网的高速发展，以雅虎为代表的大型互联网公司纷纷快速崛起，在这个蛮荒的年代，大部分公司都把注意力放到了通过内容获取流量，争夺更多的用户上，对于前端技术创新的需求也逐渐减弱了。这些因素综合作用，导致前端的发展进入相对比较平稳的一段时期。在这几年里，一方面，前端三驾马车HTML、CSS、Javascript被大厂商和标准化组织推动，继续完善着各自的标准。1999年，W3C发布了非常重要的HTML4.0标准和CSS2.0标准。同年，ECMAScript3.0发布，成为JavaScript的通行标准。也正是在这个版本中，提出了JSON数据交换语言。另一方面，浏览器厂商，也逐步开始完善对三驾马车标准的支持。2000年微软发布的IE5，成为第一个完全支持CSS1.0的浏览器。

2000年之后，随着互联网泡沫破灭影响的逐渐消失，互联网的发展又开始慢慢恢复了生机。浏览器领域除了2001年微软发布IE6外，也开始涌现出新的面孔。2002年Firefox1.0发布，2003年Safari1.0发布，开始挑战微软的霸主地位。这个时期，也诞生了一项对后来前端发展至关重要的技术——Ajax。微软在IE5中，实现了XMLHttpRequest接口，允许Javascript发出异步HTTP请求，标志着Ajax技术诞生。

第三阶段，Ajax广泛应用带来前端大爆发，人人都是前端工程师

2005年，搜索巨头Google在其发布的多款交互式Web应用程序（如Gmail、Google地图、Google讨论组）中，采用Ajax异步通信技术，实现了良好的用户体验和互动效果，让Ajax技术迅速引起大家的注意。随着《Ajax: A New Approach to Web Applications》一文的迅速流传，人们开始有意识的在应用中使用Ajax技术。

Ajax技术的广泛使用，既顺应了Web2.0以用户为中心交互的特点，也强烈的改变了前端的工作内容。在没有采用Ajax技术之前，前端展示的所有内容，都来自服务端的输出，用户的交互行为大部分也都需要与服务器做一次完整的交互，并重新获取全部内容。而且由于Javascript不具备发送HTTP请求的能力，也限制了Javascript只能做一些仅限于前端的动态效果，而无法直接实现与服务端交互相结合的动态效果。而Ajax的广泛应用，完全释放了Javascript作为浏览器端脚本语言的威力，与服务端的交互能力结合对DOM的操作，使得Javascript可以优雅的完成更多的工作，也使得Web开发前后端的完全分离成为了可能。

正是Ajax技术的广泛应用，使得Javascript在前端领域的作用凸显了出来，也推动了前端技术在Javascript领域的飞速发展。随着Javascript能力的增强，人们对前端的需求也逐渐变得丰富起来。为了方便使用Javascript来进行各种前端的操作，迄今为止最流行的Javascript类库jQuery应运而生。2006年，jQuery1.0发布，主要提供了便捷的DOM操作、创建动画效果、处理事件及Ajax操作等功能。由于其简单易用的编程模型和跨平台支持的特性，jQuery在随后几年里一路高歌猛进，很快成为了大部分前端Web应用共同的第一选择。jQuery的成功，一方面得益于Web2.0时代人们对于具备良好交互能力的前端需求的爆发，另一方面，也得益于其构建的庞大的插件生态系统，为前端研发提供了大量便利的工具库，极大的降低了前端研发的复杂性。越来越多的人开始投身并关注前端研发工作，越来越多的大公司开始重视前端研发工作。投身前端研发的人一多起来，各种需求、想法和实践便开始层出不穷，前端迎来了有史以来最开放、最多元化的发展阶段。

第四阶段，百家争鸣，百花齐放，眼花缭乱的前端发展图谱

从2008年开始，随着互联网的快速发展和前端能力的增强，互联网行业对前端的期望和需求也越来越大。前端开始承担越来越多、越来越复杂的功能。为了让前端更好的适应这种变化，各路大神和大企业开始关注前端技术的方方面面，帮助前端建立完成大型应用开发的能力。一时间，各种前端框架、UI工具库、语言标准、模块化、工程化工具等如雨后春笋般涌现。

从2008年开始，人们对前端用户体验的追求越来越极致。Web应用桌面化的想法逐渐开始出现。随着SPA（Single Page Application）单页Web应用等概念被提出来并付诸实践，前端项目的代码越来越庞大，越来越复杂。为了更好的组织前端代码，受服务端一直采用的MVC架构模式的启发，前端领域也产生了各种基于MV*架构（MVC、MVP、MVVM等）的框架。如适合开发大型应用的大而全的AngularJS、EmberJS、KnockoutJS，适合开发小型应用的小巧的BackboneJS等。与此同时，关注MV*架构中一些关键问题的更精致和专注的类库也逐步发展起来。比如重点关注前端用户界面构建的框架，特别是UI组件化方案的ReactJS、VueJS等，以及关注UI组件间状态管理，能够更React配合使用的Redux。

2008年，Google发布新一代Javascript执行引擎V8，这个高性能的嵌入式Javascript执行引擎，一方面大幅提高了Javascript的执行效率，同时也为在非浏览器环境下执行Javascript提供了可能。2009年，对于Javascript来说具有划时代意义的NodeJS诞生，它使得过去只是在前端使用的Javascript语言，能够用来构建高性能的服务端应用。这极大的激发了Javascript工程师的工作热情，全栈工程师成为了他们的新目标。为了让NodeJS能够在服务器端开发中大显身手，很多优秀的Javascript工程师向NPM提交了大量高质量的第三方功能包，使得NodeJS的生态系统迅速发展。就像之前Ajax的广泛应用和jQuery及其生态系统的发展推动前端领域快速发展一样。NodeJS的出现及其基于NPM的生态系统的发展，又一次极大的释放了Javascript的能力。进一步推动Javascript朝着工程化、模块化方向发展。

随着Javascript在前后端都开始大显身手，应用的复杂性开始显著增加。对Javascript模块化的需求也越来越强烈。出现了基于AMD的RequireJS，和基于CMD的CommonJS、SeaJS。在ECMA2016标准里，也正式提出了模块化标准。包、模块等软件工程的概念在Javascript的工程里出现，随之而来的就是对于项目的依赖管理、打包、构建等软件工程工具的需求也应运而生。出现了Webpack、Grunt、Gulp等依赖管理和构建工具。

回顾前端从90年代初诞生到现在的发展历史，大部分的创新和发展都集中在Javascript领域。推动Javascript发展的最重要的两个阶段，一是Ajax的广泛应用和jQuery及其生态的发展，二是NodeJS的广泛应用和NPM生态的发展。在这两个阶段，Javascript能力得到了重大升级，使得Javascript能够在更大的舞台展现自己。从最开始只是在浏览器端完成一些简单的动态效果，到现在能够被用来构建前后端统一的，大型的高性能应用。我们可以预见Javascript还有很多发展空间。未来，一方面Javascript会继续在工程化方面加强自己的能力，另一方面，它也会深刻的影响当前主流的开发模式。我们可以大胆的想象，随着客户端计算能力的增强，应用开发领域完全可能实现类似Svn到Git的去中心化的升级。在每个客户端，都是一个完整的基于Javascript的前后端应用，各个客户端之间互相备份。