前端发展历程与技术应用概述

前言

随着web2.0时代的到来，前端在web开发中所占的比重越来越大，专注于内容呈现和网站交互的前端开发人员也逐渐展现出其不可替代性。前端所涉及的领域甚至不限于web应用，如HTML5技术允许我们开发原生的移动应用；React Native、Flutter等跨平台框架可以用于开发跨平台的移动应用；还有近些年相当流行的微信/支付宝小程序等。此外，随着微软的新项目React Native for Windows的发布，使用前端技术开发Windows桌面应用也成为了可能。

那么前端如此繁荣的生态是如何一步步形成的呢？本文将带领大家回顾从web1.0到web2.0时代前端的主要发展历程和代表性的技术，希望帮助大家对前端有一个整体的认识（不懂前端的可以作为科普文章哦）。

前端发展简述

web 1.0时代 - 静态内容呈现

随着1994年美国的Netscape公司推出第一款浏览器NCSAMosaic（后改名Navigator），web1.0时代正式到来（web的概念可追溯到更早）。安装了该浏览器的用户，可以浏览来自于其他网站的信息（主要是文字和图片），当时的浏览器长这样（图片来自网络）：

web诞生后的相当长的一段时间内，“前端”的工作完全是由后端开发人员来完成的。那时候的网站更偏向于静态内容展示。用户在浏览网站时，几乎不会与网页产生交互行为（如果你浏览的网页全是文字和图片，只能提交个表单，那可能就是上世纪穿越来的网页…），这时候开发一个网站的成本是比较低的，这个时代我们称为web1.0时代。

这个时代前端的代表技术主要是HTML 4.01，CSS 2.0，ECMA 4.0（JavaScript语言核心规范，两者的关系后面会有介绍）。三者的关系可以描述为：HTML告诉浏览器网页上有什么，CSS告诉浏览器他们长什么样，JavaScript描述他们有什么行为。直至今日，这三者仍是前端开发的三大核心（以JavaScript为重中之重）。

这个时代最具代表性的事件莫过于被前端开发人员津津乐道的Netscape与IE的浏览器之争（毫无疑问那是前端开发者的噩梦），后文会详细介绍。

这时候的前端专注于静态内容的呈现，但由于技术的限制，前端的呈现能力显得非常不足。

web 2.0时代 - 交互时代

web 2.0的概念正式诞生于 2004 年 3 月 O’Reilly Media 公司和 MediaLive 国际公司的一次头脑风暴会议中，在“What Is Web2.0”一文中首次被提及。

简单来说，web2.0更强调网页的交互性，它不再将用户局限在对网页的浏览上，而是根据用户的操作，来展现不同的网页内容。用户可以在不刷新页面的情况下，通过简单的点击、按键输入等获取不同的内容。除此之外，得益于JavaScript的发展，前端可以执行少量的数据处理甚至数据存储（如浏览器端数据库indexeddb），而这种能力，也是前后端发展逐渐走向平衡的一种表现。一个典型的web2.0网页如下（图片来自截图）：

在web2.0时代，网页具备了展示更多媒体应用的能力，如播放音频，视频，查看PDF文档等。同时技术的标准化使前端开发人员逐渐从浏览器之争的创伤之中走出来，也大大推动了互联网技术的进步。

web2.0时代最具代表性的前端技术莫过于HTML5 + CSS3和ES5 / ES6了，其中HTML5为网页提供了诸多能力，包括播放音视频，canvas，svg，多线程，本地存储，离线应用，websocket，web worker等等；CSS3则大大增强了网页的渲染能力，包括阴影，渐变，新的布局模型，2D/3D变形和动画等等；ES5和ES6对网页的增强则是整个web2.0发展的核心，它赋予了网页越来越强的交互能力。其中ES5诞生于web2.0的早期，目前正在逐渐被ES6及其后续版本所取代。

除了在web中的应用，前端开发还触及到了其他相当多的领域，包括原生移动应用(主要借助HTML5相关技术)，跨平台移动开发（React Native和Flutter），微信小程序，以及后续的Windows桌面应用开发等，此外，在一些新兴领域，如智能设备，智能医疗，计算机视觉，大数据等，前端技术都占有一席之地。因为前端最重要的工作，就是负责内容的呈现和与用户的交互。

这时候的前端把更多注意力放在了用户交互上，并大大增强了内容呈现的能力，致力于带给用户更好的浏览体验。

