浏览器结构

• user Interface(用户界面)
• Brower Engine（浏览器引擎），在用户界面和渲染引擎间传递指令
• Render Engine (NetWorking Xml Parser Dispaly Backend DataPersistence) 渲染引擎，单线程
• NetWorking（网络调用），多线程，一般为 2~6 个
• Xml Parser （XML 解析器）
• Dispaly Backend （绘制基本窗口的小部件）
• javasccipt Interpreter （JavaScript 解释器）
• DataPersistence(数据存储)，例如 cookie 等

注意:HTML 解析器在 Browser Engine 中

渲染引擎结构

• Parsing Html to Constructor Dom Tree
  解析 HTML 成 dom 树
• Render Tree Construction
  解析 css，将 css 规则复制到 DOM 树，生成渲染树
• Layout of Render Tree
  生成对应图层
• Painting Render Tree
  绘制图层，绘制渲染树

最后一步就是 display，gpu 参与

Chrome 架构

• Browser: 控制程序，包括地址栏，书签，后退前进等，再比如网络请求和文件访问
• Renderer: 负责显示网站的选项卡内所有的内容
• Plugin: 控制网站使用的所有插件，例如 flash
• GPU: 独立于其他进程的 GPU 处理任务，它被分成多个不同的进程，因为 GPU 处理来自多个程序的请求并将它们绘制在同一个页面

chrome 渲染过程

• 构建 DOM
• 子资源加载
  • 注意 JavaScript 可以阻止解析
• 提示浏览器如何加载资源
• 样式表计算
• 布局
• 绘制

浏览器工作原理

从用户输入 Url 到看到内容，经历了哪些步骤

• 用户输入 Url，开始 DNS 查找，即解析 URL 为 Ip 地址，浏览器缓存 Ip，如果存在静态资源引用不同的域名，需要对静态资源再次进行查找
• TCP 的建立，经过“三次握手”建立连接，包括协议版本号，状态码，MIME 信息等套接字信息，其中还有 TLS 协商，即 https 建立安全连接，握手次数高达 15 次
• 建立完成，开始传输资源，其中包括了 TCP 慢开始，即 14kb 规则（均衡网络连接速度的算法，扩大传输口径，依次加倍传输量，避免拥塞）
• 浏览器得到数据，开始解析
  • 构建 DOM 树，解析 CSS
  • 合并 CSS 树及 DOM 树成 CSSOM 树，即 Render Tree
  • 下载静态资源，编译、解析、执行（如果没有指定 defer，会阻塞 HTML 的渲染）
  • 合成图层，即 Painting Render Tree（Layout）,开始布局及计算样式，即重排
  • Paint,绘制图层，即重绘