浏览器与网络总览
这部分主要回答几类很典型的问题：页面为什么能打开、为什么有时候很慢、为什么缓存看起来像失效了、还有安全问题到底是怎么来的。
浏览器与网络
关于浏览器相关知识点总结, 持续更新中……
URL、DNS 与连接建立
浏览器网络这一层里，很多问题表面看像“接口慢”或“页面打不开”，实际根子可能在请求真正发出去之前。
HTTP 与 HTTPS
这篇主要解决什么问题
浏览器渲染流程
从字节到页面的大致过程
浏览器缓存
两类核心缓存
浏览器性能指标与观察能力
浏览器与网络这一层，很多优化讨论最后都会落到一个问题：到底是哪里慢。
跨域与前端安全
同源策略是什么
Service Worker 与 PWA
前端里一提到离线、预缓存、安装到桌面、后台同步，主线基本都会落到 Service Worker 和 PWA。
BroadcastChannel 与多标签页通信
BroadcastChannel 是浏览器提供的一个同源通信 API，可以让同一个站点下的多个标签页、窗口、iframe 甚至部分 worker 之间直接发消息。
浏览器存储机制
常见存储能力对比
推荐阅读顺序
总览内容：先把旧版回顾型内容串起来URL、DNS 与连接建立：看请求真正发出去之前发生了什么HTTP 与 HTTPS：理解协议版本、TLS 和请求生命周期浏览器渲染流程：理解浏览器如何把代码变成页面浏览器缓存：掌握强缓存、协商缓存和静态资源策略浏览器性能指标与观察能力：把 TTFB、FCP、LCP、CLS、INP 接到真实排查跨域与安全：梳理跨域、XSS、CSRF、Cookie 安全Service Worker 与 PWA：理解离线缓存、更新策略和可安装能力浏览器存储：区分 Cookie、Storage、IndexedDB、Cache StorageBroadcastChannel 与多标签页通信：理解同源页面之间怎么同 步事件和轻量状态
这里收了什么
总览内容：保留原来的回顾型内容，方便回头查URL、DNS 与连接建立：从 URL 解析、DNS、建连到 TTFB 的主链路HTTP 与 HTTPS：请求生命周期、协议版本、TLS、状态码浏览器渲染流程：解析、布局、绘制、合成和性能切入点浏览器缓存：缓存命中规则与更新策略浏览器性能指标与观察能力：Performance API、Navigation Timing、Core Web Vitals跨域与安全：同源策略、CORS 和前端常见安全问题Service Worker 与 PWA：离线缓存、更新控制、manifest 和安装能力浏览器存储：浏览器端存储能力与取舍BroadcastChannel 与多标签页通信：多标签页之间的事件广播、状态同步和方案选型实时通信：SSE 和 WebSocket 更适合放到请求与数据层里看