web 3.0时代（参考自百度百科，不做详述）

实际上web3.0时代并未真正到来，它只是业内一种概念性的描述，并且本质上不是技术的革新，而是web理念的一种革新。我们先来看一下web2.0时代遇到的一些问题。

随着web2.0时代的蓬勃发展，大量的网站涌现出来，web中的数据量呈指数级增长。对于普通浏览器用户来说，web技术不止带来了大量的免费信息，也带来了筛选信息的烦恼。如今的互联网上充斥着大量的数据，如何找到准确、可靠、最新的信息，即使对专业的计算机开发人员来说，也是个不小的问题。此外，各个网站之间相对独立，信息只有通过同时浏览过这些网站的人才能发生交互。我们知道，数据的整合会创造更大的价值，而目前这种整合几乎完全依赖于每个web参与者，这显然无法完全发挥这些数据的价值。

web3.0则会通过第三方平台来整合数据，为用户筛选和提炼更有价值的信息，这可能需要借助其他领域的技术来实现，如人工智能、大数据等等。另外web3.0的实践者希望所有的应用都完全基于web，即使用web技术实现需要复杂的系统应用才能实现的功能，例如微软的基于web的在线office应用等。

web3.0背景下，前端需要具备呈现更加复杂的数据的能力，并提供不亚于复杂的系统应用的交互能力和业务逻辑处理能力。

前端发展史及代表性技术

web1.0的诞生与发展

这里我们以Netscape推出第一款浏览器作为前端发展的开始。

HTML规范

1994年，HTML2.0版本发布（1990年诞生的最初的HTML版本没有官方规范，因此HTML是从2.0版本开始发布的），同年Netscape推出第一款浏览器Mosaic，以HTML作为通用的标记语言。

HTML本身是一种标记语言，用类似于<></>的标签来标识一段内容，如<html>…</html>表示标签内的部分是HTML文档，而<p>…</p>表示中间的内容是一个段落。一段简单的HTML代码可能长这样：

<!DOCTYPE html>
<html>
<head>
	<title>一个网页</title>
	<meta charset="utf-8">
</head>
<body>
	<p>这里是一个段落</p>
</body>
</html>

如果你想制作自己的第一个网页，可以按以下步骤执行：

新建一个文本文档（如test.txt）
将上述内容粘贴进去
将文件的后缀改为html（如test.html）

现在你就完成了一个网页的制作，你只需要双击该文档（或在打开方式中选择任意一个浏览器），就可以在浏览器中打开该HTML文档，然后你就可以看到如下内容：

没错，这就是一个标准的网页（尽管它几乎不能再简单了）。

第一行<!DOCTYPE html>告诉浏览器，这是个html文档（也就是网页）。

<html>…</html>里面的内容将被浏览器认为是整个文档的所有内容（里面的所有内容都会被浏览器解析）。

<head>…</head>中的内容是对这个网页的描述，<title>…<title>中的内容是文档的名字，将显示在顶部标签栏中（浏览器最顶部的一个个标签页），meta标签定义了文档的编码格式（主要防止中文乱码）。

<body>…</body>中的内容就是页面上需要显示的内容，<p>…</p>定义了一个段落，本文当中网页上的内容只有一个段落，而段落里显示的内容就是“这里是一个段落”（如图所见）。

现在你已经不是对前端一无所知了，不是吗？

JavaScript的诞生

1995年，Netscape公司的Brendan Eich开发出了决定web前端发展的一门编程语言–JavaScript（此处应有掌声~~）。

设计JavaScript的最初目的，是为了进行网页上的表单验证。在那个年代，人们的上网速度极慢。设想，假如你正在填写一个表单，需要你输入用户名和密码，但是你还没填用户名就手残地点了提交，过了30秒，你收到一条服务器返回来的数据，告诉你用户名没填，你会作何感想？

为了在数据发给服务器之前，就提前对数据进行一定的验证（如数据是否为空，邮箱格式是否正确等），JavaScript被设计出来了。现在我们可以在前端拦截要发送的表单，验证里面的数据，验证通过后再发动给服务器，多好！（实际上正是因为JavaScript最初的功能如此简单，它在相当长一段时间内都被认为是一门玩具语言，完全没有人想到它能像现在这样统治web前端！）

关于JavaScript的小科普
JavaScript最初名叫LiveScript，因为那时的Java刚好受到媒体的热捧，借着这个浪潮，Netscape将LiveScript更名为JavaScript。

