客户端容器
浏览器架构演进
单线程架构：所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
多线程架构：主进程、网络进程、渲染进程、GPU进程、插件进程
面向服务架构：将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务
对比
单进程架构扩展性低、安全性低、稳定性低、流畅度卡顿
多进程架构扩展性中、安全性高、稳定性高、流畅度流程
面向服务架构扩展性高、安全性高、稳定性高、流畅度流畅
多进程分工
浏览器负责页面展示逻辑
GPU进程负责UI绘制，包含整个浏览器全部UI
网络进程负责网络资源加载
标签页控制tab内的所有内容
插件进程控制网站运行的插件
思考：为什么会有单进程架构
早期内存昂贵，单进程比较节约资源
常用浏览器内核
| 内核 | 浏览器 | 内核 |
|---|---|---|
| Trident | IE4-11 | JScript、Chakra |
| Gecko | Firefox | SpriderMonkey |
| Webkit | Safari、Chrome、Android浏览器 | JavaScriptCore |
| Blink | Chrome，Opera | V8 |
| Edge | Edge | Chakra |
| Trident+Webkit | 国产浏览器QQ、360、搜狗、UC等 | 都有 |
多线程架构
内部是多线程实现，主要负责页面渲染，脚本执行，事件处理、网络请求等
JS引擎与渲染引擎
- 解析执行JS
- XML解析生成渲染树，显示在屏幕
- 桥接方式通信
多线程工作流程
- 网络线程负责加载网络资源
- JS引擎解析JS脚本并且执行
- JS解析引擎空闲时，渲染线程立即执行
- 用户交互、定时器操作等产生回调函数放入任务队列中
- 时间线程进行事件循环，将队列里的人物去除交给JS引擎执行
渲染进程
资源加载
构建渲染树
页面布局
页面绘制
跨端容器 WebView
- 用于加载网页Url，并展示其内容的空间
- 可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是基于Webview的二次开发
使用webview的优势
- 一次开发，处处使用，学习成本低
- 随时发布，及时更新，不用下载安装包
- 移动设备性能不断提升，性能有保障
- 通过JBridge和原生系统交互，实现复杂功能
