六详细讲解主进程和渲染进程

原创已于 2022-02-14 17:04:16 修改 · 916 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #前端 #前端框架

于 2022-02-12 21:21:21 首次发布

Electron跨平台桌面应用开发实战专栏收录该内容

9 篇文章

订阅专栏

本文详细解读了Electron中的主进程和渲染进程概念，包括它们各自的角色、区别以及创建过程。主进程负责系统事件，由main.js控制，而渲染进程则为每个web页面独立运行，确保隔离与页面关注点。

前面章节中一直有提到主进程和渲染进程，本章我们就来详细讲解一下Electron中的主进程的渲染进程。

什么是主进程

electron项目启动的时候运行main.js的进程就是主进程
一个项目有且只有一个主进程
创建窗口等所有系统事件都要在主进程中进行
简单的说就是我们的electron项目的主进程只有一个, 主进程的执行代码需要写到main.js中, 所有跟系统事件相关的代码统统都要写在这里

什么是渲染进程

我们每创建一个web页面都会创建一个渲染进程
每个web页面运行在它自己的渲染进程中
每个渲染进程是独立的, 它只关心它所运行的页面
简单理解就是一个web页面一个渲染进程

主进程和渲染进程的区别

主进程通过BrowserWindow创建页面
每个BrowserWindow实例都在自己的渲染进程中运行, 当BrowserWindow实例被销毁后, 相应的渲染进程也会被终止

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

景能

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

第六讲Electron中主进程和渲染进程之间的双向通信

星火燎猿

08-09

1251

第六讲Electron中主进程和渲染进程之间的双向通信概述主进程和渲染进程通信渲染进程和主进程之间通信概述通过前面课程的讲解，大家对Electron的开发有了一定的认识，但是运用到实际开发中，我们就需要考虑很多情况，比如我们通过点击渲染进程触发主进程中的某个函数获取到了数据最终要显示到渲染进程中我们该怎么做，第一讲的时候我们给了个例子，渲染进程加载的时候通过主进程读取了本地的文本文件并在渲染进程中进行了显示，大家还有印象吗，本章就重点讲讲这里面的运行原理，本章主要要讲的就两个模块ipcMain和ipc

第七讲Electron中渲染进程和渲染进程之间通信

星火燎猿

08-10

551

