web 发展史及现状

前端发展史

发布日期: 2022-09-01

更新日期: 2022-10-04

文章字数: 3.6k

阅读时长: 13 分

阅读次数:

引言
web 的发展目前可分为三个阶段：web 1.0 → web 2.0 → web 3.0，技术的变迁经过了漫长的积累和迭代的过程。就我自身而言，90 后，没有经历过 web 1.0 时代，即使身处 web 2.0 百家争鸣、百花齐放的时代，但由于各种原因，也没有较为深刻的认知。现在身处 web 3.0 时代，是时候回顾一下 web 的发展史以及发展现状了。本文回顾了 web 的前两个时代，并对 web 3.0 的发展现状进行梳理，以供参考。

本文从宏观（总体描述）和微观（技术架构）两个维度对 web 的发展进行回顾与总结。准备好了吗，发车了🚘

宏观-应用场景

三个 Web 时代的架构[4]

Web 1.0 时代

Info

1991 年 ~ 2004 年

Web 1.0 时代是万维网（www）发展的第一阶段 [1-2]（1989 年，英国科学家蒂姆·伯纳斯-李于1989 年发明了万维网。1990 年他在瑞士 CERN 的工作期间编写了第一个网页浏览器。网页浏览器于1991 年 1 月向其他研究机构发行，并于同年 8 月向公众开放），表现为“内容提供者”，即创建一个静态网站，该网站向用户提供可供检索和浏览的静态内容。Web 1.0 本质上是一个内容分发网络（CDN），网站上的内容对用户来说是只读的，主要是公司向个体提供服务。

Web 1.0 时代的搜狐门户网站[4]

Web 2.0 时代

Info

2004 开始

Web 2.0 首次出现在达西·迪努奇（Darcy DiNucci ）在 1999 年发表的文章《Fragmented Future》中，于 2004 年末在 O’Reilly Media Web 2.0 会议上由提姆·奥莱理（Tim O’Reilly）和戴尔·多尔蒂（Dale Dougherty）正式推广 [3]。Web 2.0 又名参与式社交网络，顾名思义，Web 2.0 时代的网站是可交互的了，用户可以对网站执行写操作，表现为在论坛、贴吧中用户可以发帖、评论等。用户可以参与到网站内容的贡献中，并享受网站提供的部分利益分成，如短视频、B站创作等。在 Web 2.0 上时代，虽然用户可以自主创建互联网中的内容，但流量入口与利益分配等却被各个互联网巨头公司把控，且隐私与安全问题难以保障 [4]。

Web 2.0 时代涌现的知名企业[4]

Web 3.0 时代

Info

2014 ~ 至今

对于我们普通大众来说，Web 2.0 时代的互联网是我们熟知并且每天都在使用的，作为用户韭菜的我们似乎已经习惯了被~~企业家~~大资本们安排。在 Web 2.0 时代，我们在网上发言，购买虚拟的产品，这些数据都在服务提供者的数据库中。你的数据，他们想删就删，如果不小心被黑客入侵造成用户数据泄露，你也只能自认倒霉。很大程度上，由我们个人产生的数据并不由我们自己支配，严格意义上说你买的那些虚拟的产品并不属于你，它只是一份存在服务器上数据库中的数据，你不能直接拿到它，只有间接的使用权。要解决以上问题，我们普通的用户是无能为力了，可能也没几个人去想这些问题。但是国外是一个“自由的国度”，私人财产神圣不容侵犯，你不能侵犯我的个人隐私。记忆中，16 年左右国内外陆陆续续出现了许多侵犯个人隐私的新闻，到今天，2022 年，互联网上的个人隐私算是已经深入人心了。

Web 1.0，Web 2.0 和 Web 3.0 架构的区别[4]

为了解决上述问题，外国人开始发力了。与区块链有关的 Web3 概念由以太坊联合创始人 Gavin Wood 于 2014 年提出，并于 2021 年受到加密货币爱好者、大型科技公司和创业投资公司的关注 [5]。Web 3.0 在 Web 1.0 和 Web 2.0 的基础上，以区块链的去中心化思想为基础构建数字化生态。到那时，用户将真正拥有自己的数字资产，无需依赖于某一家公司，而是依赖确定的软件代码逻辑来严格执行协议 [4]。未来的互联网可能是这样的：

