客户端容器

浏览器架构

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

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

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

浏览器架构对比

多进程的分工

渲染进程

Chrome运行原理

1. 输入处理：用户URL输入后，UI线程会判断输入的地址，如果是URL，直接请求站点资源，如果是query，将输入发送给搜索引擎。
2. 开始导航：当用户按下回车，UI线程通知网络线程发起一个网络请求获取站点内容。请求过程中，tab处于loading状态。
3. 读取响应：网络线程接受到HTTP响应后，先检查响应头的媒体类型（MIME Type）。如果响应主体树一个HTML文件，浏览器将内容交给渲染进程处理；如果是其他类型文件，如zip、exe等，则交给下载管理器处理。
4. 寻找渲染进程：网络线程做完所有检查后，告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程。主进程通过IPC消息告知渲染进程去处理本次导航，渲染进程开始接收数据并告知主进程已开始处理，导航结束，进入文档加载阶段。
5. 资源加载：收到主进程消息后，开始加载HTML文档，并加载子资源，如图片、CSS样式和JavaScript脚本。
6. 构建渲染树：构建DOM树，构建CSSOM树，构建渲染树。
7. 页面布局：根据渲染树计算每个节点的位置和大小；在浏览器页面区域绘制元素边框；遍历渲染树，将元素以盒模型的形式写入文档流。
8. 页面绘制：构建图层，绘制图层，合成线程接受指令生成图块，栅格线程将图块进行栅格化，展示在屏幕上。

首屏优化

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

渲染优化

1、GPU加速 2、减少回流、重绘 3、离屏渲染 4、懒加载

JS优化

1、防止内存泄露 2、循环今早break 3、合理使用闭包 4、减少Dom访问 5、防抖、节流 6、Web Workers