浏览器原理知识点索引

设计理念：从渲染流程、缓存、安全到性能优化与扩展开发，覆盖前端面试核心考点。

知识结构图

┌────────────────────────────────────────────────────────────────────────┐
│                        浏览器知识体系                                   │
├────────────────────────────────────────────────────────────────────────┤
│                                                                        │
│   ┌─────────────┐    ┌─────────────┐    ┌─────────────┐               │
│   │  核心篇     │    │  深入篇     │    │  实践篇     │               │
│   │  (原理基础) │───▶│  (性能进阶) │───▶│  (开发场景) │               │
│   └─────────────┘    └─────────────┘    └─────────────┘               │
│         │                  │                  │                        │
│         ▼                  ▼                  ▼                        │
│   渲染/缓存/安全      性能/SW/Canvas      观察者/插件                   │
│   Storage/Worker     Core Web Vitals     Manifest V3                   │
│                                                                        │
└────────────────────────────────────────────────────────────────────────┘

核心篇

文件	主题	核心内容
01-core-rendering.md	渲染流程与重排重绘	关键渲染路径、重排重绘触发条件、图层与合成、渲染优化策略
02-core-cache.md	浏览器缓存策略	强缓存与协商缓存、Cache-Control 详解、Service Worker 缓存（缓存场景，详见 07 完整生命周期）
03-core-security.md	浏览器安全	XSS/CSRF 攻击与防御、CORS 跨域、CSP、点击劫持
05-core-web-storage.md	Web Storage API	localStorage/sessionStorage、IndexedDB、Cookie 详解
06-core-web-worker.md	Web Worker	Dedicated/Shared Worker、数据传输与 Transferable

深入篇

文件	主题	核心内容
04-deep-performance.md	性能优化策略	加载优化、运行时优化、Core Web Vitals、requestIdleCallback
07-deep-service-worker.md	Service Worker 与 PWA	生命周期、缓存策略、推送通知（与 02 缓存场景互补）
09-deep-canvas.md	Canvas 绘图与动画	Canvas 2D API、动画实现、性能优化
11-deep-process-architecture.md	浏览器多进程架构	Chrome 进程模型、渲染进程、GPU 进程、Site Isolation
12-deep-resource-loading.md	资源加载与优先级	preload/prefetch/modulepreload、fetchpriority、懒加载

实践篇

文件	主题	核心内容
08-practice-observers.md	观察者 API	IntersectionObserver、MutationObserver、ResizeObserver
10-practice-extension.md	浏览器插件开发	Manifest V3 配置、核心组件、消息通信
13-practice-devtools-debugging.md	DevTools 性能分析	Performance 火焰图、长任务定位、内存分析、Lighthouse

学习路线

入门 (0-1 年)              进阶 (1-3 年)              深入 (3+ 年)
─────────────             ─────────────             ─────────────
01 渲染 → 02 缓存          04 性能 → 08 观察者        07 SW → 09 Canvas
03 安全                    05 Storage → 06 Worker    10 插件开发
                           11 进程架构 → 12 资源加载  13 DevTools

面试高频考点

渲染与性能

[ ] 重排与重绘的区别？如何优化？
[ ] 浏览器渲染流程（DOM → CSSOM → Render Tree → Layout → Paint → Composite）？
[ ] 哪些属性只触发合成不触发重排？
[ ] requestAnimationFrame 与 requestIdleCallback 的区别？

缓存

[ ] 强缓存与协商缓存的区别？Cache-Control 各指令含义？
[ ] Service Worker 与 HTTP 缓存的配合策略？

安全

[ ] XSS 和 CSRF 的区别？如何防御？
[ ] CORS 的完整流程？预检请求何时触发？
[ ] CSP 内容安全策略如何配置？

存储与 Worker

[ ] localStorage、sessionStorage、Cookie 的区别？
[ ] Web Worker 与主线程如何通信？Transferable 的作用？

进程与调试

[ ] Chrome 有哪些进程？渲染进程如何隔离？
[ ] preload 和 prefetch 的区别？
[ ] 如何用 Performance 面板排查页面卡顿？

代码示例

examples/
├── observers/          # IntersectionObserver 懒加载
├── service-worker/     # PWA 缓存策略
├── extension/          # Manifest V3 示例
└── resource-loading/   # preload/prefetch 示例

浏览器原理知识点索引 ​

知识结构图 ​

核心篇 ​

深入篇 ​

实践篇 ​

学习路线 ​

推荐阅读顺序 ​

面试高频考点 ​

渲染与性能 ​

缓存 ​

安全 ​

存储与 Worker ​

进程与调试 ​

代码示例 ​

浏览器原理知识点索引

知识结构图

核心篇

深入篇

实践篇

学习路线

推荐阅读顺序

面试高频考点

渲染与性能

缓存

安全

存储与 Worker

进程与调试

代码示例