浏览器原理

渲染流水线

1. 构建DOM树：HTML → DOM树
2. 样式计算：构建CSS树 → 单位转换 → 计算每个节点样式
3. 布局阶段：创建布局树 → 布局计算 → 分层
4. 图层绘制：输出绘制指令列表
5. 栅格化：GPU绘制，视窗优先级最高

重排、重绘、合成

• 重排：修改宽高等属性 → 整个渲染流水线重走
• 重绘：修改色彩属性 → 跳过布局、分层阶段
• 合成：transform动画 → 不触发重排重绘

JS执行机制

• V8解析JS后先编译，生成上下文再运行
• 全局上下文 → 函数运行上下文 → eval上下文
• 调用栈：控制执行上下文，递归过深会爆栈
• 作用域链：由词法作用域决定，与运行时无关
• ES6箭头函数不创建自己的执行上下文

消息队列

• 宏任务：由宿主发起（浏览器/Node.js）
• 微任务：由引擎发起（Promise等）
• 微任务在宏任务主要任务执行完后、下一个宏任务前执行
• 消息队列架构广泛应用于Android和浏览器
• Chrome中还存在异步队列，存放Chrome本身的延时任务和setTimeout等

浏览器输入URL后的完整流程

1. 用户输入URL地址
2. 发起请求（构建HTTP请求行→缓存拦截→DNS查询→TCP队列→建立连接）
3. 准备渲染流程
   • same-site页面复用父页面渲染进程（否则新开进程）
   • 带 rel="noopener noreferrer" 属性的链接不复用进程（安全策略）
4. 提交文档 CommitNavigation
   • 浏览器接收到响应头后向渲染进程发送”提交文档”消息
   • 渲染进程和网络进程开启通道
   • 网络数据传输后，渲染进程通知浏览器”确认提交”
   • 浏览器更新页面、URL地址等状态
5. 渲染

浏览器请求

1. 构建HTTP请求行
2. 浏览器本地缓存拦截
3. DNS查询
4. TCP队列（HTTP/1.1: 6个TCP; HTTP/2.0: 1个TCP多路复用）
5. 建立TCP连接

关联

• 相关概念: Three.js（GPU渲染）、设计模式
• 相关技术: Node.js