JavaScript与ECMAScript的关系：
ECMAScript，通常简写为es，是JavaScript语言的核心规范，它定义了这门语言本身的语法规范和编程特性等，由ECMA国际组织（前身为欧洲计算机制造协会）定义。

es1.0实际上是基于已有的JavaScript定义的，于1997年发布。目前广泛使用的是es5版本，并逐渐被es6及其后续版本所取代。JavaScript以ECMAScript为语言核心，并进行了必要的扩展。为了在HTML中使用JavaScript，它提供了文档对象模型（DOM，Document Object Model），而为了访问浏览器提供的接口，它提供了浏览器对象模型（BOM，Browser Object Model）。因此JavaScript由ECMAScript、DOM、BOM三部分构成。而ECMAScript同时也是某些其他脚本语言的核心规范，如JScript、VBScript等。

CSS规范

通过上面短短的十行代码，我们已经可以写出自己的第一个网页了，但是网页长成这样，怎么拿出去给别人看？

于是在1996年，CSS1.0规范发布，目的就是解决网页的样式问题。下面我们给body中的p段落加一点小小的改动：

	<p style="color: red;">这里是一个段落</p>

这里的style表示后面的字符串是为了描述这个段落的样式的，color: red表示我想让这个段落显示为红色，将这个p标签放回到我们的html文件里，网页就变成了这样：

看到了吗，现在我们的段落变成了红色，你还可以继续写style=“color: red;text-indent: 2em;”，这样段落的开始就会缩进两格：

简单却很酷，不是吗？

CSS赋予了我们美化页面的能力（随着CSS3的发布，这种能力变得越发的强大和不可思议！），它描述了HTML页面上的每一部分内容长什么样，这是那些绚丽多彩的网站实现的基础，你甚至可以直接使用CSS来定义一个动画效果（现在的网站通常都会这么做）。比如下面这种效果（实际点击照片会动态切换，这里只是截图）：

这才是前端该有的样子吧！

web1.0的落幕

浏览器之争 - 前端开发者的噩梦

浏览器之争的两大对立方，分别是Netscape公司和操作系统巨头微软，而这场争端则是从微软1996年推出其第一款浏览器Internet Explore 3（简称IE3）开始的。

由于Netscape更早地入驻web领域，它一度将自己视为web发展的领头羊。而微软作为操作系统领域的巨头，自然也不想放过web领域这块肥肉。仅仅两年之后，微软就推出了自己的浏览器IE3，使用的脚本语言是JScript（如此命名是为了避免与Netscape的版权冲突）。随后两者的发展几乎是各自独立的，两者都在为浏览器提供新的功能扩展，但是由于当时没有一个标准化组织可以对技术进行统一，因此两者对同一功能的实现往往大相径庭。鉴于当时两者都具有很高的市场份额，网站开发者不得不开发出能同时在两个浏览器上运行的代码（这种痛苦即使到了今天也依然存在），这样开发者的工作量成倍地增加，还需要忍受浏览器中存在的大量bug。

当然浏览器之争对前端发展的好处也是有目共睹的。由于没有受到任何约束，浏览器厂商可以随心所欲地向浏览器添加有用的功能，用户几乎能切身地感受到web技术的迅猛发展。就在这样的客观背景下，前端技术向前迈进了一大步。

但是到了20世纪末，随着微软将IE浏览器捆绑到操作系统，免费提供给用户使用，几乎完全靠浏览器来盈利的Netscape公司迅速败下阵来，并最终在1998年被收购，浏览器之争到此落下了帷幕（此举至今仍备受指责，并一度被认为是一种垄断行为）。浏览器之争结束后，web领域涌现出了一大批优秀的浏览器，如谷歌的Chrome浏览器，继承了Netscape衣钵的Firefox（火狐）浏览器，苹果的Safari浏览器等，IE因为遗留下来的大量技术问题，市场份额逐渐减少，趋于被web领域所抛弃。

技术标准化 - 前端发展的根基

为了应对浏览器之争带来的种种弊端，各大标准化组织开始对已有的技术进行大规模标准化。将web1.0带向成熟的规范包括HTML4.01，CSS2.0，ES3.0，在这三者的推动下，web领域的技术趋于稳定。但此时的前端开发者可谓寥寥无几，因为这时的网站通常是一堆的静态页面，主要功能是向用户展示来自服务器的数据，页面复杂度相对较低，因此前端的工作通常是由有经验的后端开发人员来承担，使用诸如基于java的jsp技术，以及基于C#的asp技术等，将后台代码嵌入模板，生成页面，发送给浏览器。

