前言
客户端容器（Client-side container）是一种用于管理和部署客户端应用程序的技术。它可以根据应用程序的需要，包含应用程序所需的所有依赖项，以便应用程序可以在任何环境中运行，而无需重新安装或配置依赖项。
客户端容器的好处包括：
- 可移植性：应用程序和其依赖项可以在任何地方运行，只要有客户端容器的支持。
- 简化部署：容器可以自动化构建、部署和管理应用程序，从而简化了应用程序的部署过程。
- 隔离性：容器提供了一个隔离的运行环境，可以防止应用程序之间的干扰。
- 可扩展性：容器可以轻松地复制和扩展，以适应不同的负载需求。
浏览器架构模式
- 单进程架构：所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
- 多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程
- 面向服务架构：多进程架构的升级版。将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础网络服务
渲染树（render树）
DOM节点可以分为 可视化节点 和 非可视化节点，像 div、p 等这种结构性的标签节点可被称为可视化节点，而 script、meta 等这种在页面上显示不出来的节点则被称为非可视化节点；
那渲染树(render树)是什么呢？
浏览器获取 HTML 文件，然后对文件进行解析，形成 DOM Tree，与此同时，进行 CSS 解析，生成 Style Rules，接着将 DOM Tree 与 Style Rules 合成为 Render Tree，元素在页面中布局，然后绘制。
render 树就是根据 可视化节点 和 css 样式表 结合诞生出来的树。
display: none 的元素会出现在 DOM 树中，但不会出现在 render 树中。
CSS 对象模型 (CSSOM)
在浏览器构建我们这个简单页面的 DOM 时，在文档的 head 部分遇到了一个 link 标记，该标记引用一个外部 CSS 样式表：style.css。由于预见到需要利用该资源来渲染页面，它会立即发出对该资源的请求。
与处理 HTML 时一样，我们需要将收到的 CSS 规则转换成某种浏览器能够理解和处理的东西。因此，我们会重复 HTML 过程，不过是为 CSS 而不是 HTML。
CSSOM 为何具有树结构？
因为页面上的任何对象计算最后一组样式时，浏览器都会先从适用于该节点的最通用规则开始（例如，如果该节点是 body 元素的子项，则应用所有 body 样式），然后通过应用更具体的规则（即规则“向下级联”）以递归方式优化计算的样式。
注意，以上树并非完整的 CSSOM 树，它只显示了我们决定在样式表中替换的样式。每个浏览器都提供一组默认样式（也称为“User Agent 样式”），即不提供任何自定义样式时所看到的样式，我们的样式只是替换这些默认样式（例如默认 IE 样式）。
CSSOM 和 DOM 是独立的数据结构。
客户端容器的应用场景
客户端容器可以应用于许多不同的场景，包括：
- 开发环境：开发人员可以使用客户端容器来创建一个标准的开发环境，以便他们可以在不同的机器上进行开发，而无需担心环境配置的问题。
- 测试环境：测试人员可以使用客户端容器来创建一个标准的测试环境，以确保应用程序在不同的环境中都能正常运行。
- 生产环境：在生产环境中，客户端容器可以用于简化应用程序的部署过程，并提供可扩展性和高可用性的支持。
