所有图片来自 字节前端训练营 - 客户端容器.pptx - 飞书云文档 (feishu.cn)
此文档是对对应课程 客户端容器 - 掘金 (juejin.cn) 的笔记
浏览器架构
单进程、多进程、面向服务
单进程：所有服务都在浏览器进程中实现。
多进程：主进程、网络进程、渲染进程、GPU进程、插件进程（进程间相互隔离、运行在沙盒中）。
面向服务的进程：按照服务类型，将UI、数据库、设备、网络等基础服务，分别在自己的进程中运行，进程间通信需要实现定义接口，通过IP通信实现交互。
前置知识：
- 进程是计算机分配资源的最小单位；
- 线程是计算机调度的最小单位；
- 一个进程是指一个程序在特定的数据、内存空间等资源的条件下的一次运行过程。
- 一个进程有至少一个线程，也可以多个线程同步运行，同一个进程的多个线程共享一块内存。
扩展性
单进程架构通过多个线程实现各模块的功能，此时各模块访问同一块内存单元，导致内存的使用容易出现冲突，添加新的模块比较困难，扩展性差。
多进程架构使用多个进程实现，此时各模块在独立的内存区域运行。解决了内存空间的冲突问题，但一些大型的进程，其涵盖的服务比较多，耦合度较高。
面向服务的架构是在架构的基础上，按服务类型划分进程，实现了高内聚、低耦合。
安全性、稳定性、流畅性
仍是基于单进程与多进程的差异：单进程由于使用同一块内存单元，不同的线程可能会访问同一块内存，由此引发的：
- 安全问题
- 同一个函数的结果可能不同（不同时刻的内存空间可能被其它线程修改）
- 以及受到资源限制的卡顿（临界资源、锁）
多进程分工：
渲染进程
常见的浏览器内核
渲染进程的多线程架构
js引擎与渲染引擎
js引擎实际上是一种语法解析服务，将js源码视作文本，通过语法分析、语义分析等解析并构建AST抽象语法树，再根据抽象语法树翻译出字节码，交由操作系统解析执行。
V8引擎额外做了一些优化，对于使用频率较高的语句，转化为机器码，下次遇到时，可以直接运行，加快整体的运行效率。对于一些发生变化的常见语句，或其出现频次降低后，执行去优化操作，不再对其转换。
渲染引擎则通过xml解析生成渲染树，根据渲染树的结构渲染。
chrom运行原理
页面渲染与展示的过程
浏览器收到url
UI线程通知网络线程发送网络请求
网络线程收到HTTP响应后，根据响应头的信息分别处理：
- 错误：返回错误类型码等
- 收到html、css等 交给渲染进程处理
- 收到zip、资源文件等 交给资源下载器处理
网络进程处理完毕，通过IPC告知主进程；
主进程通过IPC告知渲染进程；
渲染进程收到并返回确认消息（开始处理）
- 进程开始加载资源（html、css、js等）
- 构建DOMtree CSSOMtree
- 组成渲染树
- 计算布局、元素大小
- 构建、绘制图层，生成图块
- 图块的栅格化（转化为位图）
- 展示在屏幕上
优化
首屏优化
- 压缩、分包、treeshaking
- 静态资源分离（将静态资源和动态资源分开部署，获取静态资源时，可以通过缓存优化）
- js非阻塞加载
- 缓存
- SSR
- 预置loading、骨架屏
渲染优化
- GPU加速
- 减少重绘、回流
- 离屏渲染
- 懒加载
js优化
- 防止内存泄漏
- 早结束循环
- 合理使用闭包
- 较少DOM访问
- 防抖节流
- Web Workers
跨端容器
react Native
