5、其他超级应用或跨端容器应用(比如美团、Google Maps、…):通过黄页导航、地图上的 POI 等各种方式来找到要访问的 Web。
我们平时说的「浏览器」专指那种有地址栏的传统浏览器应用,是延续了桌面平台的习惯和理解,因为在桌面时代,这种形态的浏览器几乎是唯一的「超级应用」。
从移动互联网时代开始,它们就已经不再是唯一的「浏览器」了(不是唯一提供 Web Runtime、提供 Web 应用平台能力的超级应用)。
以上五种应用形态本质上都是浏览器,其中有的就是更现代的浏览器,有的是为垂直领域做专门优化的浏览器。
Web Runtime 本身(「画布」部分)就是一个最基本的「Web 平台」。
以上这些提供 Web Runtime 的平台级软件(Chrome、Chrome OS、微信、头条、飞书们),也都是「Web 平台」,它们在「画布」基础上增加了各自的「画框」部分,形成了更实用的、更贴近业务领域和用户群体的「Web 平台」。
反过来说,一个平台越是跟 Web Runtime 紧密结合,就越具备「Web 平台」的能力和特点(比如 Chromebook 相对于同样在系统层面集成了浏览器引擎的 iPad)。
1.1.2 应用平台Web Runtime 作为最基本的「Web 平台」,是一种标准化(称作「Web 标准」)的软件应用平台,隐藏了更下层软件平台的差异(比如不同硬件、不同 OS、不同底层 API),提供了跨平台的、抽象程度更高的、开发成本和门槛通常都更低的软件开发能力。
传统 Web 是以超文本文档(可交互的 2D 图文)内容为中心的。
HTML 这样标准化的「标记语言」(负责实现内容和结构),加上 CSS 这样的「样式声明语言」(负责实现外观),是这种软件开发能力的核心。
Web Runtime 为此提供:
- 布局引擎:按照 Web 标准,把 HTML 从纯文本,解析成文档节点对象(DOM 对象)组成的树状数据结构(称作 Content Tree),结合 CSS 中的声明,生成由矩形(盒状模型)组成的树状数据结构(称作 Render Tree 或 Frame Tree),经过自动布局(Layout,也称作 Reflow,简单的情况下相当于做图文排版),最后「绘制」(Paint)出网页内容。
- 网页内容由各种媒体形式组成:纯文本、「超文本」(包含链接的文本)、图片、视频音频、动画等
- 网页内容的默认交互行为:链接和锚点的跳转,表单输入和提交
https://web.dev/howbrowserswork/
如果 Web Runtime 仅限于这种能力,就只是一种内容阅读器或播放器(虽然这方面能力也很重要)。
但在现代的 Web 开发中,不仅不止这方面能力,而且这部分能力由于抽象程度太高、太垂直化(原本是为「内容」开发而设计的)、不够灵活强大、不一定适应「应用」开发的需求,经常被边缘化或隐藏。
更现代的 Web 是以程序语言为中心的。
软件开发能力的核心是 JS(JavaScript) 和 WebAssembly 这两种标准化的 Web 原生语言。
- JS 侧重「生产侧」和「DX(开发者体验)」
- 用于业务需求的实现。
- JS 还包含 TypeScript 等变体。
- WebAssembly 侧重「消费侧」和「UX(用户体验)」
- 用于性能优化、跟底层打交道和非 Web 程序的移植。
Web Runtime 中为此提供:
- JS 引擎:能标准化的执行 Web 原生语言的虚拟机,让语言既可以做计算,也可以调用 Web API
- 内部包含实时编译成原生机器代码、根据运行结果自动优化代码、垃圾回收等能力。
- 宿主环境:不断运行着事件循环,通过各种事件(比如页面加载、键鼠点击、XR 设备交互)来驱动 JS 引擎中的 Web 程序
- Web API:宿主环境也提供可被编程语言调用的、标准化的 API,让 Web 程序能实现各种:
- 「输入」功能:监听人机交互事件、监听网络通信事件、监听本地读写事件等
- 「输出」功能:UI 布局、动画、2D 或 3D 的图形渲染、音频视频、本地存储、网络通信等
为了理解 Web Runtime,还必须同时理解里面跑的 Web 应用:
1.1.3 Web 应用为了避免「Web 应用」这个词跟下文中狭义的「Web App」混淆,在下文里改称为「Web 软件」。
标准化的 Web 软件在分发的时候,是一堆不同格式的 Web 文件,可以被 Web Runtime 通过标准化的网络、用标准化的方式按需获取,再标准化的解析和运行。