浏览器架构
浏览器架构演进
- 单进程架构:所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
- 多进程架构:主进程、网络进程、渲染进程、GPU进程、插件进程
- 面向服务架构:将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务
渲染进程
常见浏览器内核
渲染进程-多线程架构
包括：JS引擎、GUI渲染、定时器触发、网络线程和事件触发
- JS引擎：负责JS脚本的解析工作
- GUI渲染：负责页面的渲染工作
- 定时器触发：处理setTiemout和setInterval的回调函数
- 网络线程：负责fetch和XHR的处理
- 事件触发：负责处理任务队列
渲染进程-多线程工作流程
- 网络线程负责加载网页资源
- JS引擎解析JS脚本并且执行
- JS解析引擎空闲时，渲染线程立即工作
- 用户交互、定时器操作等产生回调函数放入任务队列中
- 事件线程进行事件循环,将队列里的任务取出交给JS引擎执行
Chrome运行原理
浏览器地址栏中输入URL发生了什么
浏览器主进程
- 输入处理
- 开始导航
- 读取响应
- 寻找渲染进程
渲染进程
- 资源加载：加载子资源->执行脚本
- 构建：构建DOM->构建CSSOM->构建渲染树
- 布局：布局
- 绘制：构建图层->绘制图层
- 合成：光栅化
跨端容器
为什么需要跨端？
- 开发成本、效率
- 一致性体验
- 前端开发生态
跨端方案
- webview
- 小程序
- RN/WeeX
- Lynx（字节开发的一个跨端方案）
- Flutter
通用原理
- UI组件
- 渲染引擎
- 逻辑控制引擎
- 通信桥梁
- 底层API抹平表现差异
跨端方案对比
总结
浏览器作为目前JS的主要宿主，承担了非常多的前端设计任务，所以需要学好前端、学好交互，更好地设计出优秀的交互界面，对于浏览器的学习必不可少。
总的来说，浏览器对于前端程序员来说非常重要。本节课程从浏览器架构、渲染进程、Chrome运行原理和跨端容器这四个方面展开，介绍了浏览器与程序员的交互。这也使我更加深入地理解了浏览器的运行过程。
