博客列表

浏览器历史及富媒体技术

世界正在加速演进和分裂，我们从信息智能走向具身智能走向生物智能。一切需要摄入、推演、呈现。数字化是基石，浏览器是窗口。

chromebook

石器时代

1990: WorldWideWeb (后改名为Nexus)

  • 不只是浏览器，也是网页编辑器
  • 只能在NeXT计算机上运行，支持基本的HTML标签，如标题、段落和链接

Tim Berners-Lee在CERN工作时，发现科学家们需要一种更有效的方式来共享信息。他的解决方案是创建一个超文本系统。

1992: Erwise

  • 由四名赫尔辛基理工大学的学生作为硕士项目开发
  • 支持多窗口操作和基本的图形显示

1992: ViolaWWW

  • 由加州大学伯克利分校的Pei-Yuan Wei开发
  • 引入了嵌入式小程序和脚本语言，使网页具有动态交互性

1993: NCSA Mosaic

  • 由伊利诺伊大学厄巴纳-香槟分校的Marc Andreessen和Eric Bina开发
  • 第一个支持图像内联显示的流行浏览器
  • 引入了许多现代浏览器的基本功能,如书签和后退/前进按钮

1994: Netscape Navigator

  • Marc Andreessen离开NCSA后，与Jim Clark共同创立了NCC，开发了网景浏览器
  • 引入了JavaScript和cookies，这些技术至今仍是现代网页不可或缺的一部分

然而，Netscape的成功并未持续太久。 1995年，微软发布了Internet Explorer，它与Windows操作系统捆绑，迅速占领了市场份额。这场竞争推动了Web标准的发展，改变了人们对互联网和软件分发的看法，但也导致了一些不兼容问题。

1998年11月，AOL以42亿美元收购了Netscape。试图通过整合Netscape的技术和品牌来增强其互联网服务，但最终未能成功复兴Netscape浏览器。

2003年，AOL正式解散Netscape部门,但保留了品牌和某些资产。

2007年，AOL宣布停止支持Netscape浏览器。Netscape的源代码被开源，成为Mozilla项目的基础。IE统治了浏览器很长时间，Firefox（Gecko 引擎）首先削弱了它，最终被Chromium（Blink 引擎）取代。

单进程浏览器

传统浏览器有着如今看来致命的问题，所有功能模块都运行在同一个进程中。单进程架构一个运行错误会导致所有网页窗口崩溃、JS单任务执行慢导致其他任务同步等待。

现代浏览器

目前活跃的分支有

  • Blink（Chrome、Edge、Opera、Vivaldi、Brave、Samsung Internet、UC Browser 等）
  • WebKit（苹果系）
  • Gecko（Firefox分支）

面向服务的架构 SOA架构 Chrome在2008年发表了多进程架构，2016年Chrome提出了以SOA导向为基础的架构。各个浏览器中的程序可以以服务角度被拆分或聚合，运行在独立进程中，进程间通过IPC沟通，让系统架构实现高内聚、低耦合、易扩展与易维护的特性。同时在低端设备上，Chrome又合并为单进程节省资源耗费，达到更弹性的平衡架构。

现代浏览器架构

如上图为多进程架构，其中每个进程负责特定任务，例如渲染、网络、插件执行、存储、GPU进程。

  • 每个进程都可以看作是向浏览器提供特定功能的服务
  • 服务使用 IPC 机制（例如管道、套接字或共享内存）相互通信
  • 服务管理器负责管理服务的生命周期，包括创建、启动和停止服务
  • 服务可以使用服务发现机制（例如注册和查找）相互发现

记忆体使用量

此外，现代浏览器具备高性能JS引擎，使得复杂的Web应用（如Google Docs和Facebook）能够在浏览器中流畅运行

  • V8(Chrome)、SpiderMonkey(Firefox)、JSCore(Safari)
  • JIT技术大幅提升JS执行速度

富媒体

富媒体属于现代浏览器软件特性的一种，它极大的丰富了使用者的观感体验。

