Electron+Vue应用中JS大数组加载性能优化方案咨询

针对你遇到的53000条对象数组导致的性能问题，结合你的技术栈（Electron+Vue+ODBC+RxDB），给出以下具体优化建议：

一、修复当前代码的异步逻辑问题 #

你的background.js中判断suppliersData && clientsData的逻辑是同步执行的，此时两个异步查询还未完成，永远不会触发databaseUpdateCompleted事件。可以用Promise.all来处理并行异步任务：

// background.js 修正版
ipcMain.on('init', (event, ...args) => {
    const suppliersQuery = suppliersdb.query('SELECT * FROM FANFOR0F_1')
        .then(results => {
            console.log('供应商数据条数:', results.length);
            event.sender.send('suppliersData', results);
            return true;
        }).catch(e => {
            console.error('供应商查询错误:', e);
            event.sender.send('databaseUpdateError', e);
            return false;
        });

    const clientsQuery = clientsdb.query('SELECT * FROM PDECON0F_1')
        .then(results => {
            console.log('客户数据条数:', results.length);
            event.sender.send('clientsData', results);
            return true;
        }).catch(e => {
            console.error('客户查询错误:', e);
            event.sender.send('databaseUpdateError', e);
            return false;
        });

    // 等待两个查询都完成后发送完成事件
    Promise.all([suppliersQuery, clientsQuery])
        .then(([suppliersOk, clientsOk]) => {
            if (suppliersOk && clientsOk) {
                event.sender.send('databaseUpdateCompleted');
            }
        });
});

二、数据库层面：分页查询，避免一次性加载全量数据 #

不要直接SELECT *拉取所有数据，改为分页查询，分批次获取并传输，从根源减少单次数据量：

1. 主进程分页查询示例 #

// background.js 新增分页查询接口
ipcMain.handle('getSuppliersPage', async (event, page = 1, pageSize = 1000) => {
    const offset = (page - 1) * pageSize;
    // Access用TOP+子查询实现分页，不同ODBC驱动语法可能有差异
    const query = `SELECT TOP ${pageSize} * FROM FANFOR0F_1 WHERE ID NOT IN (SELECT TOP ${offset} ID FROM FANFOR0F_1 ORDER BY ID)`;
    try {
        const results = await suppliersdb.query(query);
        const totalRes = await suppliersdb.query('SELECT COUNT(*) AS total FROM FANFOR0F_1');
        return {
            data: results,
            total: totalRes[0].total
        };
    } catch (e) {
        console.error('分页查询错误:', e);
        throw e;
    }
});

2. 前端按需请求分页数据 #

// Vue组件中
async mounted() {
    // 加载第一页数据
    const pageData = await window.ipcRenderer.invoke('getSuppliersPage', 1, 1000);
    this.store.suppliers = pageData.data;
    this.totalSuppliers = pageData.total;
}

// 翻页方法
async loadPage(page) {
    const pageData = await window.ipcRenderer.invoke('getSuppliersPage', page, 1000);
    this.store.suppliers = pageData.data;
}

三、前端层面：虚拟滚动解决DOM渲染性能问题 #

当需要展示大量列表时，虚拟滚动是最优解——只渲染当前视口内的DOM元素，而非全部53000条。可以使用成熟的Vue组件：

示例：使用vue-virtual-scroller #

1. 安装依赖：npm install vue-virtual-scroller
2. 在Vue组件中使用：

<template>
  <virtual-scroller
    :items="store.suppliers"
    :item-height="50"
    class="scroller"
  >
    <template v-slot="{ item }">
      <div class="supplier-item">{{ item.name }}</div>
    </template>
  </virtual-scroller>
</template>

<script>
import { VirtualScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

export default {
  components: { VirtualScroller },
  // ...其他逻辑
}
</script>

<style>
.scroller {
  height: 600px;
  overflow-y: auto;
}
</style>

如果偏好滚动加载下一页（懒加载），可以监听滚动事件，当滚动到底部时自动请求下一页数据并追加到数组中。

四、RxDB本地缓存落地建议 #

用RxDB做本地缓存可以彻底解决启动加载慢的问题，具体落地步骤：

• 首次启动同步全量数据：应用第一次启动时，从Access分批拉取全量数据写入RxDB；后续启动直接从RxDB读取，无需再请求Access。
• 增量同步更新：在Access表中添加last_updated字段记录数据修改时间，后台定期（或启动时）查询Access中last_updated大于上次同步时间的数据，只同步增量部分到RxDB，减少数据传输量。
• 本地查询能力：前端直接从RxDB做分页、过滤、排序等操作，无需通过主进程的ODBC查询，减少IPC通信开销。

五、IPC通信优化 #

• 避免一次性发送几万条数据，分批次传输或用ipcMain.handle返回Promise（比send/receive更适合异步数据请求）。
• 用contextBridge安全暴露API，替代直接使用ipcRenderer，符合Electron安全规范：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  getSuppliersPage: (page, pageSize) => ipcRenderer.invoke('getSuppliersPage', page, pageSize),
  initDatabase: () => ipcRenderer.invoke('init')
});

// Vue组件中调用
await window.electronAPI.getSuppliersPage(1, 1000);

内容的提问来源于stack exchange，提问作者OHICT