浏览器原理
一、 宏观视角：Chrome 多进程架构
现在的浏览器更像是一个分布式操作系统，而非简单的应用程序。
1. 四大核心进程
- Browser Process (主进程)：
- 职责：负责 UI（地址栏、书签）、协调子进程、管理存储（Cookie/Storage）。
- 地位：整个浏览器的总指挥。
- Renderer Process (渲染进程)：
- 职责：解析 HTML/CSS/JS，将网页转化为图像。
- 机制：沙箱隔离，通常一页一进程（Site Isolation 策略保证跨域隔离）。
- GPU Process：
- 职责：负责页面最终的绘制与合成，处理 WebGL、CSS3 3D 变换。
- Network Service：
- 职责：独立负责网络资源加载，提升安全性和稳定性（防崩溃）。
2. 为什么是多进程？
- 稳定性：一个 Tab 崩了，不会导致整个浏览器崩。
- 安全性：渲染进程运行在沙箱中，限制了读写系统文件的权限。
- 流畅性：JS 阻塞渲染进程时，不会影响 Browser 进程的 UI 响应（如切换 Tab）。
二、 导航全流程：从 URL 到页面展示
当你在地址栏按下回车：
- 处理输入：Browser 进程判断是 URL 还是搜索查询。
- 网络请求：Network Service 发起 DNS -> TCP -> TLS -> HTTP 请求。
- 注：Service Worker 可在此阶段拦截请求，直接返回缓存。
- 响应读取：检查 MIME Type。如果是 HTML，通知 Browser 进程。
- 准备渲染进程：Browser 进程启动或复用一个 Renderer 进程。
- 提交导航：
- 关键点：Renderer 进程接收数据流。此时旧页面卸载，新页面白屏，Loading 圈开始转动。
三、 渲染流水线
这是前端性能优化的核心战场。
1. 解析 (Parsing)
- HTML ➝ DOM 树：构建文档结构。
- CSS ➝ CSSOM 树：计算具体样式。
2. 布局 (Layout/Reflow)
- DOM + CSSOM ➝ Layout Tree (布局树)
- 规则：
display: none：不在布局树中。visibility: hidden：在布局树中（占位）。- 布局树节点包含了元素的几何信息 (x, y, width, height)。
3. 分层 (Layering)
- 浏览器将页面拆分为多个图层 (Layers)以实现独立光栅化。
- 触发条件：
will-change,transform: translateZ,opacity,<video>,z-index上下文等。 - 目的：避免牵一发而动全身，减少重绘区域。
4. 绘制
- 生成绘制列表 (Paint Records)。注意，这只是一堆绘制指令（“画个红圈”），并没有真正填充像素。
5. 合成 —— 性能之源
- 角色：合成线程 (Compositor Thread) 与 GPU 配合。
- 流程：
- 分块：将图层切分成小块。
- 光栅化：将图块转换为位图 (Bitmap)(通常由 GPU 完成)。
- 合成：GPU 将所有位图合成最终屏幕图像。
总结：性能优化三大法宝
- Reflow (重排)：修改了几何属性（宽/高）。触发
Layout -> Paint -> Composite。最贵。 - Repaint (重绘)：修改了颜色/背景。触发
Paint -> Composite。次之。 - Composite (合成)：修改
transform或opacity。只触发 Composite。- 原理：不占用主线程，直接在合成线程操作图块。即使 JS 卡死，动画依然流畅。
四、 JavaScript 运行机制
1. 内存管理 (V8)
- 栈：存储执行上下文、基本类型。
- 堆：存储对象。GC 采用分代回收（新生代 Scavenge 算法 + 老生代 标记-清除-整理）。
2. 事件循环 (Event Loop)
浏览器的循环机制如下（与 Node.js 略有不同）：
- 执行栈 (Stack)：同步代码执行完毕。
- 微任务：清空队列！(
Promise.then,MutationObserver).- Microtasks 优先级极高，插队执行，直到队列为空。
- 渲染时机：判断是否需要更新屏幕（通常 16.6ms 一次）。
- 如果有，执行
requestAnimationFrame-> Style -> Layout -> Paint。
- 如果有，执行
- 宏任务：取一个任务执行。(
setTimeout,setInterval, I/O, UI Event). - 回到第一步。
启示
- 动画选 CSS：尽量用
transform和opacity，避开 layout 属性（top/left/width）。 - 避免强制同步布局：不要在修改样式后紧接着读取
offsetHeight/scrollTop等属性。 - 减少主线程阻塞：复杂的 JS 计算会延迟渲染和交互，考虑使用Web Worker。
- 利用空闲时间：低优先级的逻辑可以使用
requestIdleCallback。
