javascript - 在 JS 中更改类属性 - 更好的性能

Question

我有两个类需要动态更改颜色属性。问题是我写的代码非常非常慢，因为这些类在我的代码中出现了 100 多次。

有什么建议可以提高这段代码的性能吗？

if (mainColor) {
    var elColors = document.querySelectorAll('.color')
    elColors.forEach(el => el.style.color = mainColor)
    var elBgColors = document.querySelectorAll('.bg-color')
    elBgColors.forEach(el => el.style.backgroundColor = mainColor)
}

(主色来自用户输入)

Answer 1

为了高性能，不要为每个设置样式。

只需将一个新类分配给父节点即可。

例如:

以动态方式 - JavaScript:

var styles = document.querySelector('head style#dynamic'),
    sheet;

if (!styles) {
    styles = document.createElement('style');
    styles.id = 'dynamic';
    document.querySelector('head').appendChild(styles);
}

sheet = styles.sheet;
sheet.insertRule("body.mainTheme .color { color: red; }", 0);
sheet.insertRule("body.mainTheme .bg-color { background-color: blue }", 0);

if (!document.body.className.match(/(^|\s)mainTheme(\s|$)/s)) {
    document.body.className = document.body.className + " mainTheme";
}

以静态方式 - JavaScript 部分:

// jQuery: $('body').addClass('mainTheme');
if (!document.body.className.match(/(^|\s)mainTheme(\s|$)/s)) {
    document.body.className = document.body.className + " mainTheme";
}

以静态方式 - CSS 部分:

.mainTheme .color {
    color: red;
}
.mainTheme .bg-color {
    background-color: blue
}