浏览器

浏览器是实现 Web 平台的用户代理：负责导航与网络请求、HTML/CSS 解析与渲染、JavaScript 执行、站点隔离与权限、存储缓存以及用户界面，并通过多进程/多线程架构把这些职责隔离。

#frontend #web #concept #growing

[!info] related notes

渲染: 浏览器渲染过程

导航: 输入 URL 后发生什么

JavaScript 宿主: JavaScript in Browser MOC

安全边界: Same-Origin

存储: 浏览器客户端存储, 浏览器缓存体系

调试: 浏览器开发者工具 MOC

浏览器

一句话定义

浏览器不是“显示 HTML 的程序”这么简单。

更完整地说，它是 Web 平台的 user agent，负责把：

URL / navigation；
HTTP/TLS；
HTML / CSS；
JavaScript；
storage / cache；
permissions / security policy；

组合成可交互页面。

一条最小导航链

可以先记成：

URL → DNS / connection / HTTP → HTML → DOM/CSSOM → layout → paint/composite → JavaScript 持续交互。

真实实现更复杂，但这条主线能把网络、渲染和运行时串起来。

详见输入 URL 后发生什么。

浏览器不是单线程程序

“JavaScript 单线程”只描述默认页面 JS 执行模型的一部分。

现代浏览器通常包含多个进程/线程，用于：

browser/UI；
renderer；
network；
GPU；
storage / utility；
worker 等。

JavaScript main thread 还要与 DOM、style、layout、paint、event loop 等协调。

所以：

JavaScript 主线程 ≠ 整个浏览器只有一个线程。

Renderer 的核心职责

页面渲染进程主要负责：

HTML 解析为 DOM；
CSS 解析与样式计算；
layout；
paint / composite；
JavaScript 执行；
event / interaction。

完整渲染链见浏览器渲染过程。

JavaScript 是宿主中的一部分

ECMAScript 本身没有：

DOM；
fetch；
localStorage；
setTimeout；
WebSocket。

这些是浏览器 Web APIs / host capabilities。

所以应区分：

ECMAScript language → browser host APIs → page application。

见 JavaScript in Browser MOC。

Security Boundary

浏览器同时也是安全边界。

它通过：

Same-Origin Policy；
CORS；
CSP；
Cookie 属性；
permissions；
sandbox/site isolation；

限制一个页面能读取、执行或影响什么。

这也是为什么“前端代码能看到什么”不能只按 JavaScript 语言能力理解。

Storage 与 Cache

浏览器中至少要区分：

Cookie；
localStorage / sessionStorage；
IndexedDB；
Cache Storage；
HTTP cache；
BFCache；

它们解决不同问题。

详见浏览器客户端存储与浏览器缓存体系。

生命周期

页面不是只有“加载完成”一个状态。

常见阶段包括：

navigation；
parsing/loading；
interactive；
background / hidden；
BFCache；
unload / discard。

不同阶段会影响 timer、network、visibility、state recovery 等行为。

Browser 与 Web App 的边界

浏览器负责平台与执行环境；应用负责自己的业务状态和 UI 逻辑。

例如：

浏览器提供 HTTP cache，但应用决定 API cache/invalidation；
浏览器提供 storage，但应用决定 schema/ownership；
浏览器提供 event loop，但应用决定 task 结构；
浏览器提供安全机制，但服务端仍要做 authentication/authorization。

学习检查

为什么“浏览器 = HTML 查看器”过于狭窄？
JavaScript 单线程为什么不等于浏览器单线程？
ECMAScript 与 DOM/fetch/localStorage 的关系是什么？
浏览器为什么既是运行时也是安全边界？
Cookie、IndexedDB、HTTP cache 为什么不能统一理解成“本地存储”？
给一次页面导航，按网络 → 解析 → 渲染 → JS 交互画出主链路。