字节前端训练营 - 客户端容器.pptx - 飞书云文档
本文同步发布于博客（xblc.netlify.app），如果有更新博客会在第一时间更新
浏览器架构
任务管理器
- 浏览器是主进程
- 实用程序就是微服务
- 标签页是渲染进程，用于将网络传输得到的文件渲染成用于可以交互的网页
多进程分工
架构发展
- 单进程架构出现的原因：节省资源
- 面向服务架构有进化成多进程架构的趋势
浏览器内核
- Blink 是 Chromium 的一部分
渲染进程
多进程架构
JS 引擎 & 渲染引擎
- HTML 和 CSS 各自渲染得到树只有渲染到 显存(VRAMorGPU?)
- JS 有字节码解析执行和机器码直接运行两种运行方式
- 两个进程中的引擎通过桥接的方式来通信
渲染进程是怎么在多线程工作流程中工作的
- 网络线程和事件线程分别处理网页资源和各种请求
- 后者主要依靠任务队列+事件循环来持续处理
// 获取当前时间戳
const now = Date.now();
// 定时器1：10ms后输出"time10"和定时器1的执行延时
setTimeout(() => {
console.log('time10', Date.now() - now); // 输出1：？
}, 10);
// 定时器2：30ms后输出"time30"和定时器2的执行延时
setTimeout(() => {
console.log('time30', Date.now() - now); // 输出2：？
}, 30);
// 一直执行循环，直到距离当前时间戳至少过去20ms
while (true) {
if (Date.now() - now >= 20) {
break;
}
}
// 输出当前已经过去的时间（自now开始计算）
console.log(Date.now() - now); // 输出3：？
- 计时器线程会异步通过事件进程来回调执行
- 等主线程被 JS 引擎执行完才回调执行
- 后面实际执行的事件取决于任务队列里是否有其他应用
Chrome 运行原理
获取使用网页的全过程
- 解析 -> DNS -> TCP -> HTTP
- 关闭或保持连接
- 解析 -> 请求可能引用的其他资源
- 渲染树 -> 布局 -> 绘制
- 交互 -> 关闭
跨端容器
理由
- 效率、成本
- 一致性体验
生态
- 许多流行库都支持跨端开发
方案
- webview
- 小程序
- RN/WeeX
- Lynx
- Flutter
通用原理
方案对比
