浏览器工作原理

浏览器的结构

• 用户界面
  • 包括地址栏、前进/后退按钮、书签菜单等
  • 除浏览器主窗口显示你请求的页面外，其他显示的各个部分都属于用户界面
• 浏览器引擎
  • 在用户界面和呈现引擎之间传送指令
• 呈现引擎
  • 负责显示请求的内容，如解析 HTML、CSS 并显示在屏幕上
  • Firefox: Gecko； Safari/Chrome: WebKit
• 网络
  • 用于网络调用，如 HTTP 请求，其接口与平台无关
• 用户界面后端
  • 用于绘制基本的窗口小部件，如组合框和窗口，其公开了与平台无关的通用接口
• js 解释器
  • 用于解析和执行 js 代码
• 数据存储
  • 持久层，存储保存各种数据，如 Cookie 等

主流程

HTML、CSS -> DOM tree -> Render tree -> Layout tree -> Paint tree

两者差别

Gecko

• 框架树：每个元素都是一个框架
• 放置：重排
• HTML 与 DOM 树间有内容槽的层，用于生成 DOM 元素

WebKit

• 呈现树：由呈现对象组成
• 放置：布局
• 附加：连接 DOM 节点和可视化信息从而创建呈现树的过程