这是我参与「第1届 前端训练营」笔记创作活动的第5天
一、重点内容介绍🎈
- 浏览器架构
- 渲染进程
- Chrome运行原理
- 跨端容器
二、详细知识点🍗
2.1 浏览器架构
浏览器架构模式
- 单进程架构：所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
- 多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程
- 面向服务架构：多进程架构的升级版。将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础网络服务
问题1：为什么会有单进程架构？
- 单进程架构是为了提高单个进程的性能和可靠性，因为多进程或多线程之间切换会带来额外的开销，而单进程架构能够避免这种开销，从而提高系统的响应速度和稳定性。
问题2：面向服务架构是否会替代多进程架构？
- 面向服务架构（SOA）和多进程架构是两种不同的架构设计理念。
- SOA采用微服务的形式，将功能划分为独立的服务，通过网络进行通信和交互，实现松耦合和高内聚；而多进程架构则是在一个应用程序内使用多个进程，各个进程之间通过进程间通信进行通信和协作。从
- 长远来看，SOA有望取代多进程架构，因为SOA可以更好地满足分布式系统的要求，使得系统更加灵活、可扩展和稳定。
- 但是SOA本身也有一些缺点，如服务拆分和管理成本较高等问题，需要在设计和实施时进行综合考虑。
2.2 渲染进程
多线程渲染的工作流程：
- 网络线程负责加载网页资源
- JS引擎解析JS脚本并且执行
- JS解析引擎空闲时，渲染线程立即工作
- 用户交互、定时器操作等产生回调函数放入任务队列中
- 事件线程进行事件循环，将队列里的任务取出交给JS引擎执行
2.3 Chrome运行原理
Chrome运行原理
- 浏览器地址栏输入url后，会先对url进行处理：判断输入的是url还是query查询条件
- 然后开始导航：UI线程通知网络线程发起一个网络请求，来获取站点内容
- 内核读取响应：首先检查响应头的媒体类型，如果是HTML文件，则浏览器将内容交给渲染进程处理，如果是其他文件，则交给下载管理器处理
- 同时渲染进程开始工作，渲染完成后通知主进程获取。
渲染优化
- GPU加速
- 减少回流、重绘
- 离屏渲染
- 懒加载
2.4 跨端容器
有哪些跨端方案
- WebView
- 小程序
- PN/WeeX
- Lynx
- Flutter
使用WebView的优势
- 一次开放，处处使用，学习成本低
- 随时发布，即时更新
- 性能有保障
- 通过JSBridge和原生态交互，实现复杂功能
通用原理
- UI组件
- 渲染引擎
- 逻辑控制引擎
- 通信桥梁
- 底层api抹平表现差异
三、思考与总结💡
通过今天的学习，我了解了很多关于浏览器架构，渲染进程，Chrome运行原理以及跨端容器的知识。
