客户端容器

110 阅读4分钟

首先是浏览器的架构演进:

  1. 单一进程架构:最初时,浏览器采用单一进程架构,即所有的浏览器功能都运行在同一个进程中。这样做的好处是简单易懂,容易实现。但是,如果其中一个功能出现问题,整个浏览器就会崩溃。
  2. 多进程架构:随着互联网不断发展,浏览器的功能越来越多,为了解决单一进程架构下的稳定性和安全性问题,多进程架构应运而生。多进程架构将浏览器划分成多个进程,每个进程单独执行特定的任务,例如渲染页面、处理插件、管理用户界面等。这样做的好处是提升了浏览器的稳定性和安全性,同时也提高了性能和效率。
  3. 面向服务架构:近年来,随着移动设备和Web应用的快速发展,越来越多的浏览器开始采用面向服务架构。这种架构将浏览器的不同功能模块划分成多个独立的服务,每个服务提供不同的API和接口,开发者可以根据自己的需要来选择和使用不同的服务。这种架构的好处是更加灵活、可扩展和易维护,同时也可以促进开发者之间的合作和共享。

image.png

image.png

下面介绍一下渲染进程:

首先是多线程架构

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

image.png

而对于多线程工作流程:

有下面几个要点:

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

2,JS引擎解析JS脚本并且执行

3,JS解析引擎为空时,渲染线程立即工作

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

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

image.png

接着是Chrome的运行原理:

有下面以下的操作:

Chrome的运行原理可以简单归纳为以下几个方面:

  1. 多进程架构:Chrome采用多进程架构,主进程负责管理各个子进程,并且负责处理用户界面和浏览器功能。而每个标签页和插件都会运行在单独的子进程中,这样就可以使得一个标签页或者插件出现问题时不会影响整个浏览器的稳定性。
  2. 网络模块:Chrome的网络模块采用了WebKit引擎,它可以处理HTML、CSS和JavaScript等网页相关技术,同时它还提供了高效的网络访问功能。
  3. V8引擎:V8是Chrome内置的JavaScript引擎,负责处理并解析网页中的JavaScript代码。
  4. GPU加速:Chrome支持GPU加速技术,这意味着一些图形化操作(例如视频播放、3D图形渲染等)可以直接使用显卡来处理,从而提高性能和流畅度。
  5. 智能优化:Chrome还内置了Google的智能优化技术,例如预加载、DNS预解析和数据压缩等,这些技术可以加速网页加载和节省带宽。

接着就是跨端容器:

主要介绍的是webview:

首先是优势: 1,一次开发,处处使用,学习成本低。 2,随时发布,及时更新,不用下载安装包 3,移动设备性能不断更新性能有保障 4,通过JSbridge和原生系统交互,实现复杂功能

而Webview的特点是:

  1. 支持多端应用:跨端容器 Webview 可以在多个平台上运行,开发者只需要编写一次代码即可将应用运行在不同平台上。这大大降低了开发成本,并且可以提高开发效率。
  2. 具备原生应用体验:跨端容器 Webview 支持对原生应用的大部分功能进行模拟和支持,可以提供与原生应用相似的用户体验。
  3. 提供更好的性能:现代的跨端容器 Webview 可以通过优化 JavaScript 引擎、缓存机制、网络传输等方式提高应用的性能,从而达到接近原生应用的响应速度和流畅度。
  4. 可扩展性强:跨端容器 Webview 通常可以支持运行 Web 应用、框架和库,开发者可以使用自己熟悉的 Web 技术进行开发和扩展。

跨端容器 Webview 的主要实现方式有多种,例如 React Native、Flutter、Weex 等。编写跨端容器 Webview 应用需要一定的技术储备和经验,但是跨端容器 Webview 的发展对于应用开发与推广都有很大的意义。

最后的总结:

image.png