Web发展简史

起源

  时至今日，Web发展从有到无，从繁到简，随着时间的推移，Web发展也越来越快，在发展的过程中也诞生了很多实用的语言。本篇博客将从时间的角度上来讲述Web从有到今的发展过程。

前端开发的定义

  从狭义的定义来看，“前端开发”是指围绕HTML、JavaScript、CSS这样一套体系的开发技术，它的运行宿主是浏览器。从广义的定义来看，其应该包括：

• 专门为手持终端设计的类似WML这样的类HTML语言，以及类似WMLScript的类JavaScript语言。

• VML和SVG等基于XML的描述图形的语言。

• 从属于XML体系的XML，XPath，DTD等技术。

• 用于支撑后端的ASP，JSP，ASP.net，PHP，Nodejs等语言或者技术。

• 被第三方程序打包的一种类似浏览器的宿主环境，比如Adobe AIR和使用HyBird方式的一些开发技术.

• Adobe Flash，Flex，Microsoft Silverlight，Java Applet，JavaFx等RIA开发技术。

本博客主要从“web前端”，也即狭义前端的角度出发，以人类科技进步划时代的方式，将前端开发划分为几个重要的时代，带领大家领略一下前端这十几年来的发展历程。

石器时代

   最早期的Web界面基本都是在互联网上使用，人们浏览某些内容，填写几个表单并且提交。当时的界面以浏览为主，基本都是HTML代码.HTML

1、1990 HTML

   1990年，Tim以超文本语言HTML为基础在NeXT电脑上发明了最原始的Web服务器。

  1991 年，Tim 作为布道者在 Internet 上广泛推广 Web 的理念，与此同时，美国国家超算应用中心（National Center for Supercomputer Applications）对此表现出了浓厚的兴趣，并开发了名为 Mosaic 的浏览器，于 1993 年 4 月进行了发布。

2、1994 HTML 2.0 规范发布

  1994 年 11 月，Mosaic 浏览器的开发人员创建了网景公司（Netscape Communications Corp.），并发布了 Mosaic Netscape 1.0 beta 浏览器，后改名为 Navigator。

  1994 万维网联盟（World Wide Web Consortium）成立，简称 W3C
1994 年底，由 Tim 牵头的万维网联盟（World Wide Web Consortium）成立，这标志着万维网的正式诞生。

3、1995 JavaScript

  1995 年，网景工程师 Brendan Eich 花了10天时间设计了 JavaScript 语言。起初这种脚本语言叫做 Mocha，后改名 LiveScript，后来为了借助 Java 语言创造良好的营销效果最终改名为 JavaScript。网景公司把这种脚本语言嵌入到了 Navigator 2.0 之中，使其能在浏览器中运行。

  与此相对的是，1996 年，微软发布了 VBScript 和 JScript。JScript 是对 JavaScript 进行逆向工程的实现，并内置于 Internet Explorer 3 中。但是 JavaScript 与 JScript 两种语言的实现存在差别，这导致了程序员开发的网页不能同时兼容 Navigator 和 Internet Explorer 浏览器。 Internet Explorer 开始抢夺 Netscape 的市场份额，这导致了第一次浏览器战争。

4、第一次浏览器战争

  1996 年 11 月，为了确保 JavaScript 的市场领导地位，网景将 JavaScript 提交到欧洲计算机制造商协会（European Computer Manufacturers Association）以便将其进行国际标准化。

• 1996.12 W3C 推出了 CSS 1.0 规范

• 1997.1 HTML3.2 作为 W3C 推荐标准发布

• 1997.6 ECMA 以 JavaScript 语言为基础制定了 ECMAScript 1.0 标准规范

  1997 年 6 月，ECMA 以 JavaScript 语言为基础制定了 ECMAScript 标准规范 ECMA-262。JavaScript 是 ECMAScript 规范最著名的实现之一，除此之外，ActionScript 和 JScript 也都是 ECMAScript 规范的实现语言。自此，浏览器厂商都开始逐步实现 ECMAScript 规范。

• 1997.12 HTML 4.0 规范发布

• 1998 W3C 推出了 CSS 2.0 规范