但是随着页面复杂度的不断增加，使用模板生成页面的成本也不断增加，后端开发人员逐渐变得力不从心。此外，后端开发人员开发的页面，通常对页面美化不够重视，网站风格也偏于古板，无法满足用户的审美需求。

前后端分离成为了一种必然趋势！

web2.0时代的兴起

AJAX技术 - 异步加载数据

当技术发展到一定程度，人们就会对它产生更多的期待，web技术同样如此。1.0时代的静态页面虽然足够承载大量的信息，但却无法满足人们与网页进行交互的需求（这种需求也正是推动技术进步的最大动力）。

以前如果你需要从服务器获取数据，无论多么少量的数据，网页都必须全部刷新一次，这带来了很不好的用户体验。用户希望页面更加“智能”，不要每次请求数据都刷新页面。

随着这种需求的日益强烈，AJAX技术诞生了！这项技术最初用在谷歌2004-2005年推出的两款革命性产品Gmail（邮件服务）和Google Map（谷歌地图）中，用户可以在不刷新页面的情况下，直接从服务器获取数据。这在当时是史无前例的，而这两款产品也迅速占领了市场！

AJAX技术现在已经成为当前web发展的基础技术之一，对web技术的发展起到了极大的推动作用。

兼容性框架的出现

作为浏览器之争的受害者，一直到web1.0时代结束，前端开发者都不得不为了兼容主流浏览器，而开发大量的兼容性代码，这给前端开发工作带来了极大的障碍。这个时期，前端中涌现了许多可以处理浏览器兼容问题的库，而这其中最优秀的当属jQuery了。

2006年，John Resig正式发布了jQuery，随后其便迅速成为各大网站的标配（直至今日，jQuery的市场份额仍然不可低估）。它为各大主流浏览器提供了统一的接口，也就是说，如果你想实现一个功能，那么可以直接使用jQuery提供的功能，然后jQuery会根据用户使用的浏览器自动进行兼容性处理。这样开发者只需要写一份符合jQuery规范的代码，即可保证在各大浏览器上正常运行，这在当时是多么了不起的一件事啊！比如我们只需要下面一行代码就可以产生让div元素向上收起的动画效果：

	...
	$("div").slideUp(100);
	...

除了进行浏览器兼容，jQuery还对JavaScript本身提供了很多的扩展，提供了诸如DOM操作、css选择器、异步队列、数据缓存、动画、属性操作、事件封装、ajax请求封装等一系列的功能，使前端开发进入了一个崭新的时代。此外，jQuery的生态系统极其丰富，它具有很强的可扩展性，吸引了大量的插件开发者开发高质量的jQuery插件来扩展其功能（这些高质量的插件可能是jQuery仍然占据大量市场份额的一个原因）。

HTML5标准的问世

这里的HTML5标准不单指HTML自身，还包括了CSS3和ES5 / ES6相关的规范。
HTML5规范极大地扩展了浏览器所能呈现内容的范围。在HTML5规范下，我们可以很容易地嵌入一段音频、一个视频等等，也可以使用canvas画布或者svg，在网页上随心所欲地绘制一幅图片，拖拽、动画、2D/3D变换等操作都成为了可能，这要归功于HTML5+CSS3规范所提供的强大能力。

ES5规范的提出，使JavaScript进一步成熟，在编程语言市场占有了一席之地。紧接着，ECMA标准组织又推出了ES6规范，为这门语言提供了相当多的现代语言特性，大大增强了其对前端环境的适应力。同时也为JavaScript进入后端开发奠定了基础。

当前的前端生态

nodejs的兴起

由于JavaScript单线程的语言特性以及不具备如java般严谨的面向对象特征，它一度被认为只能用于前端开发，不能适应后端复杂业务逻辑的开发，这主要基于三点：

单线程特性，无法充分利用多核CPU强大的计算能力，不利于开发分布式应用
不够安全，一旦主线程出错，整个执行过程就会崩溃
没有严谨的面向对象特性，封装程度不够，无法处理复杂的业务逻辑

但同时作为面向前端浏览器环境所设计的一门语言，JavaScript也具有一些其他大部分语言没有的特性，最典型的包括其事件循环机制，同时单线程的特点也可以说是有利有弊。