区块链让数据成为资产；
智能合约打造可编程的智能经济体系；
人工智能构建全球智慧大脑并创造“数字人”；
物联网让物理世界的现实物体向数字空间广泛映射；
AR 实现了数字世界与物理世界的叠加；
5G 网络、云计算、边缘计算将构建更加宏伟的数字新空间；

Web 3.0 时代出现的一些公司 [4]

作为对下一代互联网的设计和设想，Web 3.0 将会是一个更加开放，公平和安全的网络。用户将成为互联网真正的创作者与构建者，用户所创造的数据信息与数据资产都将归自身所有，每一个参与到 Web 3.0 的个体都将享受到属于他们的红利 [4]。

微观-建站技术

Web 1.0

1991 年至 2004 年，互联网处于起步阶段，彼时可称为“洪荒时代”，一切由后端包办。具有代表性的技术有：

CGI（Common Gateway Interface，1993）：本质是一个接口协议，定义了一系列与 HTTP 协议相关的环境变量，只要使用编程语言（Perl 为主，还有 C/C++ 等）按照这一接口规范编写程序就可以处理网络请求，返回响应。请求的 HTML 文件在后端生成 [12-13]。
PHP（Personal Home Page，1993）。PHP能将动态的内容嵌入到HTML中，提升了编写页面的效率与可读性，其性能也比一般的CGI高。PHP的界定符、循环语句等的发明，深刻影响了后来的ASP、JSP，乃致后来的JavaScript前端模板引擎 [6]。
1994 年 10 月，W3C 小组成立，其宗旨是通过促进通用协议的发展并确保其通用性，以激发 web 世界的全部潜能 [7]。1995 年，JavaScript 诞生（传闻，网景工程师布兰登·艾克（Brendan Eich）只花了10天时间设计出 JavaScript 语言）
1994~2005 年发生了著名的“浏览器战争”，催生了一些新技术，如 JScript、IE7.js、IE8.js 等。
1999 年，微软的 IE5 发布，第一次引入新功能：允许 JavaScript 脚本向服务器发起HTTP请求 [8]。

Web 2.0

2004 年至 2014 年，10 年时间，web 前端的技术发生了翻天覆地的变化。期间的技术演进如下：

2004 年 - 2005 年，Google 的两个 Web 产品 Gmail 和 Google Map 大量使用了 Ajax 技术。2005 年 2 月，杰西·詹姆士·贾瑞特（Jesse James Garrett）发表了一篇名为《Ajax：一种Web应用程序开发的新方法》的文章后，Ajax 被挖掘出，大家开始重视起这技术的应用。Ajax 在当时来说是一项革命性的技术，对后来的 Web 开发产生了深远的影响。

2006年，jQuery 发布。当时前端界首要面对的是浏览器兼容性问题，jQuery 在处理 DOM 兼容上真是知微见著, 发掘出大量的 DOM/BOM 兼容方案（例如 Dean Edwrad 的 addEvent()， IE 的 px 转换方案，domReady的 doScroll 方案，globalEval 的兼容方案等）。jQuery 也打破了前端开发者的编程思维，之前是按照后端的开发思路来的：做一个业务就先封装一个类，有了这个类后，再想办法传入一个 DOM，然后再通过类方法操作 DOM。而 jQuery 是 DOM 为中心，开发者可以选一个或多个 DOM，变成 jQuery 对象，然后进行链式操作。其次，开发者们已开始注重前后端分离，并要求不能污染 Object 原型对象，不能污染 window 全局变量。这样，jQuery 只占用两个全局变量。再次，jQuery 非常轻量级，采用 Dean Edwards 编写的 Packer 压缩后，大小不到 30KB。并且里面实现得非常精妙，以令人瞠目的手段解决各种兼容痼疾。

jQuery 出现之后，出现了大量 jQuery 插件与 UI 库。为后 jQuery时代，人们研发前端模块加载、统一异步机制、 打造大型 MVC 框架，甚至伸向后端，接管打包脚本而发明 Node.js，来腾出大量时间。这个时期涌现了大量 jQuery-like的库，其中最著名的是 Zepto.js（2016 年）。Zepto 的出现也标志着我们进入移动互联网时代。

