2

我希望在应用程序中将动态调色板（约 300 个条目）公开为 CSS 变量。今天，它完全在 JS 中进行管理——生成内容时，直接应用调色板（例如，通过将 style='rgb(...)' 设置为新元素）。但是当调色板更新时，只有新内容使用新调色板。显然 CSS 变量解决了这个问题。

我已经将 CSS 变量用于其他功能，并且逻辑有效。大致而言，html 看起来像：

<html>
<head>
  <style>
    :root {
      --my-var: ...default value...;
      --some-other-var: ...;
    }
  </style>
</head>
</html>

使用相应的运行时 JS 代码，如：

document.documentElement.style.setProperty('--my-var', 'new-value');

当它运行时，它会更新<html>元素，所以它现在看起来像：

<html style="--my-var:new-value">
...same code as above...

如果我添加大约 300 个新变量，则该<html>节点在 DOM 检查器中是不可读的，并且会伤害我的敏感度。问题是，如何在不影响性能的情况下最好地管理这种情况（假设将 ~300 个变量附加到 html 节点还没有降低性能）？

我可以创建一个专用<style>标签并生成文本内容以获取:root {...}代码，但是对于浏览器来说，这样做的开销似乎要高得多——它必须从头开始重新解析所有内容并重新计算所有样式。即使只有一个 sep<style>节点也可能比填充更可取，<html>所以我可以有一个“调色板节点”来管理噪音，但是在样式元素上设置属性（似乎）不起作用——属性被设置，但是没有效果。

我只是 SOL 吗？我对“只使用 XXX 框架，所有你会得到治愈的疾病”不感兴趣，除非这些框架用于说明底层 CSS/JS 行为，因为它们不会在 DOM 节点上大便。

4

0 回答 0