利用JavaScript的这些语言特点，Ryan Dahl于2009年发布了JavaScript的服务器端运行环境nodejs。它基于谷歌浏览器广受好评的JavaScript引擎–V8引擎，是一个事件驱动的非阻塞I/O模型。它将所有的客户端请求都交给事件循环机制来处理，从而将I/O代价降到极低。由于单线程的语言机制，它不需要处理复杂的线程同步问题，更不会发生死锁等线程问题。随着ES6规范中web worker的出现，nodejs也具备了利用多核CPU的能力（当然仍然无法与java相提并论）。

总的来说，JavaScript和nodejs的发展仍有不足，使用nodejs开发完整后端应用的网站仍然微乎其微，但是有相当多的网站使用nodejs来开发中间件，利用其优秀的I/O性能，处理大量的I/O请求。

nodejs的发展仍然值得期待。

组件化开发和MVVM的兴起

英雄终有落幕，尽管jQuery红极一时，但是终究无法应对越来越复杂的前端开发工作。一方面，jQuery大量的优秀特性已经被吸纳为JavaScript标准。另一方面，占有其60%代码量的DOM操作已经被公认为网页的性能杀手，因为DOM操作需要反复地操作文档，并触发网页的重绘和重排，这会严重影响网页的性能，最严重的可能导致页面卡死。此外，使用jQuery开发的网站，会因为大量的DOM操作，需要书写大量的代码，从而变得难以维护。

我们需要有一种更优雅的方式来操作页面，以获得更优秀的用户体验。

为了解决这些问题，前端兴起了组件化开发和MVVM开发模型。

目前对国内影响比较大的当属React和Vue了（Angular没有接触过，所以就不讨论了）。2013年，Facebook的前端团队设计了一个崭新的前端框架，它将网页的各个部分拆分成一个个的组件，使用虚拟DOM将页面上的节点存储在内存中，将视图和数据进行绑定。视图的显示完全由数据和模板来驱动，这样当数据发生变化时，开发者不需要考虑如何去进行DOM操作，框架会自动以高效的方式去更新虚拟DOM，然后更新网页内容。开发者只需要专注于数据的操作即可。这样就实现了视图与业务逻辑的分离。

作为国内的一款优秀的前端框架，Vue在前端开发中的地位毋庸置疑。以我个人看来，Vue的设计更加符合人们的思维方式，所以上手更快，学习成本更低。但Vue本身并不是严格基于MVVM模型的框架，只是借鉴了MVVM的设计原理。这里就不详述了。

前端技术在其他领域的应用

HTML5的出现赋予了JavaScript开发原生移动应用的能力，但是性能与java、kotlin等开发的移动应用相比稍差一些。

同样是Facebook推出的前端框架React Native，可以用于开发跨安卓和iOS平台的移动应用。

此外，备受瞩目的Google开发框架Flutter（基于Dart语言）同样提供了这种能力，目前两者均占有一定的市场份额。

近些年流行的小程序，如微信小程序、支付宝小程序等，也是前端技术的应用之一。

此外，微软推出了基于React Native的项目React Native for Windows，可以使用JavaScript来编写Windows桌面应用，该项目目前处于发展初期。

另外，人工智能领域，大数据领域等也都可以看到JavaScript的身影，主要用于内容的呈现，数据的展示，与用户的交互等。在很多应用场景中，前端的形式已经发生了巨大的变化，但是本质还是用于内容的呈现和与用户的交互。

总结

前端的发展经历了上古的混乱时期，到后来的规范化、标准化时期，再到近些年的快速发展时期，现在已经成为了web领域中不可缺少的一环。作为前端开发者，我们致力于以更好的方式为用户呈现内容，以及向用户提供更好的交互体验。作为初涉前端的开发人员，我对前端的认识尚浅，另外由于篇幅有限，本文有大量的前端知识点没有涉及，如有兴趣可自行查阅。本文的目的主要是向对前端了解较少，但对前端充满兴趣的开发者分享一些个人对前端的理解和认识，也是对我这一年前端开发经历的小总结，如有错误，还望指正。

参考资料

前端开发进化史，你经历过哪几个时期？
前端发展简史
 web 百度百科
 web3.0 百度百科

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_41694291/article/details/93378099
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-30 23:07:51
阅读 ( 498 )
分类：前端