Electron笔记一:介绍

什么是 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有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘、消息通知这些。
通过三者的巧妙组合,我们开发应用变得十分高效。
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 的主进程,能打开新的窗口或关闭这个应用。

Electron 优缺点
优点
上手简单
HTML、CSS、JS、Node 。npm包、UI框架 ,方便高效,能很轻松的实现很好看的UI
多端运行
快速构建“跨平台”(Windows、MacOs、Linux)的桌面级应用
开发时间短
相对其他跨平台方案(如 QT GTK+ 等),更稳定,bug少,开发简单。
不用考虑多浏览器的兼容,只针对谷歌 但要兼容mac、Linux
缺点
安装包体积略大(打包了Chromium) 至少包含了一个浏览器的体积 ,每装一个 app 就相当于装一个 chrome,
性能低下,不如原生应用,启动慢。新开一个进程,起步价就是一个nodejs的内存开销
loadURL加载远程页面白屏事件长,优化可采用 vscode 骨架屏
基于Electron开发的应用

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