JS/DOM 优化：使用 :after 内容样式而不是更改 innerHTML

Posted 2023-02-22

【中文标题】JS/DOM 优化：使用 :after 内容样式而不是更改 innerHTML

【英文标题】：JS/DOM optimization: using :after content styling instead of altering innerHTML

【发布时间】：2015-06-14 18:39:53

【问题描述】：

基本上，鉴于元素的所有可能内容都是预先知道的，您可以使用一堆 :after 内容样式而不是更改元素的 innerhtml。只需更改课程即可获得新内容。

我在 Chrome 中的分析表明这确实会稍微提高性能，但我不完全确定，因为成本可能会隐藏在其他地方？而且我不确定这对于除 Chrome 之外的其他浏览器是否是个坏主意。对此有什么想法吗？

请注意，此处的上下文是针对每秒 60 帧的模拟/可视化，因此在此上下文中 2 与 4 毫秒是一个很大且显着的差异，它可能不在页面加载的上下文中。

编号样式示例见此处：https://github.com/magwo/elevatorsaga/blob/2fa5dc0c0397d0565ce5dcc45c68b19d924a4955/style.css#L290

【问题讨论】：

我也有兴趣知道。

【参考方案1】：

pseudo-elements是design elements，它们不是内容，它们不会出现在源代码中，它们不存在于DOM中，它们不会被搜索引擎抓取，你无法选择或复制它们，当然，如果没有CSS，它们就不存在，style-sheet。

它可能会更快，但这可能是因为它不满足。而且对于浏览器来说，改变一个类可能比改变一个元素的内容更容易。

问题是，你想改变内容，还是改变它的视觉表现？

至于实现，我认为将所有可能的内容加载到 CSS 并不是一种优化，如果您计划为每个新内容更改请求一个新的 CSS 文件，同样的事情也适用。

最后，至少目前，您不能为pseudo-element 的内容的各个部分设置样式，也不能添加段落、跨度和其他标记。