jQuery 存在的问题：

页面第三方库混乱，难以管理和维护。前端工程师通常编写一个页面，会引入十多个乃至几十个 jQuery 插件，页面上塞满了 Script 标签。众所周知，浏览器是单线程，Script 的加载，会影响到页面的解析与呈现，导致著名的白屏问题（当时前端用力过猛，body 中的所有东西都是动态生成的）。
忽视底层实现，只关注上层应用。jQuery 的出现让前端工程师开发更加轻松，假如工程师想实现一个功能，现搜索出一个 jQuery 插件来实现。
全局污染。由于插件的质量问题，或者开发的素质问题，这已经是 IIEF 模块或命名空间等传统手段无法解决了。
jQuery 开发者需要解决大段 HTML 的生成问题，之前 jQuery 有$.html, $.append, $before等方法，可以将一大段符合 HTML 结构的字符串转换成 DOM 再插入到页面上。但现在我们想分离出来，让 HTML 独立到不同的文件中，然后插数据，这就是之后出现的前端模板。

破局：

一些优秀的前端工程师们决定向后端取经，引入模块机制。早期，这种模块机制在 Dojo、EXT 这些框架中都是内置的，但是显然说服不了另一个框架的用户用对方的模块机制，于是有人立志要统一这种模块定义方式，成立了 CommonJS。但不料，CommonJS 内部也有派系，谁也说不服对方。终于有一个人忍不住自己独立开发出RequireJS，其模块规范即为 AMD。AMD 最大的优势是它支持各种插件，且简单明了，并且提供 shim 机制加载以非 AMD 规范编写的 JavaScript 代码。

CommonJS 规范：由 Mozilla 的工程师 Kevin Dangoor 在 2009 年 1 月创建的，当时的名字是 ServerJS。2009 年 8 月，这个项目改名为 CommonJS，以显示其 API 的更广泛实用性 [9]。
AMD（Asynchronous Module Definition）规范：为浏览器环境设计的，因为 CommonJS 模块系统是同步加载的，当前浏览器环境还没有准备好同步加载模块的条件。AMD 定义了一套 JavaScript 模块依赖异步加载标准，来解决同步加载的问题。
CMD 规范：SeaJS 是一个适用于 Web 浏览器端的模块加载器（阿里出品）。在 SeaJS 的世界里，一个文件就是一个模块。所有模块都遵循 CMD 规范 [10]。

当出现前后端分离的需求后，前端模板技术出现了，接着又诞生了前端路由。基于这两者，又出现了一个新的技术词汇 SPA（Single Page Application）。

2009 年 5 月，来自Ruby界的高手Ryan Dahl发明了 Node.js。它是一个基于 Chrome V8 引擎的 JavaScript 运行环境，使用了一个事件驱动、非阻塞式 I/O 模型，让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与 PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言 [11]。有了 Node.js 之后，海量模块、路由、状态管理、数据库、MVC 框架都有了。这时，前端就缺自己的 MVVM 框架了。接着出现的前端框架有：

Backbone.js：纯正的MVC模型，强依赖于jQuery。Backbone.js 的作者还搞了另一套编译语言 CoffeeScript, 里面的箭头函数、类机制、解构赋值等语法糖都深深影响了后来的 ES6。
Angular：背靠谷歌，MVVM 框架，用于移动端原生开发的 ionic；
Knockout.js：微软出品的 MVVM 框架；
Ember.js：苹果出品的 MVVM框架；
React：FaceBook 出品，技术生态包括状态管理器、CSS-in-JS、Flow 静态类型检查、devTool、Fetch、前后端同构、Fiber、suspend、并发渲染、React Native等。
Vue：国人独立开源开发者尤雨溪打造，生态链包括 Vuex、Vue-Router、Vite、用于移动端原生开发的 Weex （阿里出品）等。

2013 年，百度基于 H5 技术推出了轻应用。2015年，360 和 DCloud 合作在 360 手机助手内嵌了客户端引擎实现了名为 360 微应用的流式应用，做到了应用的秒开。2016 年 9 月 21 日，微信宣布更名应用号为小程序。接着又有了支付宝小程序、QQ 小程序等等。小程序的技能树由中国国内的开发者创建，并不断地在演进。关于这部分，后续再详细回顾。