• 1998.6 ECMAScript 2 规范发布

   1998 年 6 月，ECMAScript 2 规范发布，并通过 ISO 生成了正式的国际标准 ISO/IEC 16262 。

• 1999.12 ECMAScript 3 规范发布

  1999 年 12 月，ECMAScript 3 规范发布，在此后的十年间，ECMAScript 规范基本没有发生变动。ECMAScript 3 成为当今主流浏览器最广泛使用和实现的语言规范基础。

  第一次浏览器战争以 IE 浏览器完胜 Netscape 而结束，IE 开始统领浏览器市场，份额的最高峰达到 2002 年的 96%。随着第一轮大战的结束，浏览器的创新也随之减少。

青铜时代

  青铜时代的典型标志是出现了组件化的萌芽，着眼点主要在文件的划分上。后端组件化比较常见的做法是，把某一类后端功能单独做成片段，然后其他需要的地方来include进来，典型的有：ASP里面数据库连接的地方，把数据源连接的部分写成conn.asp，然后其他每个需要操作数据库的asp文件包含它。浏览器端则通常针对JavaScript脚本文件，把某一类的Javascript代码写到单独的js文件中，界面根据需要，引用不同的js文件；针对界面组件，则通常利用frameset和iframe这两个标签。某一大块有独立功能的界面写到一个HTML文件，然后在主界面里面把它当作一个frame来载入，一般的B/S系统集成菜单的方式都是这样的。是不是觉得很熟悉？对的，现在大多公司的内部系统正是这个时代的产物。

  此外，还出现了一些基于特定浏览器的客户端组件技术，比如IE浏览器的HTC（HTML Component）。这种技术最初是为了对已有的常用元素附加行为的，后来有些场合也用它来实现控件。微软ASP.NET的一些版本里，使用这种技术提供了树形列表，日历，选项卡等功能。HTC的优点是允许用户自行扩展HTML标签，可以在自己的命名空间里定义元素，然后，使用HTML，JavaScript和CSS来实现它的布局、行为和观感。这种技术因为是微软的私有技术，所以逐渐变得不那么流行。Firefox浏览器布其后尘，也推出过一种叫XUL的技术，也同样没有流行起来。
  

---

  随着动态页面技术的不断发展，后台代码变得庞大臃肿，后端逻辑也越来越复杂，逐渐难以维护。此时，后端的各种MVC框架逐渐发展起来，以JSP为例，Strut、Spring等框架层出不穷。随着Ajax的出现以及配合着JSP框架的兴起，Web服务器逐渐进入下个阶段。
  

铁器时代

1、Ajax

  在Web最初发展阶段，前端页面要想获取后台信息需要刷新整个页面。为了解决这个糟糕的问题，Ajax异步提交逐渐流行起来。AJAX其实是一系列已有技术的组合，早在这个名词出现之前，这些技术的使用就已经比较广泛了，Google 分别在 2004 年和 2005 年先后发布了两款重量级的 Web 产品：Gmail 和 Google Map。这两款 Web 产品都大量使用了 AJAX 技术，不需要刷新页面就可以使得前端与服务器进行网络通信，这虽然在当今看来是理所应当的，但是在十几年前AJAX却是一项革命性的技术，颠覆了用户体验。

  随着 AJAX 的流行，越来越多的网站使用 AJAX 动态获取数据，这使得动态网页内容变成可能，像 Facebook 这样的社交网络开始变得繁荣起来，前端一时间呈现出了欣欣向荣的局面。

  由于Ajax的出现，规模更大，效果更好的Web程序逐渐出现，在这些程序中，JavaScript代码的数量迅速增加。出于代码组织的需要，“JavaScript框架”这个概念逐步形成，当时的主流是Prototype和Mootools，两者各有千秋，提供了各自方式的面向对象组织思路。

2、JavaScript基础框架

  Prototype框架主要是为JavaScript代码提供了一种组织方式，对一些原生的JavaScript类型提供了一些扩展，比如数组、字符串，又额外提供了一些实用的数据结构，如：枚举，Hash等，除此之外，还对dom操作，事件，表单和Ajax做了一些封装。

  Mootools框架的思路跟Prototype很接近，它对JavaScript类型扩展的方式别具一格，所以在这类框架中，经常被称作“最优雅的”对象扩展体系。

  从这两个框架的所提供的功能来看，它们的定位是核心库，在使用的时候一般需要配合一些外围的库来完成。

  除以上两者以外，还有YUI，jQuery等，JavaScript基础框架在这个时代算得上是百花齐放，但是时间已经证明，真正的王者是jQuery。

