客户端容器

web 浏览器以及跨端方案

1. 浏览器架构
2. 渲染进程
3. Chrome 运行
4. 跨端容器

浏览器架构

架构演进：

1. 单进程架构
2. 多进程架构
3. 面向服务架构

渲染进程

——多线程架构

内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等

JS 引擎 VS 渲染引擎

1. 解析执行 JS
2. XML 解析生成渲染树，显示在屏幕
3. 桥接方式通信

渲染进程—多线程工作流程

1. 网络线程负责加载网页资源
2. JS 引擎解析 JS 脚本并且执行
3. JS 解析引擎空闲时，渲染线程立即工作
4. 用户交互、定时器操作等产生回调函数放入任务队列中
5. 事件线程进行事件循环，将队列里的任务取出交给 JS 引擎执行

const now = Date.now()
​
setTimeout(() => {
    console.log("time10", Date.now() - now) // 输出
}, 10)
​
setTimeout(() => {
    console.log("time30", Date.now() - now);
}, 30)
​
while (true) {
    if (Date.now() - now >= 20) {
        break;
    }
}
​
console.log(Date.now() - now);

Chrome 运行原理

• 浏览器地址输入 URL 后发生了什么

Chrome 运行原理 — 输入处理

1. 用户 URL 框输入内容的后，UI线程会判断输入的是一个URL地址呢，还是一个 query 查询条件
2. 如果是 URL，直接请求站点资源
3. 如果是 query，将输入发送给搜索引擎

Chrome 运行原理 — 开始导航

1. 当用户按下回车，UI线程通知网络线程发送一个网络请求，来获取站点内容
2. 请求过程中，tab 处于 loading 状态

Chrome 运行原理—读取响应

1. 网络线程接收到 HTTP 响应后，先检查响应头的媒体类型（MIME Type）
2. 如果响应主体是一个 HTML 文件，浏览器将内容交给渲染进程处理
3. 如果拿到的是其他类型文件，比如 Zip、exe 等，则交给下载器处理