第七讲Electron中渲染进程和渲染进程之间通信介绍渲染进程间传值渲染进程和渲染进程之间的通信介绍相信大家通过前面的学习，对Electron中的主进程和渲染进程之间的通信有了一个深刻的认识，但是大家想过没有，如果在渲染进程和渲染进程传值，我们应该怎么做？让我们先回顾一下渲染进程的创建方式： const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: {

参与评论您还未登录，请先登录后发表或查看评论

深入理解Electron应用结构：主进程与渲染进程详解

与墨的编程成长历程

03-20

2657

综上所述，深入理解并熟练运用 Electron 框架下的主进程与渲染进程模型，是构建高性能、高安全性和良好用户体验桌面应用的关键所在。随着技术的发展和实践经验的积累，相信开发者们能更好地驾驭 Electron 这一强大的工具，持续推动跨平台桌面应用开发的进步。

electron 主进程和渲染进程通信

weixin_43294560的博客

05-02

1931

1、主进程引入 const {ipcMain} = require('electron') 2、渲染进程引入 const {ipcRenderer}=require('electron'); 3、通信 (1)两个进程互相通信 主进程: 接收:ipcMain.on('主进程名‘,(event,ans)=>{ ans为渲染进程发送的数据 ...

主进程与渲染进程通信全解析，深度掌握Electron IPC机制

最新发布

FuncInk的博客

10-14

1151

掌握Electron IPC机制，解决前端electron桌面开发中主进程与渲染进程通信难题。详解双向通信、事件监听与安全传输等核心方法，适用于跨平台应用开发。高效稳定，提升开发效率，值得收藏。

Electron 架构详解：主进程与渲染进程的协作机制

2501_91537388的博客

05-05

1651

名称作用主进程（Main）应用入口，创建窗口，系统交互，生命周期控制渲染进程（Renderer）展示 UI，运行页面代码IPC 通信实现进程间交互（事件、数据）preload.js安全桥接渲染与主进程，提升安全性。

Electron 项目实战 01：主进程与渲染进程通信

Potter：I am not for learning and learning, but for study and work

08-30

1804

整体来说参看官方文档和网上的文章就可以轻松实现。

第六章：Electron 主进程与渲染进程之间的通信

黄孝果的博客

08-02

1837

渲染进程和 主进程通信（异步）渲染进程发送并接受广播数据 ipcRender //渲染进程 import { ipcRenderer } from 'electron'; var sendDom = document.querySelector('#send'); sendDom.onclick = function () { // alert('1235') //渲染进程给主进程广播数据 ipcRenderer.send('sendMessage', 'wo

Electron V28主进程与渲染进程互相通信总结

专注前端技术，包括Web端、移动端、小程序、APP

12-14

1172

本文示例采用Electron+Vue3+TS编写，请读者理顺思路，自行带入自己的项目。注：读本文前请先搞懂什么是主进程，什么是渲染进程。在Electron中有着和模块，以及创建窗口对象上的。很显然ipcMain和窗口对象上的webContents是在主进程中使用的，ipcRenderer和contextBridge（用于向渲染进程暴露API）是在预加载脚本中使用的。请看下方示例，关键讲解写在代码注释中。主进程中发送消息，是使用new 窗口时的对象上的webContents发送消息。例如： main.j

electron+vue3全家桶+vite项目搭建【13.1】ipc通信的使用，主进程与渲染进程之间的交互

个人网站：https://www.longzipeng.online

08-06

2689

electron中ipc通信的使用，主进程与渲染进程之间的交互

electron + vue3 + vite 渲染进程与渲染进程之间的消息端口通信

狼性书生

03-10

1426

渲染进程与渲染进程之间的通信有两种： - 通过主进程进行消息转发（通过组合主进程与渲染进程之间的单向、双向通信可以实现，可以自己动手尝试，该篇不讲解） - 通过消息端口进行直接通信该篇主要用示例讲解下单项目内多个窗口的渲染进程之间相互通信的流程（也就是通过消息端口进行通知）

electron渲染进程和渲染进程通信

01-25

electron 教程【1】什么是主进程、渲染进程

jigetage的专栏

07-05

2244

不知道有没有小伙伴和我一样，刚接触electron时理解错了。一直以为package.json中所设置的main.js中打开的第一个BrowserWindow是主进程，后面再打开的BrowserWindow才是渲染进程。经过项目的深入，发现上述理解是错误的，正确的理解是：主进程：main.js运行的进程是主进程。渲染进程：通过主进程，或者渲染进程创建的所有BrowserWindow运行的进程都是渲...

浏览器是多进程的，最重要的进程--浏览器内核（渲染进程详解）

weixin_38552195的博客

05-24

347

浏览器最重要的应该干的事情就是渲染界面，完成与用户的交互。和打开tab，前进后退页面/3D绘图/加载插件相比，渲染页面用到的是最重要的进程。下面总结下，我对这部分的理解。浏览器内核进程是多线程的浏览器内核进程和js引擎线程之间的关系是浏览器渲染进程是多线程的，而js引擎只是众多线程中的一个，但是像是一个明星一样，大家似乎都在为它而服务。 ...

深入现代浏览器（第三部分）【chrome 渲染器进程的内部工作原理】

twinkle的博客

09-01

929

渲染器进程的内部工作原理这是关于浏览器如何工作的 4 部分博客系列的第 3 部分。之前，我们介绍了多进程架构和导航流。在这篇文章中，我们将看看渲染器进程内部发生了什么。渲染器过程涉及 Web 性能的许多方面。由于渲染器进程内部发生了很多事情，这篇文章只是一个概括性的概述。如果您想深入挖掘， Web Fundamentals 的性能部分有更多资源。渲染器进程处理 Web 内容渲染器进程负责选项卡内发生的所有事情。在渲染器进程中，主线程处理...

Electron教程（二）启动过程：主进程，渲染进程是什么

学习笔记

07-25

5620

要想知道 `electron` 的启动过程，就需要知道 主进程、渲染进程分别是什么，因为 `electron` 就包含这两种进程 `electron` 项目跟所有的 `npm` 项目一样，入口都是 `package.json` 中的 `main` 字段指定的 js，比如你指定的是 `app.js`。

浏览器渲染页面时，渲染进程做了什么

weixin_43240744的博客

08-13

727

浏览器渲染进程做了什么

渲染进程与渲染进程之间的通信

白起的博客

12-20

479

渲染进程之间如何互相调用思路:通过主进程进程中转在渲染进程1中编写发送代码: ipcRenderer.send("a") 在主进程main.js中编写接收和转发代码 ipcMain.on('a',(event => { event.sender.send('b'); })); 在渲染进程2中编写接收代码 ipcRenderer.on("b", async (e...

零基础，给我讲解进程和线程

03-25

<think>好的，用户之前问过关于MPI在单机上使用的问题，现在又转向了进程和线程的基础概念，看来他们可能在并行计算的学习过程中遇到了基础概念的障碍。用户提到自己是零基础，所以需要从最基础的地方讲起，避免使用专业术语过多，或者至少先解释清楚术语。首先，我需要确定用户对操作系统的基本概念是否有了解。可能他们知道程序是什么，但进程和线程作为更底层的概念，可能需要用比喻或者生活中的例子来帮助理解。比如用公司或工厂的比喻，进程像是整个工厂，而线程是工厂里的工人，这样比较直观。接下来，用户可能需要区分进程和线程的区别，以及它们各自的优缺点。比如进程之间资源独立，线程共享资源，这样在通信和开销上有不同的表现。同时，要解释为什么需要多线程或者多进程，比如提高效率、资源利用率等。另外，用户可能对为什么会有这两个概念感到困惑，可能需要从计算机发展的历史角度简单说明，单进程的局限性导致线程的出现，以及多核CPU如何利用多线程提升性能。还要考虑用户的实际应用场景，比如他们可能在学习编程或者并行计算，所以需要举一些实际的例子，比如浏览器多标签页作为进程，每个标签页内的多个任务作为线程，这样他们更容易联系实际。需要注意的是，用户是零基础，所以每个概念都要循序渐进，避免信息过载。可能需要分步骤讲解，先讲进程，再讲线程，然后比较两者的区别，最后给出应用场景和选择建议。还要检查是否有常见的误解需要澄清，比如线程是否完全独立，或者进程是否完全隔离，以及多线程编程中的挑战，比如竞态条件、死锁等，但可能不需要深入，点到为止即可，避免让用户感到复杂。最后，可能需要总结一下，帮助用户巩固概念，并提供进一步学习的建议，比如推荐书籍、在线资源或者练习项目，让他们可以自己动手实践，加深理解。</think>--- ### **零基础讲解：进程 vs 线程**（类比生活场景，通俗易懂） --- #### **一、先看一个比喻** 想象你开了一家**奶茶店**： - **进程** = **整个奶茶店**（包括操作台、原料柜、收银机等所有资源） - **线程** = **奶茶店的员工**（共享操作台和原料，但各自做不同任务：点单、制作、打包） --- ### **二、进程（Process）** #### **1. 定义** - **操作系统分配资源的基本单位**（如内存、CPU时间、文件权限） - **独立空间**：每个进程有自己专属的内存区域，互不干扰 #### **2. 生活场景** - **例子**：电脑同时运行浏览器、微信、音乐播放器 → **3个进程** - **特点**： - 关闭浏览器不会影响微信（独立运行） - 浏览器崩溃了，音乐播放器还能继续（隔离性） #### **3. 关键特性** | 特性 | 说明 | |----------------------|-----------------------------| | **独立性** | 进程间数据默认不共享（需特殊通信机制如管道、Socket） | | **资源开销大** | 创建/销毁进程较慢（需分配独立内存） | | **安全性高** | 一个进程崩溃不会直接影响其他进程 | --- ### **三、线程（Thread）** #### **1. 定义** - **CPU调度的最小单位**（属于某个进程，共享该进程的资源） - **轻量级执行流**：多个线程可在同一进程内并发运行 #### **2. 生活场景** - **例子**：浏览器中： - 线程1：下载图片 - 线程2：渲染页面 - 线程3：响应用户点击 → **3个线程共享浏览器的内存资源** #### **3. 关键特性** | 特性 | 说明 | |----------------------|-----------------------------| | **共享资源** | 同一进程的线程共享内存、文件句柄等资源 | | **开销小** | 创建/销毁线程比进程快（无需分配新内存） | | **风险点** | 一个线程崩溃可能导致整个进程崩溃（共享内存出错） | --- ### **四、进程 vs 线程对比表** | **维度** | **进程** | **线程** | |------------------|-----------------------------|-----------------------------| | **资源占用** | 高（独立内存） | 低（共享内存） | | **通信方式** | 复杂（需IPC机制：管道、消息队列等） | 直接（读写共享变量） | | **切换成本** | 高（涉及内核调度） | 低（通常在用户态完成） | | **适用场景** | 需要高安全隔离的任务（如银行APP） | 需要高并发的任务（如Web服务器处理请求） | --- ### **五、技术示例** #### **1. 进程示例**（Python代码） ```python import os print("主进程ID:", os.getpid()) # 创建子进程（完全独立） pid = os.fork() if pid == 0: print("子进程ID:", os.getpid(), "父进程ID:", os.getppid()) else: print("父进程继续运行") ``` #### **2. 线程示例**（Python代码） ```python import threading def task(): print("线程执行，当前线程:", threading.current_thread().name) # 创建两个线程（共享同一进程内存） t1 = threading.Thread(target=task) t2 = threading.Thread(target=task) t1.start() t2.start() ``` --- ### **六、如何选择？** - **用进程**： - 任务需要严格隔离（如安全敏感程序） - 需充分利用多核CPU（进程可绑定到不同核心） - **用线程**： - 任务需要频繁通信（如实时数据处理） - 追求高响应速度（如GUI界面保持流畅） --- ### **七、常见误区** - ❌ **“线程一定比进程快”** → 线程适合I/O密集型任务，CPU密集型任务可能因全局锁（如Python的GIL）反而变慢 - ❌ **“进程越多越好”** → 进程数超过CPU核心数会导致频繁切换，降低效率 - ❌ **“线程不需要同步”** → 多线程写共享变量必须加锁（如`threading.Lock`），否则数据会错乱 --- ### **八、延伸学习建议** 1. **动手实验**： - 用Python写一个多线程爬虫（同时下载多个网页） - 用`multiprocessing`模块实现多进程计算质数 2. **概念深化**： - 理解**协程**（更轻量的线程，由程序自己调度，如Python的`asyncio`） - 了解**死锁**（Deadlock）和**竞态条件**（Race Condition） --- 💡 **总结**： - **进程是“资源包”**，**线程是“干活的人”** - 两者配合使用（如Chrome：多进程架构 + 每个进程内多线程）才能最大化利用计算机资源！