多进程分工
| 进程名称 | 进程描述 |
|---|---|
| 浏览器(主进程) | 主要负责页面展示逻辑，用户交互，子进程管理；包括地址栏、书签、前进、后退、收藏夹等 |
| GPU进程 | 负责UI绘制，包含整个浏览器全部UI |
| 网络进程 | 网络服务进程，负责网络资源加载 |
| 标签页(渲染进程) | 控制tab内的所有内容，将HTML、CSS和JavaScript转换为用户可交互的网页 |
| 插件进程 | 控制网站运行的插件，比如flash、ModHeader等 |
| 其他进程 | 如上图所示：适用程序Storage/Network/Audio Service等 |
浏览器地址输入URL后发生了什么(完整流程)
- 输入解析：浏览器首先解析输入的内容，判断它是一个有效的URL还是搜索查询。如果输入的内容被识别为搜索查询，浏览器将使用默认的搜索引擎进行搜索。
- DNS查询：如果输入的内容是一个有效的URL，浏览器将进行域名系统（DNS）查询以将域名解析为对应的IP地址。浏览器会首先检查本地DNS缓存，如果找不到对应的记录，它会向DNS服务器发送查询请求。
- 建立连接：浏览器与目标服务器建立一个TCP连接。这通常包括三次握手过程，以确保双方都准备好进行数据传输。
- 发送HTTP请求：TCP连接建立后，浏览器向服务器发送一个HTTP请求。请求通常包括请求方法（如GET或POST）、请求的资源路径、HTTP协议版本、请求头（包含诸如用户代理、接受的编码和语言等信息）以及可能的请求体（如POST请求所包含的表单数据）。
- 接收响应：服务器处理HTTP请求，并将响应数据发送回浏览器。响应通常包括HTTP状态码（如200表示成功，404表示未找到等）、响应头（包含诸如内容类型、内容长度等信息）以及响应体（通常是HTML文档）。
- 关闭或重用连接：一旦浏览器接收到完整的响应数据，它可以选择关闭TCP连接或将其保持在活动状态以用于后续请求。
- 解析HTML：浏览器解析HTML文档，构建DOM树。在解析过程中，浏览器可能遇到
<script>标签或其他需要立即执行的脚本，这时浏览器将暂停解析，执行脚本，然后继续解析。 - 请求其他资源：HTML文档通常包含其他资源的引用，如CSS、JavaScript和图片等。浏览器将发送额外的HTTP请求来获取这些资源。这些请求可能与初始请求的服务器相同，也可能涉及其他服务器。
- 构建渲染树：浏览器解析CSS样式，并将其应用于DOM树，生成渲染树。渲染树包含了所有可见元素及其样式信息。
- 布局：浏览器计算渲染树中每个元素的位置和大小，生成布局信息。
- 绘制：浏览器根据渲染树和布局信息将元素绘制到屏幕上。这个过程称为绘制或渲染。浏览器会将各个层的元素绘制到位图中，然后将这些位图合成到屏幕上显示的最终图像。
- 交互：在完成页面绘制后，浏览器开始接收和处理用户的交互，如点击、滚动、输入等。这些交互可能会触发JavaScript事件处理程序，从而修改DOM或应用新的样式。这些修改可能会导致浏览器重新布局和绘制页面的部分或全部内容。
- 关闭或卸载：当用户导航到其他页面或关闭浏览器选项卡时，浏览器将触发相应的页面卸载事件，如
beforeunload和unload。这给开发者一个机会来执行清理操作，如保存用户数据或取消挂起的网络请求。一旦完成这些操作，浏览器将卸载页面并释放相关资源。
总结：当您在浏览器地址栏输入URL后，浏览器会经历一系列的操作，从DNS查询和TCP连接建立，到HTTP请求、响应处理、HTML解析、资源加载、渲染树构建、布局、绘制以及用户交互等。这些操作共同构成了从输入URL到显示完整网页的整个过程
跨端容器
为什么需要跨端
-
开发成本、效率
- 跨端开发可以帮助降低成本和提高开发效率。使用跨端技术，开发者只需编写一份代码，就可以在多个平台（如iOS、Android和Web）上运行。这可以减少开发和维护的工作量，节省时间和资源。同时，开发团队可以更快地推出新功能和修复问题，因为他们只需关注一份代码库。
-
一致性体验
- 跨端开发可以确保在不同平台上提供一致的用户体验。使用跨端技术，开发者可以更容易地保持应用的外观和功能一致，无论用户在什么设备上使用。这有助于提高用户满意度和用户留存率。
-
前端开发生态
- 跨端开发受益于强大的前端生态系统。许多流行的前端框架和库，如React Native、Flutter和Ionic，都支持跨端开发。这些工具为开发者提供了丰富的资源和丰富的社区支持，帮助他们更轻松地实现跨端功能。
跨端方案
- webview
- 小程序
- RN/WeeX
- Lynx
- Flutter
