Electron核心概念术语详解：从ASAR到WebView的完整指南

于 2025-05-30 09:00:43 发布
阅读量306 收藏 4
点赞数 3
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gitblog_00180/article/details/148323003

Electron核心概念术语详解：从ASAR到WebView的完整指南

electron 使用Electron构建跨平台桌面应用程序，支持JavaScript、HTML和CSS electron 项目地址: https://gitcode.com/gh_mirrors/el/electron

前言

Electron作为跨平台桌面应用开发框架，在其生态中形成了特有的技术术语体系。本文将系统性地解析这些核心概念，帮助开发者深入理解Electron的工作原理。无论您是刚接触Electron的新手，还是希望巩固基础的中级开发者，这些术语的准确理解都将为您的开发工作奠定坚实基础。

核心打包与分发术语

ASAR：高效的资源打包方案

ASAR（Atom Shell Archive Format）是Electron特有的归档格式，其设计初衷是为了解决Windows平台下大量小文件读取的性能瓶颈问题。它采用类似tar的打包方式，但具有以下独特优势：

  • 无需解压即可读取：Electron可以直接从ASAR包中读取任意文件内容
  • 优化依赖加载：特别适合处理node_modules中大量小型JS文件
  • 保持路径结构：打包后仍保留原始文件目录结构

实际开发中，通过electron-builder等工具可以轻松将应用资源打包为ASAR格式。

平台特定打包格式

不同操作系统有各自的安装包格式：

  • DMG：macOS的磁盘映像格式，相当于Windows的ISO
  • MSI：Windows Installer使用的安装包格式，支持安装流程定制
  • MAS：特指苹果Mac App Store的发布渠道

进程模型关键概念

主进程（Main Process）

作为Electron应用的"大脑"，主进程具有以下特征：

  • 通常是项目的main.js文件
  • 管理应用生命周期（启动到退出）
  • 控制原生UI元素（菜单、任务栏图标等）
  • 具备完整的Node.js环境访问权限
  • 每个Electron应用有且仅有一个主进程

渲染进程（Renderer Process）

每个浏览器窗口都是一个独立的渲染进程：

  • 可以存在多个实例
  • 默认情况下无法直接访问Node.js API
  • 运行在沙箱环境中，安全性更高
  • 可以设置为隐藏状态

进程间通信（IPC）

Electron使用IPC机制实现进程间通信：

  • 基于JSON消息的序列化传输
  • 主进程与渲染进程之间双向通信
  • 类似Web开发中的postMessage机制
  • 是Electron多进程架构的核心纽带

安全相关术语

代码签名（Code Signing）

数字签名技术确保应用完整性：

  • Windows和macOS有各自的签名机制
  • 发布到应用商店的必备步骤
  • 防止代码被篡改
  • 提升用户安装时的信任度

上下文隔离（Context Isolation）

重要的安全防护机制：

  • 隔离预加载脚本与网页环境
  • 防止Node.js API意外泄露
  • 必须通过contextBridge显式暴露接口
  • Electron 12+默认启用此功能

沙箱（Sandbox）

继承自Chromium的安全特性：

  • 限制渲染进程的权限
  • 防止恶意代码执行危险操作
  • 可配置的隔离级别
  • 平衡安全性与功能需求

原生集成相关

原生模块（Native Modules）

C++扩展Node.js能力：

  • 也称为Node.js插件（Addons）
  • 需要针对Electron的V8版本重新编译
  • 常用场景包括：
    • 性能敏感操作
    • 硬件设备交互
    • 已有C++库的集成

CRT（C Runtime Library）

Windows开发的重要组件：

  • 实现C标准库功能
  • 支持原生代码开发
  • Visual C++的重要组成部分
  • 影响原生模块的兼容性

其他关键技术

预加载脚本（Preload Script）

连接主进程与渲染进程的桥梁：

  • 在网页内容加载前执行
  • 可以访问Node.js API
  • 通过contextBridge安全暴露功能
  • 典型应用场景：
    • 暴露IPC通信方法
    • 提供受限的Node.js功能

WebView组件

嵌入式内容解决方案：

  • 类似iframe但更安全
  • 运行在独立进程中
  • 异步通信机制
  • 适用于：
    • 嵌入第三方网页
    • 隔离不受信任内容
    • 多文档界面应用

V8引擎

Electron的JavaScript核心：

  • Google开发的高性能JS引擎
  • 同时被Chromium和Node.js使用
  • 版本与Chrome保持同步
  • 影响ECMAScript特性支持

