今天学习的是客户端容器，以下是本节课的课程目录。

• 浏览器架构
• 渲染进程
• Chrome 运行原理
• 跨端容器

浏览器架构

浏览器架构的演进

为什么会有单进程架构？

答：单进程架构简单，易于理解和管理，不需要考虑进程间的通信和同步问题。

面向服务架构是否会替代多进程架构？

答：不会，单进程架构和面向服务架构可以结合使用，比如一个单进程的应用程序可以调用一个面向服务的应用程序提供的服务，或者一个面向服务的应用程序可以由多个单进程的服务组成。

渲染进程-多线程架构

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

JS 引擎 VS 渲染引擎

1、解析执行 JS

2、XML 解析生成渲染树，显示在屏幕上

3、桥接方式通信

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

1、网络线程负责加载网页资源

2、JS 引擎解析 JS 脚本并执行

3、JS 解析引擎空闲时，渲染线程立即工作

4、用户交互、定时器操作等产生回调函数放入任务队列中

5、事件线程进行事件循环，将队列里的任务取出交给 JS 引擎执行

Chrome 运行原理

Chrome 运行原理-输入处理

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

Chrome 运行原理-开始导航

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

Chrome 运行原理-读取响应

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

Chrome 运行原理-寻找渲染进程

• 网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程
• 主进程通过 IPC 消息告知渲染进程去处理本次导航
• 渲染进程开始接收数据并告知主进程自自己已开始处理，导航结束，进入文档加载阶段

渲染进程-资源加载

• 收到主进程的信息后，开始加载 HTML 文档
• 除此之外，还要加载子资源，比如一些图片，CSS 样式文件以及 javascript 脚本

渲染进程-构建渲染树

• 构建 DOM 树，将 HTML 文本转化成浏览器能够理解的结构
• 构件 CSSOM 树，浏览器同样不认识 CSS，需要将 CSS 代码转化为可理解的 CSSOM。
• 构建渲染树，渲染树是 DOM 树和 CSSOM 树的结合

渲染进程-页面布局

• 根据渲染树计算每个节点的位置和大小
• 在浏览器页面区域绘制元素边框
• 遍历渲染树，将元素以盒模型的形式写入文档流

渲染进程-页面绘制

• 构建图层：为特定的节点生成专用图层
• 绘制图层：一个图层分成很多绘制指令，然后将这些指令按顺序组成一个绘制列表，交给合成线程
• 合成线程接收指令生成图块
• 栅格线程将图块进行栅格化
• 展示在屏幕上

首屏优化

• 压缩、分包、删除无用代码
• 静态资源分离
• JS 脚本非阻塞加载
• 缓存策略
• SSR
• 预制 loading、骨架屏

渲染优化

• GPU 加速
• 减少回流、重绘
• 离屏渲染
• 懒加载

JS 优化

• 防止内存泄漏
• 循环尽早 break
• 合理使用闭包
• 减少 DOM 访问
• 防抖、节流
• Web Workers

跨端容器

为什么需要跨端：

• 开发成本、效率
• 一致性体验
• 前端开发生态

有哪些跨端方案：

• webview
• 小程序
• RN/WeeX
• Lynx
• Flutter

webview

webview，即网页视图，用于加载 url，并展示其内容的空间

可以内嵌在移动端 App 内，实现前端混合开发，大多数混合框架都是 webview 二次开发，比如 Ionic、Cordova

跨端容器-常用 webview 分类

常用 webview，Android、IOS、国产 Android

使用 webview 的优势：

• 一次开发，处处使用，学习成本低
• 随时发布，及时更新，不用下载安装包
• 移动设备性能不断提升，性能有保障
• 通过 JSBridge 和原生系统交互，实现复杂功能