Electron 窗口池管理实践指南

本文首发同名微信公众号：前端徐徐 

大家好，我是徐徐，今天我们聊聊如何在 Electron 中优雅得进行窗口管理。

前言

在 Electron 应用中，我们经常会遇到新窗口打开显示缓慢的问题，大多数解决方案是先把要打开的窗口先隐藏起来，然后在需要打开的时候再展示出来，不得不说这个是一个简单高效的方法。但是这样会面临两个问题，第一个问题是如果用户不打开新窗口，那么就会有多余的进程消耗 CPU 和 内存；第二个问题是窗口只有显示和隐藏，所有隐藏窗口的状态不会按需得到初始化和销毁（当然可以通过事件监听或者主进程发送消息的方式，这样负担有点重），基于上面的场景和问题便有了窗口池的概念。

窗口池原理

窗口池的原理的确与线程池和数据库连接池类似，都是通过预先创建一定数量的资源来提升系统的响应速度和资源利用率。具体来说，窗口池的工作流程如下：

1. 初始化窗口池：

• • 在应用程序启动时，预先创建 n 个隐藏的窗口，这些窗口加载一个空白页面。如果使用的是 Vue 或 React，可以在这些窗口中提前初始化实例，甚至渲染自定义的窗口标题栏，只是不渲染内容区域。
  • 这些窗口被隐藏，并且保存在一个池子中，等待被使用。

1. 请求窗口：

• • 当用户需要一个窗口时，程序从窗口池中取出一个备用窗口。
  • 将该窗口的内容区域路由到用户指定的页面，并显示该窗口。
  • 由于窗口已经初始化，内容区域的路由跳转非常快，一般不会超过0.5秒。

1. 释放窗口：

• • 当用户关闭窗口时，窗口实例被释放。
  • 程序监听窗口的关闭事件，一旦检测到一个窗口被释放，就马上创建一个新的隐藏窗口补充到窗口池中，以确保窗口池中始终有 n 个备用窗口。

先看效果

我们分别用两种方式打开同一个窗口，每隔 1s 打开一次，连续打开10次。分别看看使用窗口池和不使用窗口池的时间差。