音频

  • 编码：使用 MP3、AAC 或 Opus 等编解码器进行编码
  • 解码：通常使用 Web Audio API 实现，它支持音频节点的连接和音频流实时处理
  • 缓冲：解码后数据存储在缓冲区中，以确保流畅播放。缓冲区大小根据网络状况和播放速度动态调整
  • 渲染：使用音频渲染引擎生成音频波形，并将其发送到操作系统的音频设备

图像

  • 解码：使用 libjpeg、libpng 或 WebP 等解码器对图像数据进行解码
  • 渲染：通常使用 Skia（Chrome、Firefox）或 Core Graphics（Safari）实现
  • 图形处理单元加速：使用 GPU 加速来渲染图像，将渲染过程从 CPU 转移到 GPU
  • 合成：浏览器合成多层图像，包括背景、内容和叠加层，以创建最终渲染的图像

图像渲染

渲染合成的工作包括顶点着色器、图元装配、光栅化、片段着色器、混合图层、帧缓冲区等模块协同。

视频

  • 视频：使用H.264、VP9和AV1等编解码器来处理视频数据。渲染过程通常使用视频渲染引擎和GPU加速来实现。
  • WebRTC通常还会用到libvpx和Opus。
  • 媒体源扩展：媒体播放器使用媒体源扩展 (MSE) 管理媒体流，包括缓冲、搜索和播放速率控制。

其它能力

  • WASM允许其他语言在浏览器以接近原生速度运行，使得浏览器能够运行高性能的应用，如3D游戏和视频编辑器
  • 开发者工具：内置强大调试、分析、监控工具
  • SW允许Web应用离线状态下工作，并提供推送通知和后台同步功能。这使得Web应用能够提供类似于本地应用的用户体验

定制浏览器

特殊用途的定制浏览器展示了web技术的多功能性。通过针对性优化，扩展了传统浏览器的功能边界。适应不同场景和设备类型，为用户提供更丰富专业的Web体验。

电视浏览器

  • 针对大屏和遥控器操作进行优化
  • 大字体、简化导航、支持语音控制
  • 如：webOS、Tizen

Web3浏览器

主机浏览器

车载浏览器

AR/VR浏览器

ChromeOS

浏览器通过调用操作系统API扩展能力，谷歌还构建了基于浏览器的操作系统生态：

  • DirectX (Windows) 或 OpenGL (macOS、Linux)：访问 GPU 并执行图形渲染
  • 视频解码：通过 GPU 解码视频数据（VideoToolbox）
  • 加速 2D 绘图：利用Windows GDI 或 macOS Core Graphics API
  • 音频处理：Windows Audio 或 macOS Core Audio API
  • WebRTC：利用Windows Media Foundation 或 macOS AVFoundation API访问摄像头和麦克风硬件
  • WebGL 和 WebVR：利用Windows DirectX 或 macOS Metal API访问 GPU 并执行 3D 渲染和虚拟现实任务
  • 字体渲染： Windows DirectWrite 或 macOS Core Text API访问字体数据
  • 触摸输入：Windows Touch 或 macOS 手势识别API
  • 辅助功能：Windows Accessibility 或 macOS Accessibility API

以下是一个简化的ChromeOS架构图，展示了操作系统、浏览器和硬件之间的交互。ChromeOS设计为快速启动，通常在几秒钟内即可启动。

ChromeOS

  • 用户界面：包括桌面环境、窗口管理器和系统设置，提供用户与系统交互的界面。
  • 系统服务：包括Upstart（初始化系统）、Crostini（Linux容器）和安全服务，管理系统级功能。
  • Chrome浏览器：核心组件，基于Chromium项目，使用Blink渲染引擎和V8 JavaScript引擎。支持Web应用、Android应用和Linux应用。
  • 媒体APIs：处理富媒体内容，如音频、视频和实时通信。
  • 存储APIs：处理文件和数据存储，包括File API、IndexedDB、Web Storage和File System Access API。
  • Linux内核：底层操作系统内核，负责硬件管理、进程调度、内存管理和文件系统。
  • HAL：提供硬件与操作系统之间的接口，使操作系统可以在不同硬件平台上运行。
  • 硬件：包括CPU、GPU、存储、网络、外设和显示设备。

阅读更多