欢迎光临散文网 会员登陆 & 注册

Electron笔记一:介绍

2023-03-03 19:48 作者:gideshi  | 我要投稿


  1. 什么是 Electron?

介绍

Electron官网的简介的介绍:使用 JavaScript, HTML 和 CSS 构建跨平台(Windows、MacOs、Linux)的桌面应用。electron 其实就是一个可以展示网页内容的壳子,相当于一个独立的浏览器,可以提供给你一些接口,去调用系统的资源。

发展历程

Electron的前身是 atom 编辑器,是在它的基础上实现过来的一套跨平台解决方案。最初被GitHub开发,2013年4月11日以Atom Shell为名起步,2014年5月16日开源,2015年4月17日改名为Electron。

组成

Chromium : 为Electron提供了强大的UI能力,可以不考虑兼容性的情况下,利用强大的Web生态来开发界面。electron本质上就是chromium(chrome开源版本)浏览器,最新的东西都会在chromium测试,所以electron可以体验最新的api,这也是好处之一)

应用场景

  • 一种是给现有项目打包成可执行文件,可以直接双击打开使用,不需要部署 web 服务器

  • 另一种是想做一个本地化的工具,能操作系统资源,并且能跨平台使用

Chromium 多进程架构图

主进程中的RenderProcessHost和 render 进程中的RenderProcess是用来处理进程间通信的(IPC(Inter-Process Communication,进程间通信)。

Render 进程中的 RenderView 内容基于 WebKit(浏览器引擎) 排版展示出来的

Render 进程中的ResourceDispatcher是用来处理资源请求的。Render 进程中如果有请求则创建一个请 求 ID,转发到 IPC,由 Browser 进程中处理后返回

Node.js :让Electron有了底层的操作能力,比如文件的读写,甚至是集成C++等等操作,并可以使用大量开源的npm包来完成开发需求。

Native API : Native API让Electron有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘、消息通知这些。

通过三者的巧妙组合,我们开发应用变得十分高效。

  1. Electron 架构

Electron 架构具有1个主进程和多个渲染进程。

示意图

Electron 进程

主进程

Electron 运行 package.json 的 main 脚本的进程被称为主进程

主进程特点:

1.主进程连接着操作系统和渲染进程,可以把她看作页面和计算机沟通的桥梁。

2.进程间通信、窗口管理

3.全局通用服务。

4.一些只能或适合在主进程做的事情。例如浏览器下载、全局快捷键处理、托盘、session。

5.维护一些必要的全局状态

渲染进程

渲染进程就是我们所熟悉前端环境了。只是载体改变了,从浏览器变成了window.

注:出于安全考虑,渲染进程是不能直接访问本地资源的),因此都需要在主进程完成。

渲染进程特点

  • Electron 使用了 Chromium 来展示 web 页面,所以 Chromium 的多进程架构也被使用到。

  • 每个web页面运行在它自己的渲染进程中。每个渲染进程都是相互独立的,并且只关心他们自己的网页。

  • 使用BrowserWindow类开启一个渲染进程并将这个实例运行在该进程中,当一个BrowserWindow实例被销毁后,相应的渲染进程也会被终止。

  • 渲染进程中不能调用原生资源,但是渲染进程中同样包含Node.js环境,所以可以引入Node.js(下文会提到:nodeIntegration )

主进程与渲染进程的区别

主进程使用 BrowserWindow 实例创建网页。

每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。

主进程管理所有页面和与之对应的渲染进程。

由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露,所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作,其对应的渲染进程必须与主进程进行通讯,请求主进程进行相关的 GUI 操作。

Chrome(或其他浏览器)的每个标签页(tab)及其页面,就好比 Electron 中的一个单独渲染进程。即使关闭所有标签页,Chrome 依然存在。这好比 Electron 的主进程,能打开新的窗口或关闭这个应用。

  1. Electron 优缺点

  • 优点

上手简单

HTML、CSS、JS、Node 。npm包、UI框架 ,方便高效,能很轻松的实现很好看的UI

多端运行

快速构建“跨平台”(Windows、MacOs、Linux)的桌面级应用

开发时间短

相对其他跨平台方案(如 QT GTK+ 等),更稳定,bug少,开发简单。

不用考虑多浏览器的兼容,只针对谷歌 但要兼容mac、Linux

  • 缺点

  1. 安装包体积略大(打包了Chromium) 至少包含了一个浏览器的体积 ,每装一个 app 就相当于装一个 chrome,

  2. 性能低下,不如原生应用,启动慢。新开一个进程,起步价就是一个nodejs的内存开销

loadURL加载远程页面白屏事件长,优化可采用 vscode 骨架屏

基于Electron开发的应用

Postman、uTools、Typora、Atom、Brave浏览器,最大名鼎鼎的就是vscode。


Electron笔记一:介绍的评论 (共 条)

分享到微博请遵守国家法律