浏览器

理解浏览器做什么——渲染、执行 JavaScript、缓存与存储。

你将学到

浏览器是什么、核心职责
渲染如何把 HTML/CSS 变成像素
浏览器如何缓存资源以提速
localStorage 和 cookies 各有什么用

概念讲解

浏览器

浏览器（Chrome、Firefox、Safari、Edge）是获取、解释并显示网页的应用程序。它是客户端–服务器模型中的客户端。对用户来说它是通往 Web 的窗口；对开发者来说它是运行时、渲染器和工具箱。

浏览器的核心职责

获取 —— 向服务器请求 HTML、CSS、JS、图片。
解析 —— 读 HTML 建 DOM，读 CSS 建 CSSOM。
渲染 —— 把 DOM 和 CSSOM 合成渲染树，布局元素，把像素画到屏幕。
执行 —— 通过内置引擎（Chrome 的 V8、Firefox 的 SpiderMonkey）运行 JavaScript。
响应 —— 用户点击、输入、滚动时触发事件。

缓存

浏览器会缓存（保存）资源，下次访问就不必重新下载。这就是网站第二次打开更快的原因。作为开发者，你用 HTTP 头（Cache-Control、ETag）控制缓存。把缓存调好是 Web 性能的关键一环。

存储

浏览器提供几种在用户设备上存数据的方式：

Cookies —— 小型键值对，每次请求都带上。用于会话和追踪。
localStorage —— 容量更大，除非清除否则一直在，且不会发给服务器。适合存用户偏好。
sessionStorage —— 像 localStorage，但标签页关闭即清空。
IndexedDB —— 用于大型结构化数据的数据库。

开发者为何关心

浏览器是你的执行环境。懂它如何渲染、缓存、存储，能帮你构建更快更稳的网站。浏览器内置的开发者工具（本主题后面会讲）是你观察浏览器行为的主要窗口。

示例代码

              // 用 localStorage 记住用户主题选择
function applyTheme(theme) {
  document.body.className = theme;
  localStorage.setItem("theme", theme);   // 持久化
}

// 页面加载时恢复保存的主题
const savedTheme = localStorage.getItem("theme") || "light";
applyTheme(savedTheme);

// 切换主题的按钮
document.getElementById("toggle").addEventListener("click", () => {
  const current = localStorage.getItem("theme");
  applyTheme(current === "light" ? "dark" : "light");
});

localStorage 保存主题，使其跨刷新和重启依然保留。与 cookie 不同，它不会发给服务器——是纯粹的客户端状态。

动手试一试

JWT Decoder
浏览器把 JWT 存在 localStorage 或 cookie 里。解码一个看看浏览器会携带的载荷。

常见错误

错误写法

把敏感数据（密码、令牌）存进 localStorage。

正确做法

localStorage 能被页面上任何 JavaScript 读取，因此怕 XSS。敏感会话数据用 httpOnly cookie；localStorage 只存非敏感偏好。

错误写法

假设每个用户都用最新浏览器。

正确做法

用 caniuse.com 查特性支持并提供降级。老浏览器可能缺现代 API。Babel 这类工具能转译代码以兼容更多环境。

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误

浏览器