从磁盘读取 SVG 图标文件与缓存 SVG 数据相比？

Question

我有一个使用d3的Electron应用程序，它使用许多小的（50 x 50 像素）SVG 图标——可能有 100 个或更多，有很多重复。

使用fs从磁盘读取图标并返回到我的d3创建例程。 用户可以在编辑项目时切换图标。 他们可以一遍又一遍地使用一个或两个图标，或者使用 select 中可用的 50 个图标中的任何一个。

我以为我很聪明，写了一个“图标管理器”，它将 SVG 数据在fs读取后缓存在一个数组中，这样如果图标被多次使用，可以返回“内存中”版本而不是读取再次从磁盘。

我在一年前编写了代码，今天不得不将 go 放入其中以解决问题。 现在看它，我想这一切都是愚蠢的：与遍历数组相比， fs访问磁盘是一种毫无意义甚至可能是“负面”的优化——随着数组中项目数量的增加，“成本“变得更高。

我是不是无缘无故在这里工作太辛苦了？

---

const fs = require('fs');
const iconLib = [];

exports.getIcon = function (iconName, iconPath) {

    for (let i = 0; i < iconLib.length; i++) {
        if (iconLib[i].iconName == iconName) {
            return iconLib[i].iconData;
        }
    }

    if (fs.existsSync(iconPath)) {
        let data = fs.readFileSync(iconPath, 'utf8');
        iconLib.push({ iconName: iconName, iconData: data })
        return data;
    } else {
        // TODO return something useful
        return 0;
    }
};

Answer 1

代替每次检索都必须遍历的数组，使用 JavaScript 的内置Map怎么样？

要将图标添加到 map：

    const iconMap = new Map();

    function cacheIcon(iconName, iconData) {
      iconMap.set(iconName, iconData);
    }

从 map 检索图标：

    iconData = iconMap.get(iconName);