客户端容器

一、浏览器架构

1.单进程架构：所有模块运行在同一个进程里，包括网络、插件、JavaScript运行环境等

2.多进程构架：主进程、网络进程、渲染进程、GPU进程、插件进程

3.面向服务架构：将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务

构架图：

浏览器架构的对比：

举例：Google Chrome浏览器，有主进程、拓展程序等。

浏览器架构多进程分工的介绍：

为什么会有单进程架构：可能是早期硬件条件不足

面向服务架构是否会替代多进程架构：有可能，但性能好的时候优先选择面向服务架构。

常见的浏览器内核：

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

主要的线程有：JS引擎、GUI渲染、定时器触发、网络线程、事件触发

1.解析执行JS，2.XML解析生成渲染树，显示在屏幕，3.桥接方式通信

网络线程负责加载网页资源，JS引擎负责解析JS脚本并且执行，JS解析引擎空闲时，渲染进程立即工作，用户交互、定时器操作等产生回调函数放入任务队列中，事件线程进行事件循环，将队列里的任务取出交给JS引擎执行

输入操作：如果是URL，直接请求站点，如果是query，发送给搜索引擎。

开始导航：通知网络线程发起一个网络请求，获取站点内容。

读取响应：检查媒体类型，如果是HTML等网站，交给渲染进程，如果是其他类型，例如zip等，交给下载器

寻找渲染进程：告知主进程，然后主进程告知渲染进程，然后渲染进程接受数据并告知主进程自己已经开始处理

资源加载：收到主进程后，开始加载，同时也还要加载子进程

构建渲染树：DOM树和CSSOM树的结合

页面布局：以盒模渲染写入文档流

页面绘制：构建绘制，生成图块，栅格化，显示

主屏优化：

1，压缩、分包、删除无用代码 2，静态资源分离 3，JS 脚本非阻塞加载 4，缓存策略 5，SSR 6，预置 loadlng、骨架屏

1、跨端方案

WebView、小程序、RN/WeeX、Lynx、Flutter

2、WebView