客户端容器
浏览器架构演进
- 单进程架构:浏览器的所有功能在同一个进程中运行,包括网络、插件、JavaScript运行环境、渲染引擎、页面等
⬇ - 多进程架构:浏览器功能分布在多个进程中完成,进程之间相互隔离,实现自己的功能
⬇ - 面向服务架构:浏览器将功能以服务的方式提供,在计算机的硬件足够强大时,一个服务将以多个进程的方式实现,计算机的硬件资源紧张时,可将多个服务放在一个进程内节省资源
浏览器架构对比
- 扩展性:增加新功能的简易程度
面向服务架构 > 多进程架构 > 单进程架构 - 安全性:对于信息资源的保护程度
面向服务架构 ≈ 多进程架构 > 单进程架构 - 稳定性:浏览器架构的健壮性
面向服务架构 ≈ 多进程架构 > 单进程架构 - 流畅度:访问页面的顺畅程度
面向服务架构 ≈ 多进程架构 > 单进程架构
渲染进程
浏览器主要由内核和shell组成,内核部分包含渲染引擎和JS引擎,随着JS引擎的日益发展,逐渐独立出来。
渲染引擎
用于解析HTML源码和CSS源码
- 将HTML源码经过xml解析器生成DOM树
- 将CSS源码经过css解析器生成CSSOM树
- 把DOM树与CSSOM树合成为render树
- 经过渲染实现显存
JS引擎
用于读取网页的JavaScript代码并进行处理
- 将JavaScript源码经过JS解析器生成AST
- 将AST翻译为字节码,可以解释执行
- 或使用JIT生成机器码,之后直接执行
Chrome运行原理
- 输入处理:用户键入内容后,UI判断是URL还是query,并执行不同的操作
- 开始导航:用户按下回车,页面处于加载状态
- 读取响应:检查HTTP响应头的媒体类型,判断是交给渲染进程还是下载管理器处理
- 寻找渲染进程:主进程通过IPC消息通知渲染进程处理本次导航
- 资源加载:开始加载HTML文档、图片、CSS样式文件、JavaScript脚本
- 构建渲染树:渲染树即为DOM树和CSSOM树的结合
- 页面布局:根据渲染树定位每个元素的位置和大小
- 页面绘制:构建图层 → 绘制图层 → 合成图块 → 栅格化 → 显示在屏幕上
个人思考与总结
Q:多进程架构优化了单进程架构的哪些问题?
A:通过将不同的功能采用不同的进程实现,多进程架构对于单进程架构的不稳定、不流畅、不安全问题进行了优化。
Q:面向服务的多进程架构有什么缺点?
A:面向服务架构的缺点体现在资源占用更多、体系结构更复杂。不同的进程实现不同的功能意味着每个进程都需要有单独一套提供服务的架构,造成了更多的资源占用;模块数量增加,需要考虑各模块之间的依赖性和耦合性,更容易导致扩展性差的问题,对于现有的架构提出了挑战。