开发实践建议

  1. 进程规划：合理划分主进程与渲染进程的职责
  2. 安全优先：默认启用上下文隔离和沙箱
  3. 打包优化：使用ASAR改善文件加载性能
  4. 原生扩展：注意不同Electron版本的V8兼容性
  5. 更新策略：考虑集成Squirrel实现自动更新

理解这些核心术语将帮助您避免Electron开发中的常见陷阱，构建出更高效、更安全的桌面应用程序。随着Electron版本的演进，部分术语的具体实现可能会有所变化，但基本概念保持稳定，是每位Electron开发者必须掌握的基础知识。

electron 使用Electron构建跨平台桌面应用程序，支持JavaScript、HTML和CSS electron 项目地址: https://gitcode.com/gh_mirrors/el/electron

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

禹神：一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron
宝码香车的博客
07-16 5万+
1.后面有的bug可能与Electron Forge配置有关。有时间试试，找个解决方案。2.也有可能与main.js写法有关。3.打包时删除main.js里的win.openDevTools() //自动打开调试窗口否则软件会自动打开调试窗口。4. 代码仓库位置终于完成，虽然有bug,但能运行起来了。后续找个更好的解决方案。
Electron----桌面应用开发框架
weixin_41978174的博客
07-22 7337
Electron 是一个开源框架，旨在使用 Web 技术（如 HTML、CSS 和 JavaScript）开发跨平台的桌面应用。它结合了 Chromium 和 Node.js，使开发者能够构建具有原生应用体验的桌面应用程序，同时使用熟悉的 Web 开发工具和技术。它的灵活性、强大的功能和良好的社区支持使得它成为构建现代桌面应用的热门选择。：负责管理应用的生命周期、创建和管理窗口以及处理系统级别的 API 请求。：提供了简化的工具链来创建、开发、打包和发布 Electron 应用。类来创建和管理应用窗口。
electron asar
顺其自然~专栏
04-19 3891
Asar is a simple extensive archive format, it works liketarthat concatenates all files together without compression, while having random access support. Asar是一种简单的扩展存档格式，它的工作原理是tar将所有文件连接在一起而不进行压缩，同时具有随机访问支持。 特征 支持随机访问 使用JSON存储文件信息 编写解析器非常容易 安装 Thi..
Electron（一）
m0_61472704的博客
05-14 1248
是一款应用广泛的、跨平台的、桌面应用开发框架。应用广泛：很多桌面应用都是这个框架写的，例如腾讯qq、百度云跨平台：跨window、mac、Linux这三大系统。
QQ音乐客户端实战开发（electron）
08-14
QQ音乐客户端实战开发（Electron）课程，带你深入探索使用Electron框架构建跨平台桌面应用的魅力。课程涵盖从项目初始化到功能实现的完整流程，包括UI设计、音乐播放控制、歌单管理、API调用等关键技能。通过实战项目，你将掌握Electron与前端技术的结合，打造专业级QQ音乐桌面客户端。适合前端开发者及希望扩展桌面应用技能的学习者。
深入理解Electron一Electron架构介绍
weixin_43188769的博客
03-18 2137
Electron和众多类似的产品目标非常简单，他们将chromium（这里不同的框架选择不同，比如Tauri选择了原生的WebView，而WebView2选择了Edge内核）和Node.js（这里不同框架采取策略也不同，比如Webview2不提供默认的运行时，而Tauri选择了Rust等等）利用C++等原生语言集成起来，提供了一整套基于Web的运行环境，并提供了与底层OS交互的便捷API，目的就是为了让大家使用Web的技术栈去开发客户端原生应用，从而实现不同操作系统之间的跨平台开发。
【桌面应用开发】Electron框架快速入门指南：跨平台应用开发全流程详解
最新发布
05-17
此外，还涵盖了从搭建工程、加载本地页面、完善窗口行为、配置自动重启，到使用Preload脚本和实现进程间通信的具体步骤。最后，介绍了如何使用electron-builder进行应用打包，以及electron-vite这一新型构建工具的...
Electron那些事05：保护源码asar
uikoo9的专栏
03-17 4529
【前言】 回顾之前的章节Electron那些事02：打包_uikoo9的博客-优快云博客 打包应用这里还有一个优化点，本节来优化一下 【对比Electron应用】 对比几个electron应用的文件结构 vscode，app文件夹下可以看到部分源码 某网盘，app对应的位置是一个app.asar文件，无法直接打开 本文应用vq，app文件夹下可以看到所有源码 看到这里有几个问题 1.为什么有的应用app文件夹下可以看到所有源码（相信我，不仅仅是示例的vq应..
electron-asar-encrypt-demo:在Electron应用程序中隐藏JavaScript代码
05-23
给 Electron 应用加密源码 为什么会有这个仓库？...使用官方提供的 asar 库很容易把所有的源码从 ASAR 包提取出来，所以起不到加密的效果，只是对于初心者来说想接触到源码多了一点小门槛，稍微懂行一点的
Electron异步队列管理神器：electron-webview-schedule介绍
在给定的文件信息中，【标签】:"electron webview memory promise-queue JavaScript" 揭示了 electron-webview-schedule 的一些核心概念： - **Electron**: 基础框架，用于创建桌面应用。 - **Webview**: Electron ...
Electron 开发环境搭建指南：从 Node.js 到第一个桌面应用
weixin_39269655的博客
04-23 1114
访问 Node.js 官方网站（https://nodejs.org/），下载并安装与您操作系统匹配的最新稳定版 Node.js。至此，恭喜你，你已经成功搭建了 Electron 开发环境，并创建并运行了你的第一个跨平台桌面应用。相信看到这里的小伙伴已经是看到了第一篇对于 Electron 框架的介绍，并且想要学习 Electron 框架，假设你已经学会了前端的基础和 Node.js ，接下来我们一起来看一下如何搭建 Electron 的开发环境吧~在终端中运行一下命令启动你的electron应用。
Electron构建桌面应用程序，自主学习记录(持续更新...
jyl919221lc的博客
10-08 1560
4.检查node/npm是否正确安装 node -v && npm -v。一.nvm安装node方式以及可能出现问题的解决方案。新建main.js文件。
Electron - 跨平台桌面应用开发工具的使用总结
m0_37728716的博客
05-16 1380
width: 80,frame: false, // 透明窗口transparent: true, // 透明窗口backgroundColor: '#00000000', // 透明窗口autoHideMenuBar: true, // 透明窗口})
【Electron】Electron学习笔记
墨苒孤的博客
08-27 2019
Electron是一个跨平台桌面应用开发框架，开发者可以利用HTMLCSSJavaScript等Web技术来构建桌面应用程序。它本质上是结合了Chromium和Node.js，目前广泛用于桌面应用程序开发。例如，许多桌面应用都采用了Electron技术。Electron官网以下这些都是使用了Electron: 一个流行的开源代码编辑器，由Microsoft开发。GitHub官方提供的桌面客户端，用于管理Git代码仓库。1Password: 一个密码管理工具，提供安全的密码保存和管理功能。新版QQ。
跨平台桌面应用的开发框架——Electron
xxxzzzqqq_的博客
03-07 1万+
本文介绍了我们对桌面端技术的调研、确定技术选型，以及用 electron 开发过程中，总结的实践经验，如构建、性能优化、质量保障、安全等。希望对读者在开发桌面应用过程中有所帮助，文章难免有不足和错误的地方，欢迎读者在评论区交流。
Electron 应用程序打包体积过大常用的优化方法
热门推荐
q1003675852的博客
12-04 1万+
使用 webpack 或 rollup 等模块打包工具可以将应用程序中的多个模块打包成单个文件，从而减少文件数量和大小，从而减小应用程序的打包体积。asar 是一种将应用程序打包为单个归档文件的方法，可以有效减少文件数量和大小，从而减小应用程序的打包体积。如果想通过修改app.asar的扩展名，再用其它解压工具，或者用其它解压工具直接打开，可能会报错。将应用程序的文件进行压缩，可以有效减小文件大小。检查应用程序依赖的模块和库是否真正需要使用，如果不需要，可以将其从项目中移除。来删除未使用的依赖项。
桌面应用开发之Electron
weixin_42312941的博客
09-05 395
Electron官网: https://www.electronjs.org/Electron是一个使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。它基于Node.js和Chromium，被Atom编辑器和许多其他应用程序使用。Electron兼容Mac、Windows和Linux，可以构建出三个平台...
桌面开发：Electron 代码打包 asar
程序员写的技术 FAQ 和杂文
03-31 2123
默认情况下 electron-builder 会把开发者编写的 HTML, CSS 和 JavaScript 代码以及相关的资源打包成 asar 文件嵌入到安装包中，再分发给用户。 安装 asar npm install asar -g 列出文件 asar list app.asar 释放指定文件 asar ef app.asar entry.js （注意，不能运行中） 全部释放 asar e app.asar 结论打包加密的作用几乎为零。一般的 javascript 开发人员就可以查看代
Electron WebView 完全指南
gitblog_00988的博客
08-26 631
Electron WebView 完全指南 项目地址:https://gitcode.com/gh_mirrors/el/electron-webview 1. 项目目录结构及介绍 ├── assets # 资源文件夹，存放图标和其他静态资产 │ ├── icons # 图标子文件夹 │ └── png ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

松忆玮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值