Web:你知道我这十几年是怎么过来的吗?!

1989 年 3 月 12 日,在瑞士的欧洲核子研究中心工作的蒂姆·伯纳斯-李向他的老板递交了一篇题目为“Information Management: A Proposal”的建议书。后来人们把这一天当作万维网 (WWW, World Wide Web) 诞生的日子。一晃三十年过去,web 早已成为这个世界重要的组成部分。

但是 Web 真正开始走向巅峰,其实是从 2008 年开始的,在随后的十几年,它先是被宣布了死亡,随后又开始了大繁荣时期,经历了多个非常重要而精彩的时刻。

就在刚刚,在 Chrome 100 版本发布的日子,Google 发布了 Web 100 个令人激动的瞬间 (https://developer.chrome.com/blog/new-in-chrome-100/),同时也在推特上发起了 #100CoolWebMoments 活动,我们一起来感受一下这些激动人心的瞬间吧!

2008

谷歌浏览器诞生

693d1aa9ff3bb3903df5f45c9270515f.png

开启新的 Web 时代!

Github 1 岁了

fa30f3894abd1a62711f7a926bb534c2.png

最流行的 Web 存储库服务的诞生。

Web版 Office 套件诞生

42eb5cc36518514c5555f73331bbbfae.png

大大提升了 Windows 用户的 Web 的生产力。

WebPageTest 开源

7fe2bccda76447922c8daeb8ddf06329.png

跨浏览器自动化测试的时代开启!

WebKit 完全通过 ACID3

1eea3da8ea4d4425876db259d7c7e54d.png

Acid3 由网页标准计划小组(Web Standards Project, WSP)设计,是一份网页浏览器及设计软件之标准相容性的测试网页,Acid3是Web标准基准测试中最严格的一个,对 DOM 和 JavaScript 有着严格的约束

WebKit 是第一个完全通过 Acid3 的浏览器引擎!

2009

Node.js 开始由 V8 提供支持

ade01fd78688d9ef0fc0513a0bf35c65.png

2009 年,内嵌 V8Node.js 发布了第一个版本。在最初的 Chrome 漫画中明确提到了将 V8 嵌入到非浏览器项目中的可能性,而 Node.js 做到了!Node.js 成为最受欢迎的 JavaScript 生态系统之一。

第1版 Chrome 开发者工具诞生

12544bef53362bca3d377519d9e47fa9.png

基于 WebkitInspector 建立,通过 Chromium 开源!

7b371c5438e61da3b78ff516727e24eb.png

Web 浏览器在线调试时代开始!

ChromeOS 发布

bec9a560537a931de5e90d72c80fb0b2.png

专门为 Web 用户量身打造的操作系统,基于 Linux 开发、并且有开源版本。

Flexbox 第一个草案被提出

1bc1dcedefa9722ea13754b634d957c3.png

开启网络布局新时代!

Firefox 5岁了

34eafe635129c19fff2b0192a3d88278.png

新时代的浏览器正在快速崛起,挑战 IE!

Google Chrome Frame 发布

3af114478a5adad1ce9c046d63904824.png

Google Chrome FrameIE 仅剩下了皮囊,用户可以通过 Internet Explorer 的用户界面,以 Chrome 内核的渲染方式浏览网页。

Opera 放弃 Presto

f19eec380ce0ca7268b419c8c966f343.png

Opera 也开始启用 WebKit 内核。

2010

Wired:Web 已死

255f095e4b0e11f41fe5993a303e8817.png

Wired 是美国一份非常有名的权威杂志,万维网诞生二十年后,Wired 公开谈论 Web 正在衰落。

然后在 2014 年:Wired 又宣布 Web 没有死,打脸了 ...

Sundar Pichai 在 Google I/O 的演讲

af0afed465c6df26de241eff9c49d5d5.png

Sundar PichaiGoogleCEO,在这一届的 Google I/O ,中,他发表了一次非常振奋人心的演讲,开始大肆宣扬开放式 Web 的思想。

响应式网页设计

03431ee7db34741af5cba16354313f83.png

Ethan Marcotte 第一次提出了响应式网页设计的概念,并发表了一篇长篇论文来阐述他的观点。

Google 字体推出

0a6a8626003e4ff7a0dd57d4fa04315c.png

面向所有 Web 用户免费开放使用。

WebGL 进入 Beta 阶段

1bbeebd4ae889247e02eda62c2dfd669.png

一个改变 Web 3D 图形面貌的跨时代 API!

Pacman Doodle 诞生

52555c123d57a36c26dae8f493195e23.png

Google 基于 Pacman Doodle 开发了一款 Web 版的吃豆人游戏,从此引入了交互式 HTML 时代。

HTML5Rocks 发布

9dca34fa4d362018d8f8dd1dc99ef6c0.png

Html5 RocksGoogle 推出的 HTML5 学习推广的站点,开发者可以快速在上面了解 HTML5 的所有内容。

2011

ro.me

2af158f518d49b1f4a8304ab85c47b86.png

基于 WebGl 的半互动电影,在十年前非常惊艳!

HTML 规范从版本控制转变为动态文档

e64b09f7ba7ad3214e0e427fc77e81cc.png

HTML5 成了 HTML 最后一个版本号!

Web Audio API 诞生

8a6d7c6cae867ef0b9e03613f2843d83.png

解锁 Web 音频程序的设计!

WebRTC 诞生

eb82c63d5d44e176f27683c8d82c5169.png

开启网页即时通信时代!

2012

Web 实验室&博物馆

8687ddba85c0e26301dc62ce516535cc.png

Google 与伦敦科学博物馆合作发起了 Web Lab 项目。这是一个有五个展览的博物馆展览,你可以在线访问它们的网站,它允许网站访问者与真实展览进行实时交互。

媒体查询进入W3C推荐标准

716f34fdab6960d6ec77460fdc9dd246.png

为不同的设备创造更好的使用体验。

Web 图片响应式

95d2eecfd47ba0aa50ac1f5caf54b7be.png

响应式设计领域的又一壮举。

Chrome 发布 Android 版本

2f183d3265a65c6d140a94aaede4d213.png

Chrome 的桌面功能引入手机和平板电脑。

Service Workers 启动

1649f8260da98d92226a1493d6490c7c.png

Web 带来了强大的离线缓存能力!

2013

CSS Zen Garden 10 岁了

462453c52fb9e092cb2d61f253e3f404.png

CSS禅园成立于2003年5月,是一个非常伟大的网页设计网站!

Finding Ada

1cde3c8f2f512f8d1b7309cd627fc4b6.png

findingada 是一个致力于鼓励女性进入 STEM (科学、技术、工程和数学)领域的组织。

2013年的3月8日,国际妇女节,findingada 公布了 10 位在 Web 届最有影响力的女性。

Chrome Frame 弃用

1145ecc82ae41c9e8e2a1b4f0c99707c.png

出道没多久就凉了 ...

Web 标准项目 (WaSP) 结束

99bef3929e77e078e7c5728c9546e0a3.png

Web 标准项目 (WaSP) 于 1998 年成立时,Web 是两家浏览器制造商 — Netscape 和微软之间不断升级的战争,WaSP 的主要目标是让浏览器制造商支持万维网联盟 (W3C) 制定的标准,如今它完成了自己的使命。

JavaScript 开始支持 Promise API

d069d5c71d45bbb42859f4dd8a9e43d8.png

改变了 JavaScript 异步代码的编写方式。

Blink 引擎发布

c9b7d273e4485c4190c38ac97290e71f.png

Blink, 基于 WebKit 的全新开源渲染引擎。

Android WebView

be0cae1c974c34d478dd1d12c6c7f447.png

Android 4.4 开始,正式支持基于 ChromiumWebView

2014

Chrome 小恐龙

729fda93171bc0a94a73a7f142c7b138.png

一个复活节彩蛋,让你在没网的时候也能玩会小游戏 ...

Let's Encrypt

1c63688a206a0ef8b1ac62c74dc95c7b.png

2014 年,Chrome 开始统计启用了 HTTPS 协议的网站,

jQuery - 标准驱动未来

0320867b399e2b436a9fbbd549c93c55.png

jQuery 对 Web 的贡献绝对不止于一个库那么简答, 它为 Web 贡献了多项标准,比如 querySelectorAll 选择器、另外 XMLHttpRequest 标准也参考了 jQuery$.ajax 设计。

HTML5 原生拖拽

efc67250e2b6d03992762e5e5ad7bea1.png

大大提升了 Web 交互式应用的设计能力。

Material Design 诞生

74b023cce43be1e828f2d13289383132.png

现代化质感设计的新时代。

2015

PWA 诞生

6ec6133925a6ae7ff562ddbc11898678.png

PWAProgressive Web Apps,渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富,使其具有与原生应用相同的用户体验优势。Alex Russell 首次提出了这个概念。

IE 终结 & Edge 诞生

8d985af0385850fa9a47ba8b1d5bbe4b.png

微软的新版浏览器代号为 “Project Spartan”。2015年4月30日,微软在旧金山举行的 Build 2015 开发者大会上宣布,其最新操作系统 — Windows10 内置代号为 “Project Spartan” 的新浏览器被正式命名为 “Microsoft Edge”。

Web 消息推送

8d12c38e78dff4497626925989eead51.png

Web 首次具备推送通知的能力。

WebAssembly 诞生

1bb21092e944b085e6acd171e2ddc0b7.png

Mozilla、Chromium、Edge、WebKit 的工程师共同开始定制 WebAssembly 标准。

MDN 10 岁了

e1ea3a5fae44a01e07b3b9b40109b2b9.png

在 2005 年初,一个由理想主义者组成的小团队开始为所有 Web 开发人者创建一个新的、免费的、社区构建的在线资源。十年后,MDN 已成为全球最大的 Web 资源学习网站。

IndexedDB 进入 W3C 标准

0ee60d2aa5040434140913ca68e395be.png

通俗地说,IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。

2016

快速涂鸦

b371380240c3bd22363d77a5b4fe23a9.png

一个基于机器学习的 Web App,也是跨时代的 Web 应用。

https://quickdraw.withgoogle.com/

Chrome 开发者大会上的萨克斯手

ca94b97e7a062f1cafcfb22c261e82eb.png

两位有才的程序员给我们带来了一场不一样的 Chrome 开发者大会。

H5 流媒体能力

0eec664e502ae7977d59769afcf1dd19.png

HTML5 中,无需依赖 FlashSilverlight 插件就可以播放视频!

WebKit Web Inspector 10 岁了

4bc94a41cb24c6a783899497501aa8fe.png

还记得那个只能通过 alert() 进行调试的时代吗?

2017

MDN Web 文档启动

f7f75f36aa16e54f17e52045a8575b18.png

MozillaMicrosoftGoogleW3C、三星联合起来在 MDN 上创建跨浏览器的 Web 文档。

Glitch.com 启动

005fad42f3d42a1872aa4c1b935549d1.png

为开发者提供了一种在浏览器中进行编辑的简便方法。

网页设计博物馆

5128e8c76f5b7d9f04eb8075cb55c906.png

保留网页设计的历史。https://www.webdesignmuseum.org/

Photopea

6f29180e7b4d0593b36a2bd978deec84.png

由一个人开发的 Web 图像编辑器!https://www.photopea.com/

CSS Grid 布局诞生

9ae0b4b960db15389b702ab0b1902028.png

又一个跨时代的布局方式,所有主流浏览器都进行了支持。

Web Components 诞生

87f1d8447d25d004a3d0baf4d9b25d4d.png

浏览器的原生组件:简单直接,符合直觉,不用加载任何外部模块,代码量小。

2018

Meltdown 和 Spectre 漏洞被发现

95e9eb241a4aa27344a0edc5b0dbfc37.png

我之前专门写过一篇文章介绍它们:通过几行 JS 就可以读取电脑上的所有数据?

web.dev 诞生

279681b3a424db8bc0db7665b780d774.png

一个非常棒的 Web 社区:https://web.dev/

Squoosh 诞生

9e382771e04450986a6000df2fba3ab5.png

一个 Web 图像压缩程序,现在已经非常流行!https://squoosh.app/

webOS OSE 开源

98a523d8d9836fa890beca79452729e0.png

webOS 是一款基于 Chromium 的多任务操作系统,LG 将其开源。

Fugu 计划开始

7c7a6dbe843b6b7826a3f3230a0ca7d4.png

Fugu 计划的目标:Web 应用应该实现原生应用的所有功能。

浏览器的工作原理

4b00c5c82316d153ab4b6cccb28418f4.png

一个非常有名的解读浏览器原理的文章,现在很多介绍浏览器工作原理的文章都会参考它:https://developer.chrome.com/blog/inside-browser-part1/

2019

W3C 开始和 WHATWG 合作

f7d2e72618337efd923f79ed8fb0cfbd.png

WHATWG 是由四个主要的浏览器厂商(包括苹果、谷歌、微软、Mozilla)组成的行业组织,它和 W3C(万维网联盟) 一直在争夺 Web 的标准定制权。终于在这一年达成了共识。

桌面端应用支持 PWA

c0ea4496b202197f14fe271db3ad8f81.png

Chrome 73 添加了对 macOS 的支持,为所有桌面平台(Mac、Windows、Chrome OSLinux)以及移动平台带来了对渐进式 Web 应用程序的支持,从而简化了 Web 应用程序的开发。

互联网博物馆

fc85594b412fa614251812d62f5fe482.png

记录 Web 的历史。

Firefox 启动 4 周发布周期

fa25a84d376395e2d39bd3a15bd4b3e3.png

Firefox 加快了它们的发布周期,为开发者带来了更多的敏捷性和功能。

Web 30 岁了

fe34415031160621f3a8f2f1b0c6eea0.png

1989 - 2019Web 已走过了 30 个年头。

Web 支持原生懒加载

c5509aaa7779c19bb752c4166c1b7ceb.png

只需一个属性 <img loading=lazy> ,即可拥有浏览器原生的懒加载能力。

2020

Flash 终结

c723497c47ba82bfbe705844d35712e7.png

“就像许多美好的事物一样,它的时代已经过去了。”

Open Web Docs

0f05126689c9187b4671fac9c8cd9ebb.png

一项维护 Web 文档的生态系统范围的倡议。

CSS 支持逻辑属性

43150dc5ea117416ea21b0fa2c4cde45.png

样式编写拥有了更多的灵活性。

SpaceX ISS 对接模拟器

17838ea5c6f24d6dc0f8d4a301780bc5.png

一个基于 Web 的模拟器,你可以手动与国际空间站对接。https://iss-sim.spacex.com/

Edge 采用 Chromium

648ad4e7862e7a825b5bc6ad5a5582d9.png

宣布放弃 EdgeHTML

不那么烦人的通知

860783a734d661395aacc66acbca8e35.png

ChromeFirefox 一起改进了 Web 通知的用户体验。

2021

Chrome 默认使用 HTTPS

9efdd72fe7cb81b64a80ea0c62166c1b.png

如果访问网页的时候不输入协议,浏览器开始默认启用 HTTPS

NASA 火星着陆模拟器

60a4923690d887fe1e38e40d983a0194.png

一个基于 WebGL 的模拟器。https://eyes.nasa.gov/apps/mars2020/#/home

RenderingNG

ba4242478611069ddef117f161c11ce9.png

RenderingNG 目标成为所有 Web 渲染引擎新的最低标准和开发者信任的新基线。

vscode.dev 启动

c156e36f1a83d88ef7e59ba0e070dd10.png

在浏览器打开 vscode 成为可能,掀起了一股 WEB IDE 的热潮!

DojaCode

9fb1aac302250785177c89ca974a3ab2.png

世界上第一个可编码的音乐视频。https://dojacode.com/

Compat 2021

8c07876a79038e529874a9c8d91b14c1.png

消除 Web 上的五个主要兼容性痛点:https://web.dev/compat2021/

2022

Canvas2D

cbfde0234ed6a98d9470e485f12ba3e3.png

Chrome 99 中推出了最新的 Canvas APIhttps://developer.chrome.com/blog/canvas2d/

Cascade Layers (CSS @layer)

0b0a063fab7018250197b2d3c4035f64.png

CSS Cascade Layers ,也叫做 CSS级联层 ,是 Cascading and Inheritance Level5 规范中新增了一个新的 CSS 特性,对应的 CSS 属性写法 @layer ,即一个新的 @ 规则。

Interop 2022

6b9bfc2ed4ebdf02a126acd051be50f4.png

各大浏览器厂商联合起来一起改进 Web 兼容性问题。

Oculus 中的 PWA

ce9c50276aca6c50432d02d65fc0ea55.png

MetaWeb 的力量带到了 VR 中。

Chrome 100

d18d537a9e3f20d676d598326bb8c57f.png

Chrome 版本来到三位数!

怎么样,看完有没有感觉很激动呢,在评论区留下你认为 Web 让你最激动的瞬间吧!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值