这是我参加前端训练营笔记活动的第4天。

客户端容器

浏览器架构

浏览器架构演进

1、单进程架构：所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等。
2、多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程。
3、面向服务架构：将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务。

浏览器架构对比

架构类型	扩展性	安全性	稳定性	流畅度
单进程架构	低，所有模块运行在同一进程里，访问同一块内存区域，数据没有隔离，新增模块可能会影响原有功能	低，三方插件可直接访问操作系统里任意资源	低，三方插件漏洞或者某个tab页面JavaScript脚本问题可能导致浏览器崩溃	卡顿，所有页面运行在同一进程中，开启多个页面时明显卡顿
多进程架构	中，各进程分配独立的内存区域，有些进程功能较大，耦合度高	高，运行在独立沙箱中，不能访问系统敏感资源	高，进程相互隔离，当一个页面或者插件崩溃时，不会影响其他进程	流畅，每个页面运行在独立的渲染进程中，充分利用系统资源
面向服务架构	高，服务模块划分更细，更内聚，耦合性低，易于扩展	高，运行在独立沙箱中，不能访问系统敏感资源	高，进程相互隔离，当一个页面或者插件崩溃时，不会影响其他进程	流畅，每个页面运行在独立的渲染进程中，充分利用系统资源

渲染进程

多线程架构

内部是多线程实现，主要负责页面渲染、脚本执行、事件处理、网络请求等。

线程	功能
JS引擎	负责解析js脚本，运行js程序每个渲染进程下面只有一个js引擎线程。与GUI渲染线程互斥，如果js任务执行事件过长，会导致页面卡顿
GUI渲染	负责渲染浏览器界面，解析html、css，构建dom树和render树、布局、绘制，和js引擎线程互斥，GUI更新会在js引擎空闲时立即执行
定时器触发	定时器所在线程，setTimeout、setInterval计时完毕后，将回调添加到事件队列，等待js引擎执行
网络线程	在XHR、Fetch等发起请求后新开一个网络线程请求，如果设置了回调函数，在状态变更时，将回调放入事件队列，等待js引擎执行
事件触发	由宿主环境提供，用于控制事件循环，不断地从事件队列里取出任务执行