客户端容器 - web浏览器 | 青训营笔记

123 阅读5分钟

客户端容器 - web浏览器以及跨端方案 | 青训营笔记

浏览器架构

浏览器架构演进

单进程架构:所有模块运行在同一个进程里,包含网络、插件、JavaScript运行环境等

多进程架构:主进程、网络进程、渲染进程、GPU进程、插件进程

面向服务架构:将原来的UI、数据库、文件、设备、网络等,作为一个独立的基础服务

浏览器架构 - 任务管理器

任务管理器主要负责以下几方面的功能:

  1. 进程监控:任务管理器可以实时查看浏览器中的各个进程,包括标签页进程、插件进程和扩展进程等。它可以展示各个进程的资源使用情况,如内存占用、CPU使用率和网络活动等。
  2. 进程管理:任务管理器负责启动和关闭浏览器的进程。当用户打开一个新的标签页或启动一个插件时,任务管理器会创建相应的进程。当标签页被关闭或插件停止运行时,任务管理器会结束相应的进程,以释放系统资源。
  3. 资源分配:任务管理器根据各个进程的资源需求,动态地分配系统资源。例如,对于需要大量CPU资源的进程,任务管理器会分配更多的CPU时间片。同时,任务管理器还可以确保关键进程(如用户界面进程)始终获得足够的资源,从而保证整个浏览器的流畅运行。
  4. 进程隔离:为了提高浏览器的安全性,任务管理器会对各个进程进行隔离。这意味着一个进程无法直接访问另一个进程的内存空间。进程隔离可以防止潜在的安全漏洞影响到整个浏览器系统。
  5. 异常处理:任务管理器负责检测和处理进程中的异常情况。当某个进程发生崩溃或无响应时,任务管理器会尝试自动恢复该进程。如果无法恢复,任务管理器会提示用户关闭相应的标签页或插件,以防止整个浏览器崩溃。

渲染进程

渲染进程 - 多线程架构

线程是进程内的一个执行单元,它共享进程的地址空间和资源,但拥有自己的执行堆栈和程序计数器。一个进程可以包含多个线程,它们可以并发地执行任务。

线程的特点:

  • 轻量级:线程比进程更轻量级,创建和切换线程的开销较小。
  • 共享资源:线程之间可以共享进程的地址空间和资源,这使得线程间的通信和数据共享变得更加简单高效。
  • 上下文切换:线程之间的上下文切换成本较低,因为它们共享相同的地址空间。

应用场景:线程通常用于实现并发执行和任务分解。例如,在一个图形编辑器中,可以使用多个线程分别处理用户输入、图形渲染和文件保存等任务,从而提高程序的响应速度和执行效率。

跨端容器

为什么需要跨端

  • 开发成本、效率

    • 跨端开发可以帮助降低成本和提高开发效率。使用跨端技术,开发者只需编写一份代码,就可以在多个平台(如iOS、Android和Web)上运行。这可以减少开发和维护的工作量,节省时间和资源。同时,开发团队可以更快地推出新功能和修复问题,因为他们只需关注一份代码库。
  • 一致性体验

    • 跨端开发可以确保在不同平台上提供一致的用户体验。使用跨端技术,开发者可以更容易地保持应用的外观和功能一致,无论用户在什么设备上使用。这有助于提高用户满意度和用户留存率。
  • 前端开发生态

    • 跨端开发受益于强大的前端生态系统。许多流行的前端框架和库,如React Native、Flutter和Ionic,都支持跨端开发。这些工具为开发者提供了丰富的资源和丰富的社区支持,帮助他们更轻松地实现跨端功能。

思考

小程序在体验上可能比一般的Webview流畅的原因可能有以下几个:

原生化的设计:小程序采用原生化的设计,比起普通Webview页面,它更加轻量级,且加载速度更快。此外,小程序的交互、滑动、动画等细节设计也更加贴合用户习惯,能够提升用户的体验感。

优化的渲染机制:小程序采用了自己的渲染机制,能够有效地避免一些Webview中的性能瓶颈。例如,小程序可以预加载页面,提高页面打开速度;同时,它也能够更加灵活地控制页面的渲染,从而保证流畅度。

应用场景的限制:小程序的应用场景相对于普通Webview而言比较有限,其提供的功能和交互方式都是经过设计和优化的,相比较于浏览器中的Web页面,它能够更加针对特定的场景,从而提供更好的使用体验。

总之,小程序相较于普通Webview页面,因其原生化的设计、优化的渲染机制和应用场景的限制,能够提供更加流畅的用户体验。