3、jQuery

  在早年的js编程，代码的效率是极其低下的，这点尤其体现在操作DOM上。对于编程老手来说，将常用的操作封装即可，这些都不是问题，但是对于不会封装的新手，会很难，尤其再加上各种各样的兼容。2006年，本着拯救菜鸟，让他们do more的宗旨，jquery诞生。jQuery诞生的意义，一是对ie6 7 8 及各种割据一方的浏览器做好了兼容，二是极大简化了dom操作，使开发效率大大提升。jquery很火爆，火爆的有些前端只会写jquery而不会写原生js的程度。时至今日，说jquery write once，see everywhere已经不为过了.jQuery与其他的基础框架都有所不同，它着眼于简化DOM相关的代码。例如：

• DOM的选取

  jQuery提供了一系列选择器用于选取界面元素，在其他一些框架中也有类似功能，但一般没有它简洁而强大。

$("*")//选取所有元素 $("#lastname")//选取id为lastname的元素
$(".intro")//选取所有class=“intro"的元素
$(“p”)//选取所有<p>元素
$(”.intro.demo")//选取所有 class="intro"且class="demo"的元素

-链式表达式
  在jQuery中，可以使用链式表达式来连续操作DOM，如果不使用链式表达式，可能需要这么写：

var neat = $(“p.neat”);
neat.addClass(“ohmy”);
neat.show(“slow”);

但是有了链式表达式，一行代码就可以搞定：

$(“p.neat”).addClass(“ohmy”).show(“slow”);

4、第二次浏览器大战

• 前端兼容性框架出现
    IE 在第一次浏览器大战中击败 Netscape 赢得胜利，垄断了浏览器市场。作为独裁者，IE 并不遵循 W3C 的标准，IE 成了事实标准。

  Netscape 于 1998 年被 AOL 收购前创建了 Mozilla 社区，Firefox 于 2004 年 11 月首次发布，并且 9 个月内下载量超过 6000 万，获取了巨大的成功，IE 的主导地位首次受到了挑战， Firefox 被认为是 Netscape 的精神续作。

  之后 Firefox 浏览器一路奋起直追，逐渐蚕食 IE 市场份额，这引发了第二次浏览器战争。在 2008 年底时，Firefox 的市场份额达到了 25% 以上，IE 则跌至 65% 以下。

  第二次浏览器战争中，随着以 Firefox 和 Opera 为首的 W3C 阵营与 IE 对抗程度的加剧，浏览器碎片化问题越来越严重，不同的浏览器执行不同的标准，对于开发人员来说这是一个恶梦。

  为了解决浏览器兼容性问题，Dojo、jQuery、YUI、ExtJS、MooTools 等前端 Framework 相继诞生。前端开发人员用这些 Framework 频繁发送 AJAX 请求到后台，在得到数据后，再用这些 Framework 更新 DOM 树。

  其中，jQuery 独领风骚，几乎成了所有网站的标配。Dojo、YUI、ExtJS 等提供了很多组件，这使得开发复杂的企业级 Web 应用成为可能。
  

农业时代

1、AMD与CMD

  这个时代的标志性事件是模块加载规范（AMD以及CMD）的出现。事件是模块加载规范（AMD以及CMD）的出现。

  铁器时代出现的基础框架提供了代码的组织能力，但是未能提供代码的动态加载能力。动态加载JavaScript为什么重要呢？因为随着Ajax的普及，jQuery等辅助库的出现，Web上可以做很复杂的功能，因此，单页面应用程序（SPA，Single Page Application）也逐渐多了起来。

  单个的界面想要做很多功能，需要写的代码是会比较多的，但是，并非所有的功能都需要在界面加载的时候就全部引入，如果能够在需要的时候才加载那些代码，就把加载的压力分担了，在这个背景下，出现了一些用于动态加载JavaScript的框架，也出现了一些定义这类可被动态加载代码的规范。

• AMD
  在这些框架里，知名度最高的是RequireJS，RequireJS除了提供异步加载方式，也可以使用同步方式加载模块代码。AMD规范除了使用在前端浏览器环境中，也可以运行于NodeJS等服务端环境，但是NodeJS内置的模块机制是基于CMD规范定义的。

• CMD
  值得一提的是，在浏览器端，除了RequireJS以外，国内的牛人淘宝玉伯开发了SeaJS异步模块加载器，其遵循CMD规范，目前已经有超过300家大型web应用或站点采用，SeaJS同样简单易学。

// 所有模块都通过 define 来定义

define(function(require, exports, module){

// 通过 require 引入依赖

var $ =require('jquery');

var Spinning =require('./spinning');

// 通过 exports 对外提供接口

  exports.doSomething =...
// 或者通过 module.exports 提供整个接口

  module.exports =...

});

2、HTML5

  1999年，W3C发布了 HTML 4.01 版本，在之后的几年，没有再发布更新的 Web 标准。随着Web的迅猛发展，旧的Web标准已不能满足 Web 应用的快速增长。便有了一些公司联合起来，成立了一个叫做（Web超文本应用技术工作组 -WHATWG ）的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

  HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

• 2008.12 Chrome 发布，JavaScript 引擎 V8
  
    HTML5 草案发布不久，Google 在 2008 年 12 月发布了 Chrome 浏览器，加入了第二次浏览器大战当中。Chrome 使用了 Safari 开源的 WebKit 作为布局引擎，并且研发了高效的 JavaScript 引擎 V8。chrome浏览器的推出，将简化前端的入门程度又推进了一步，其自带的调试工具好用又无脑，我们可以利用其轻松的查看网络状态，加载顺序，进行断点调试等，同时谷歌的插件功能，又给开发者提供了极大便利。目前chrome最新版开始采用blink内核，测试版本中，已经可以对css3动画进行追踪和调试。
  
    在第二次浏览器大战中，各个浏览器厂商都以提升 JavaScript 运行效率和支持 HTML5 各种新特性为主要目标，促进了浏览器的良性竞争。在这一场战争中，Chrome 攻城略地，抢夺 IE 市场份额。2013 年，Chrome 超过 IE，成为市场份额最高的浏览器。2016 年，Chrome 占据了浏览器市场的半壁江山。

  尽管 HTML5 在网络开发人员中非常出名了，但是它成为主流媒体的一个话题是在 2010 年的 4 月，当时苹果公司的 CEO 乔布斯发表一篇题为“对 Flash 的思考”的文章，指出随着 HTML5 的发展，观看视频或其它内容时，Adobe Flash 将不再是必须的。这引发了开发人员间的争论，包括 HTML5 虽然提供了加强的功能，但开发人员必须考虑到不同浏览器对标准不同部分的支持程度的不同，以及 HTML5 和 Flash 间的功能差异。
  直到2014 年 10 月 28 日，W3C 正式发布 HTML 5.0 推荐标准。

现代化时代

1、Node.js的爆发

  随着JavaScript的发展，JavaScript 最开始就能同时运行在前后端，但时在前后端的待遇却不尽相同。随着 Java、PHP、.Net 等服务器端技术的风靡，与前端浏览器中的 JavaScript 越来越流行相比，服务端 JavaScript 逐渐式微。

  2008 年 Chrome 发布，其 JavaScript 引擎 V8 的高效执行引起了 Ryan Dahl 的注意。2009 年，Ryan 利用 Chrome 的 V8 引擎打造了基于事件循环的异步 I/O 框架 —— Node.js 诞生。

• Node.js 的特点：

1. 基于事件循环的异步 I/O 框架，能够提高 I/O 吞吐量。
2. 单线程运行，能够避免了多线程变量同步的问题。
3. 使得 JavaScript 可以编写后台代码，前后端编程语言统一。

  Node.js 的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码，其异步编程风格也深受开发人员的喜爱。Node.js 的伟大不仅在于拓展了 JavaScript 在服务器端的无限可能，更重要的是它构建了一个庞大的生态系统。

  2010 年 1 月，NPM 作为 Node.js 的包管理系统首次发布。开发人员可以按照 CommonJS 的规范编写 Node.js 模块，然后将其发布到 NPM 上面供其他开发人员使用。目前 NPM 具有 40 万左右的模块，是世界上最大的包模块管理系统。

  Node.js 也催生了 node-webkit 等项目，用 JavaScript 开发跨平台的桌面软件也成为可能。Node.js 给开发人员带来了无穷的想象，JavaScript 大有一统天下的趋势。

2、JSON

  JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

  Json虽然是2001年就产生的标准，但被广泛应用是在2008年之后各种Ajax应用、iPhone、Android设备流行之后。旧的服务体系多是企业级，所以XML对java型的企业级服务定位有益。但对于流量限制，语义简单的API服务来说，XML庞大、冗余、不易学又占带宽。Json的普及，从另一个角度体现了web开发的一个优势，不管你后台是java ruby php还是python，你只要给我一个json格式的接口，我就能撑起整个地球。

3、前端MV*框架

  前端自动化和MV*框架真正让前端迎来了春天，但是这个时代框架插件众多、体系繁复，让前端新手无所适从。在这个时代，Web端功能日益复杂，人们不得不开始考虑这样一些问题：

• 如何更好地模块化开发

• 业务数据如何组织

• 界面和业务数据之间通过何种方式进行交互

  在这种背景下，前端MVC、MVP、MVVM框架如雨后春笋，我们暂且把这些框架都统称为MV框架。这些框架的出现，正是为了解决上述这些问题，具体的实现思路各有不同，主流的有Backbone，AngularJS，Ember三大剑客。

  随着这些 MV 框架的出现，网页逐渐由 Web Site 演变成了 Web App，最终导致了复杂的单页应用（ Single Page Application）的出现。

4、Bootstrap

  2011年Twitter开源的网页端GUI框架。jquery兼容了不同浏览器的js部分，bootstrap则兼容了不同浏览器的css部分。甚至于说，作为一个后端开发，你无需了解css，无需前端，无需设计师，只要看一看bootstrap的文档，就可以搭起一个美观大方的后台管理系统。常见类似的GUI框架还有zurb的foundation,google的materialize，百度也曾出过一个名为GMU的移动端框架。

  Bootstrap的缺点则在于千篇一律，所有页面都一个样子，甚至连颜色、表单都一样。当然，其为了解决响应式提出的栅格化html的思想还是很值得借鉴的。

5、移动Web、hybrid和iOS、Android

  2009年之后IOS和Android的快速发展，导致WEB开发发生以下改变：

1. html5在移动浏览器上优先实现，Android和IOS设备全面支持html5、CSS3，加速了IE消失。
2. 上网随时随地发生。鼠标点击、内容繁复的网页越来越简洁，响应式设计快速流行。
3. APP和服务器交互大部分和网页一样基于HTTP协议，webapp，hybrid app的概念被提出。

关于webapp，这里简单说下web相比原生的优势。

• 跨平台：常说的一次编译，到处运行
• 免安装：打开浏览器，就能使用
• 快速部署：升级只需在服务器更新代码，而不像客户端需要更新版本
• 超链接：可以与其他网站互连，可以被搜索引擎检索
  但是，webapp的缺点还有一大把，最大的缺点莫过于没有GPU加速。其次网页是单线程的，加载dom时会阻塞js，导致的结果就是，卡。

  而hybrid就不同了，Hybrid 技术指的是利用 Web 开发技术，调用 Native 相关 API，实现移动与 Web 二者的有机结合，既能体现 Web 开发周期短的优势，又能为用户提供 Native 体验。

  hybrid app的意思是混合原生应用，将需要频繁更新的页面作为web放在远程更新。

根据实现原理，Hybrid 技术可以分为两大类：

将 HTML 5 的代码放到 Native App 的 WebView 控件中运行，WebView 为 Web 提供宿主环境，JavaScript 代码通过 WebView 调用 Native API。典型代表有 PhoneGap(Cordova) 以及国内的 AppCan 等。

将 HTML 5 代码针对不同平台编译成不同的原生应用，实现了 Web 开发，Native 部署。这一类的典型代表有 Titanium 和 NativeScript。

参考资料

• 前端发展资料
• Web前端发展简史
• 十年Web技术发展历程