感谢知乎小五教编程的博文:历史上第一个网页长这样,大部分的内容是直接转载他的内容
1989
TIM Berners-Lee(1955-),英国计算机科学家,万维网之父,提出万维网的设想,解决世界各地大学和研究所的科学家之间对自动信息共享的需求。
万维网也叫 www、Web、全球广域网,是一个透过互联网访问的信息系统,由许多互相链接的超文本组成。
| 区别 | 内容 |
|---|---|
| 互联网 | 是一个全球互联的电脑网络系统 |
| 万维网 | 由超链接和URL连接的文件和其他资源的全球集合 |
1990
这一年的年底,万维网之父TIM Berners-Lee成功利用互联网实现了超文本传输协议客户端与服务器的第一次通讯,并开发了世界上第一个网页浏览器。
Web Browser 是一种用于检索并展示万维网信息资源的应用程序,由统一资源标识符URI标识。信息资源有网页、图片、影音,信息资源中的超链接可使用户方便浏览信息。
Info.cern.ch是世界上第一个网站及网站服务器。网站在一台位于CERN的NeXT计算机上运作
1993
欧洲核子研究组织将万维网软件置于公共领域,把万维网推广到全世界,让万维网科技获得迅速的发展
1994
万维网联盟W3C成立,HTML(HyperText Markup Language 超文本标记语言)正式确立为网页标准语言,用于创建网页,浏览器可读取HTML文件,渲染HTML文件为可视化网页。
静态网页时代
早期网页只支持<h1>、<p>、<a>标签,后来有了<img>和<table>标签,在此阶段,Web服务器只是一个静态资源服务器,客户端浏览器发访问请求,服务器来者不拒的建立连接,查找URL指向的静态页面,再返回给客户端。
静态网页后期的需求
静态网页的缺点是没发实现任何交互,也不能动态显示。
Navigator浏览器
1994年,网景公司发布Navigator浏览器,但急需一种网页脚本语言,使浏览器与网页互动。
1995
网景公司Brendan Eich(1961-) 花了10天时间设计了JS的最初版本,命名为Mocha,后来改名为JavaScript,从此网页有了简单的用户交互,比如:表单验证。
第一次浏览器大战
微软编写的浏览器 V.S 网景编写的浏览器,微软在windows系统里捆绑IE浏览器,网景失去大部分市场份额,并将JS向ECMA提交并制定了标准。最终以网景落败结束,网景在1998年公开了Navigator源代码,改名为Mozilla。
动态网页技术
1995年,以PHP为代表的后端网站技术开始活跃在各大网站,它让Web可以访问数据库,实现网页内容的动态展示、丰富的用户交互。接着ASP和JSP等各种动态网页技术出现,万维网进入高速发展时期,MVC模式开始出现在后端网站技术中。
PHP等动态网页技术的原理,根据客户端的请求,从数据库里获取相对应的数据,然后放在网页里,返回给客户端一个填充好内容的网页。
动态网页后期的需求
动态网页技术的缺点:网页总是刷新的、网页和后端逻辑混合、大量重复代码无法复用。
1996
万维网联盟W3C推出CSS规范的第一个版本,CSS(Cascading Style Sheets 层叠样式表),一种用来为结构化文档添加样式的语言。
1998
AJAX(Async JavaScript And XML),于1998年开始初步应用,2005年开始普及,Web2.0时代开启,通过AJAX来动态获取数据,利用DOM操作动态更新页面内容。
2004
第二次浏览器大战 2004-2016
Firefox、Safari(基于 webkit 内核)和Chrome(基于 webkit 内核)、IE以上四家主流浏览器竞争市场份额,最终,Chrome超越IE,第二次浏览器大战结束,竞争极大的推动了技术进步,谷歌研发出的V8引擎极大提升了JS的运行效率。
2008
SPA 单页应用
2008年,HTML5 草案提出,前端代码复杂度增加,前端开始考虑参考后端MVC进行设计和拆分,后来出现了三大前端框架:AngularJS(2009)、React(2010)、Vue(2014)。
单页应用返回一个空白的 HTML,并通过 JS 脚本进行动态生成内容,从此和页面刷新说拜拜。后端不再负责模板渲染,网页和 APP 开始对等,后端的 API 也可以通用化了。前后端终于得以分离。
NodeJS
NodeJS 的诞生来自于 Ryan Dahl 的灵感。他想以非阻塞的方式做所有事情,用完全异步方式可以处理非常多的请求(高并发)。
NodeJS 的出现让前端向全栈的发展迈出了重大的一步。很多公司开始用 NodeJS 搞 BFF(backend for frontend),我们也开始把 Controller 层放到 NodeJS 来处理,后端只负责基础业务数据。
这种架构在跨端的时候具有良好的适配性,我们可以根据业务需求,为不同端设计不同的 Controller 和 View,而后台可以不做变更。这种架构省去了很多沟通成本,前端专注页面的展示,后端专注业务逻辑。当然,NodeJS 还可以对后端数据进行预处理,前端根据自己的需要自己设计数据结构,页面开发与接口调试形成闭环,还为后端分担了压力。
2009
Facebook 的工程师开发了 bigPipe,让 Facebook 页面打开速度提高了两倍。bigPipe使用分块渲染的思想,将网页的渲染变成了一小块一小块的,服务端渲染好一块页面就发送给客户端。他们直接把木桶拆了,打破了短板效应。
2020
React 团队提出了 React Server Components,算是一个可扩展的前后端融合方案。其理念和 bigPipe 类似,把组件放在服务端渲染,节省了从浏览器进行数据请求的开支,一些运行时也可以不用放到浏览器,减小了包大小(如 markdown 在服务端渲染好了,也就不再需要把工具库发送给浏览器了)。React Server Components 的引入,也同步做到了自动的 Code Split。
React Server Components返回的不是HTML,而是带有结构和数据的自定义类JSON数据。
这种结构,是对服务端渲染的核心(结构+数据)进行抽象,结合 React 的工作方式(如 Suspense),平缓的从服务端过渡到了客户端,维持了组件状态,并且可以更自由的拼装服务器组件和客户端组件。
未来前端或许会往“小而美”的方向发展,甚至形成一个以服务端组件为单位的包管理器,网页打包大小会越来越小,更多的组件时从网络上直接获取。