关于在动态创建的元素中添加预先样式化的类或在那里添加stying&然后

Opinion on adding pre-styled class to a dynamically created element or adding stying there & then

本文关键字：添加然后在那里 stying amp 动态创建元素样式更新时间：2023-09-26

在我们的web应用程序中，有很多效果。我们正在切换到动态创建尽可能多的元素，请阅读：当需要时，尽可能多。

我很好奇我喜欢在元素上使用的这种技术，也就是说，在样式表中创建一个具有css样式的类，然后当使用js创建元素时，我只需将该类添加到元素中，使其具有css文件中的样式。

这真的是最好的方法吗？或者用javascript（element.style=*）进行样式设置会更好吗？

注意，在我们的情况下，内存是非常重要的，所以无论哪一个使用较少的内存&渲染负载会更好。

这取决于具体情况。如果你有一个元素的集合样式，你只需要打开和关闭它，那么添加/删除一个类就是最好的方法。但是，如果您一直在更改样式（即在动画中），则修改样式会更好。就内存而言，添加/删除类可能会提高内存效率。

将其放在一个单独的样式表中通常被认为是可维护性、内容与逻辑分离等方面的最佳实践。

但是内存使用和渲染时间可能是另一回事，您特别提到这对您来说非常重要。

您可以使用大多数现代浏览器中内置的web开发工具（例如Chrome开发工具）来尝试这两种方法，并对内存和渲染时间进行评测。在Chrome开发工具中，选择时间线，点击底部的记录按钮，加载页面，在页面上做一些与您相关的事情，停止录制，然后检查内存使用情况和加载时间。

如果你关心的是动画，你可能想安装Chrome Canary，它在Timelines下有第三个选项（除了Timelines和Memory），类似于Frames。