客户端容器页面渲染
浏览器的架构：
单进程架构：所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程
面向服务架构：将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务
浏览器的内核：
它主要的作用是将页面变成可视（听）化的图形、音频结果，这就是浏览器内核。不同浏览器有不同内核，常用的有Trident（IE）、Gecko（Firefox）、Blink（Chrome）、Webkit（Safari）
浏览器内核又可以分成两部分：渲染引擎和 JS 引擎。
浏览器渲染的前端页面的过程：
浏览器从请求 HTML，CSS，JavaScript 文件开始，到将它们最终以像素输出到屏幕上这一过程。包括以下几个部分：
- 构建 DOM：将 HTML 解析成许多 Tokens，将 Tokens 解析成 Objects，将 Objects 组合成为一个 DOM 树
- 构建 CSSOM：解析 CSS 文件，并构建出一个 CSSOM 树（过程类似于 DOM 构建）
- 构建 Render，结合 DOM 和 CSSOM 构建出一颗 Render 树
- Layout，计算出元素相对于 viewport 的相对位置
- Paint，将 Render 树转换成像素，显示在屏幕上
上面的过程并不是依次进行的，而是存在一定交叉。
构建DOM：DOM (Document Object Model)，翻译过来叫做文档对象模型。构建 DOM 是必不可少的一环，浏览器从发出请求开始到得到 HTML 文件后，第一件事就是解析 HTML 成许多 Tokens，再将 Tokens 转换成 Objects，最后将 Objects 组合成一颗 DOM 树。
构建CSSOM：CSSOM (CSS Object Model)，翻译过来叫做 CSS 对象模型。它的构建过程类似 DOM，当 HTML 解析中遇到 <link> 标签时，会请求对应的 CSS 文件，当 CSS 文件就位时，便开始解析它（如果遇到行内 <style> 时则直接解析），这一解析过程可以和构建 DOM 同时进行。
构建 Render：这也是关键的一步，浏览器使用 DOM 和 CSSOM 构建出 Render Tree。此时不像构建 DOM 一样把所有节点构建出来，浏览器只构建需要在屏幕上显示的部分，因此像 <head> 或 <meta> 这些标签就无需构建了。同时，对于 display: none 的元素，也无需构建。
然后我们不知道相对于 Viewport 的位置和大小，而Layout 这一过程需要计算的就是这两个信息。
Paint则是将 Render 树转换成像素，显示在屏幕上
