基本上，假设元素的所有可能内容都是事先已知的，您可以使用一堆 :after 内容样式而不是更改元素的 innerHTML。只需更改类(class)即可获得新内容。
我在 Chrome 中的分析表明这确实提高了一点性能，但我不完全确定，因为成本可能会隐藏在其他地方？而且我不确定这对于 Chrome 之外的其他浏览器是否是个坏主意。对此有什么想法吗？
请注意，此处的上下文是针对每秒 60 帧的模拟/可视化，因此在此上下文中，2 毫秒与 4 毫秒是一个巨大而显着的差异，这可能不是在页面加载的上下文中。
可以在这里看到编号的示例样式:https://github.com/magwo/elevatorsaga/blob/2fa5dc0c0397d0565ce5dcc45c68b19d924a4955/style.css#L290
最佳答案
伪元素是设计元素，它们不是内容，它们不出现在源代码中，它们不存在于DOM，它们不会被搜索引擎抓取，你不能选择或复制它们，当然，它们没有 CSS 是不存在的，它是一个 style-sheet.
它可能更快，但那可能是因为它不满足。也许浏览器更改类比更改元素的内容更容易。
问题是，您要更改内容还是内容的视觉表示？
至于实现，我认为将所有可能的内容加载到 CSS 中并不是一种优化，如果您计划为每个新内容请求一个新的 CSS 文件，同样适用改变。
最后，至少现在，您不能为 伪元素 的内容的各个部分设置样式，您不能添加段落、跨度和其他标记。
关于javascript - JS/DOM 优化 : using :after content styling instead of altering innerHTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29537801/