浏览器知识体系概览
什么是浏览器？为什么要理解它的原理？
浏览器是前端代码的运行环境——Chrome、Firefox、Safari、Edge 等。你写的 HTML、CSS、JavaScript 最终都在浏览器中被解析和执行。
作为前端工程师，理解浏览器的工作原理至关重要：
- 性能优化：知道浏览器的渲染流程，才能避免性能瓶颈（如避免重排重绘）
- 问题排查：接口为什么跨域了？页面为什么白屏？缓存为什么没更新？这些都需要浏览器知识
- 安全防护：XSS、CSRF 等攻击手段都是针对浏览器的，理解原理才能有效防御
浏览器本身是一个极其复杂的软件（Chrome 有数千万行代码），面试中考察的是其中对前端开发影响最大的核心模块。
浏览器是怎么工作的？
一个经典的面试题："从输入 URL 到页面展示，中间发生了什么？"——这一道题就串联了网络、浏览器、渲染的整条链路：
核心知识点概览
浏览器渲染原理——CRP（关键渲染路径）
浏览器拿到 HTML 后，会经历以下步骤将代码变成可见的页面：
- 解析 HTML → 构建 DOM 树
- 解析 CSS → 构建 CSSOM 树
- 合并 DOM 和 CSSOM → 生成渲染树（Render Tree）
- 布局（Layout） → 计算每个元素的位置和大小
- 绘制（Paint） → 将元素画到屏幕上
- 合成（Composite） → GPU 将多个图层合成最终画面
当你修改 DOM 或 CSS 时，浏览器可能需要重新执行上述部分步骤，这就是重排（Reflow） 和重绘（Repaint）。理解哪些操作触发重排、如何减少重排，是性能优化的基础。
浏览器缓存——让用户"秒开"页面
缓存是浏览器把已经请求过的资源保存在本地，下次访问时直接用本地副本而不需要重新请求服务器。浏览器缓存分两层：
- 强缓存（
Cache-Control、Expires）：直接使用本地缓存，不和服务器通信 - 协商缓存（
ETag、Last-Modified）：先问服务器"资源有没有变？"，没变就用缓存
缓存策略是性能优化的利器，也是面试高频考点——面试官经常考 Cache-Control 的各种属性含义。
跨域问题——同源策略
同源策略（Same-Origin Policy） 是浏览器最重要的安全机制：只有协议、域名、端口都相同的两个 URL 才算"同源"，非同源的请求会被浏览器拦截。这导致了前端开发中最常见的问题之一——跨域。
解决跨域的主流方案是 CORS（跨域资源共享）——服务端设置响应头允许特定域名的请求。其他方案还有代理（开发环境常用）、JSONP（仅限 GET 请求）等。
浏览器安全
Web 安全是前端必须了解的领域：
- XSS（跨站脚本攻击）：攻击者注入恶意脚本到页面中，窃取用户数据
- CSRF（跨站请求伪造）：利用用户的登录状态，冒充用户发送请求
- CSP（内容安全策略）：限制页面能加载哪些资源，防御 XSS
面试中 XSS 和 CSRF 的原理及防御方案几乎是必考题。
浏览器存储
浏览器提供了多种客户端存储方案，各有特点：
| 方案 | 容量 | 生命周期 | 特点 |
|---|---|---|---|
| Cookie | ~4KB | 可设过期时间 | 自动随请求发送 |
| localStorage | ~5MB | 永久 | 同源共享 |
| sessionStorage | ~5MB | 标签页关闭清除 | 不跨标签页 |
| IndexedDB | 无限制 | 永久 | 支持事务、结构化数据 |
事件机制
浏览器的事件处理分三个阶段：捕获（从 window 到目标元素）→ 目标 → 冒泡（从目标元素到 window）。事件委托利用冒泡机制，在父元素上监听子元素的事件，减少事件监听器数量，提升性能。
Web Workers
JavaScript 是单线程的，但 Web Workers 允许你开启新的线程来执行耗时操作（如大量计算），不阻塞主线程的渲染和交互。Service Worker 更进一步，能拦截网络请求、缓存资源，是 PWA（渐进式 Web 应用）的核心技术。
学习建议
- 渲染原理 + 从 URL 到页面 → 面试高频、串联全链路
- 缓存机制 + 存储技术 → C 端性能优化基础
- 跨域 + 安全 → 每个项目都会遇到
- 事件机制 + 页面生命周期 → 日常开发常用
- Web Workers + WebSocket → 进阶能力