一、浏览器架构
浏览器架构演进
- 单进程架构：浏览器所有功能模块都是运行在同一个进程里
所有功能模块包含了网络、插件、JavaScript运行环境、渲染引擎和页面等，这么多模块运行在一个进程中，是导致单进程浏览器不稳定、不流畅和不安全的一个主要因素
。
- 多进程架构：浏览器进程、渲染进程、GPU进程、网络进程、插件进程等进程
为了解决单进程架构的问题加上硬件上的升级，开始拆分为多个进程。每个标签页分配给一个单独的进程。
- 面向服务架构：将原来的UI、数据库、文件、设备、网络等模块重构为基础服务，类似操作系统底层服务
每个服务（Service）都可以在独立的进程中运行，访问服务必须使用定义好的接口，通过 IPC 来通信，从而构建一个更内聚、松耦合、易于维护和扩展的系统，更好实现 Chrome 简单、稳定、高速、安全的目标。
浏览器各架构对比
多进程架构分析
| 进程名称 | 进程描述 |
|---|---|
| 浏览器进程 | 主要负责界面显示、用户交互、子进程管理，同时提供存储等功能 |
| 渲染进程 | 核心任务是将HTML、CSS 和 JavaScript 转换为用户可以与之交互的页面，排版引擎Blink和Javascript引擎V8都是运行在该进程中，默认情况下，Chrome会为每个Tab标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下 |
| GPU进程 | GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求 |
| 网络进程 | 主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程 |
| 插件进程 | 主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响 |
二、渲染架构
| 浏览器 | 内核 | JS引擎 |
|---|---|---|
| IE/Edge | Trient(<=IE10);EdgeHTML | JScript(<IE9);chakra(IE9+及Edge) |
| Safari | Webkit/Webkit2 | JSCore/Nitro(4+) |
| Chrome | Chromium(Webkit);Blink | V8 |
| Firefox | Gecko | SpiderMonekey(<3.0);TraceMonkey(<3/6);JaegerMonkey(4.0+) |
| Opera | Presto;Blink | Futhark(9.5-10.2) |
渲染进程多线程架构
内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等
JS引擎VS渲染引擎
JS引擎和渲染引擎是浏览器中两个非常重要的组件。
它们分别负责处理JavaScript代码和渲染网页内容。
渲染引擎：渲染引擎负责解析HTML和XML文档，构建DOM树。然后，渲染引擎会解析CSS样式，并将样式信息附加到DOM树上，生成渲染树。接下来，渲染引擎会计算每个节点的布局信息（如位置和大小），并将渲染树转换为屏幕上的像素。这个过程被称为“绘制”或“渲染”。比如 chrome 的 blink，老版本的 webkit。
JS引擎：也称为 js解析器。用来读取网页的 javaScript 代码，对其处理后运行，比如 chrome 浏览器 V8,不负责解析XML或生成渲染树。然而，JavaScript可以通过DOM API操作DOM树，从而间接地影响渲染树的生成和更新。。
多线程工作流程
- 网络线程负责加载网页资源
- JS引擎解析JS脚本并且执行
- JS解析引擎空闲时，渲染线程立即工作
- 用户交互、定时器操作等产生回调函数放入任务队列中
- 事件线程进行事件循环，将队列里的任务取出交给JS引擎执行
三、chrome运行原理
主进程工作流程
1. 输入解析
浏览器首先解析输入的内容，
判断它是一个有效的URL还是搜索查询。如果输入的内容被识别为搜索查询，浏览器将使用默认的搜索引擎进行搜索。
2. DNS查询
如果输入的内容是一个有效的URL，浏览器将进行域名系统（DNS）查询以将域名解析为对应的IP地址。浏览器会首先检查本地DNS缓存，如果找不到对应的记录，它会向DNS服务器发送查询请求。
3. 建立连接
浏览器与目标服务器建立一个TCP连接。这通常包括三次握手过程，以确保双方都准备好进行数据传输。
4. 发送HTTP请求：
TCP连接建立后，浏览器向服务器发送一个HTTP请求。请求通常包括请求方法（如GET或POST）、请求的资源路径、HTTP协议版本、请求头（包含诸如用户代理、接受的编码和语言等信息）以及可能的请求体（如POST请求所包含的表单数据）。
5.接收响应：
服务器处理HTTP请求，并将响应数据发送回浏览器。响应通常包括HTTP状态码（如200表示成功，404表示未找到等）、响应头（包含诸如内容类型、内容长度等信息）以及响应体（通常是HTML文档）。
6. 关闭或重用连接：
一旦浏览器接收到完整的响应数据，它可以选择关闭TCP连接或将其保持在活动状态以用于后续请求
7. 解析HTML：
浏览器解析HTML文档，构建DOM树。在解析过程中，浏览器可能遇到
<script>标签或其他需要立即执行的脚本，这时浏览器将暂停解析，执行脚本，然后继续解析。
8. 请求其他资源：
HTML文档通常包含其他资源的引用，如CSS、JavaScript和图片等。浏览器将发送额外的HTTP请求来获取这些资源。这些请求可能与初始请求的服务器相同，也可能涉及其他服务器。
9. 构建渲染树：
浏览器解析CSS样式，并将其应用于DOM树，生成渲染树。渲染树包含了所有可见元素及其样式信息。
10. 布局：
浏览器计算渲染树中每个元素的位置和大小，生成布局信息。
11. 绘制：
浏览器根据渲染树和布局信息将元素绘制到屏幕上。这个过程称为绘制或渲染。浏览器会将各个层的元素绘制到位图中，然后将这些位图合成到屏幕上显示的最终图像。
12. 交互：
在完成页面绘制后，浏览器开始接收和处理用户的交互，如点击、滚动、输入等。这些交互可能会触发JavaScript事件处理程序，从而修改DOM或应用新的样式。这些修改可能会导致浏览器重新布局和绘制页面的部分或全部内容。
13. 关闭或卸载：
当用户导航到其他页面或关闭浏览器选项卡时，浏览器将触发相应的页面卸载事件，如
beforeunload和unload。这给开发者一个机会来执行清理操作，如保存用户数据或取消挂起的网络请求。一旦完成这些操作，浏览器将卸载页面并释放相关资源
渲染进程工作流程
浏览器性能优化
- 防止内存泄露
- 循环尽早break
- 合理使用闭包
- 减少Dom访问
- 防抖、节流
- Web Workers
四、跨端容器
跨端的由来
1. 开发成本、效率
跨端开发可以帮助降低成本和提高开发效率。使用跨端技术，开发者只需编写一份代码，就可以在多个平台（如iOS、Android和Web）上运行。这可以减少开发和维护的工作量，节省时间和资源。同时，开发团队可以更快地推出新功能和修复问题，因为他们只需关注一份代码库。
2. 一致性体验
跨端开发可以确保在不同平台上提供一致的用户体验。使用跨端技术，开发者可以更容易地保持应用的外观和功能一致，无论用户在什么设备上使用。这有助于提高用户满意度和用户留存率。
3. 前端开发生态
跨端开发受益于强大的前端生态系统。许多流行的前端框架和库，如React Native、Flutter和Ionic，都支持跨端开发。这些工具为开发者提供了丰富的资源和丰富的社区支持，帮助他们更轻松地实现跨端功能。
常见的跨端方案
- webview
- 小程序
- RN/Weex
- Lynx
- Flutter
课程总结
