客户端容器
本文将从四个方面来介绍有关客户端容器的有关概念，分别是浏览器架构,渲染进程,Chrome运行原理。
1.浏览器架构
1.演变：
- 单进程架构：所有的模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等。
- 多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程。由多个进程共同完成某些任务。
- 面向服务架构：将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务。
tips： 单进程架构由于其的单一性，导致其可扩展性比其他两者更低，而且单进程架构中的第三方插件可以随意访问并修改系统资源，导致其的安全性和稳定性差并且最关键的是，这种架构卡！！！！
2.多进程的分工
- 主进程：主要负责页面展示逻辑、用户交互、子进程管理；包括地址栏、书签、前进、后退、收藏夹等。
- GPU进程：负责UI绘制，包含整个浏览器全部UI。
- 网络进程：网络服务进程，负责网络资源加载。
- 渲染进程：管理标签页，控制Tab内的所有内容，将HTML、CSS和JavaScript转换为用户可交互的网页。
- 插件进程：控制网站运行的插件，比如Flash、ModHeader等。
- 其他进程：适用程序Storage/Network/Audio Service等。
2.渲染进程
1.构成的线程
- JS引擎：负责解析JS脚本，运行JS程序，每个渲染进程下面只有一个JS引擎线程，与GUI渲染线程互斥，如果JS任务执行时间过长，会导致页面卡顿。
- GUI渲染：负责渲染浏览器界面，解析HTML、CSS、构建dom树和render树、布局、绘制，和JS引擎线程互斥，GUI更新会在JS引擎空闲时立即执行。
- 定时器触发：定时器所在线程，setTimeout、setinterval计时完毕后，将回调添加到事件队列，等待JS引擎执行。
- 网络线程：在XHR、Fetch等发起请求后新开一个网络线程请求，如果设置了回调函数，在状态变更时，将回调放入事件队列，等待JS引擎执行。
- 事件触发：由宿主环境提供，用于控制事件循环，不断地从事件队列里取出任务执行。
2.多线程工作流程
- 网络线程负责加载网页资源
- JS引擎解析JS脚本并且执行
- JS解析引擎空闲时，渲染线程立即工作
- 用户交互、定时器操作等产生回调函数放入任务队列中
- 事件线程进行事件循环，将队列里的任务取出交给JS引擎执行
3.Chrome运行原理
1.输入处理
用户URL框输入内容后，UI线程会判断输入的是一个URL地址呢？还是一个query查询条件；如果是URL，直接请求站点资源；如果是query，将输入发送给搜索引擎
2.开始导航
当用户按下回车，UI线程通知网络线程发起一个网络请求，来获取站点内容；请求过程中，TAB处于loading状态
3.读取响应
网络线程接受到HTTP响应后，先检查响应头的媒体类型（MIME Type）；如果响应主体是一个HTML文件，浏览器将内容交给渲染进程处理；如果拿到的是其他类型文件，比如Zip、exe等，则交给下载管理器处理
4.渲染进程寻找
网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程；主进程通过IPC消息告知渲染进程去处理本次导航；渲染进程开始接收数据并告知主进程自己已开始处理，导航结束，进入文档加载阶段
