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

Question

[我有一个使用Electron的d3应用，它使用了许多小的（50 x 50 px）SVG图标-可能有100个或更多，并且有很多重复项。

使用fs从磁盘读取图标，并返回到我的d3创建例程。用户在编辑项目时能够切换图标。他们可以反复使用一个或两个图标，也可以使用可供选择的50个图标中的任何一个。

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

我是一年多以前写的代码，今天不得不去解决一个问题。现在看，我想知道这全是愚蠢的：与遍历数组相比，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？

向地图添加图标：

    const iconMap = new Map();

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

要从地图上检索图标：

    iconData = iconMap.get(iconName);