Question

让我们说我需要应用一堆css规则（大约50个），如下面的代码：

 var s = document.createElement('style');
     s.type = 'text/css';
     s = document.getElementsByTagName('head').item(0).appendChild(s);

 var cssRules = [
      ".someClass1 {text-align: center; color: red;}",
      ".someClass2 {border: 1px solid black;}",
      ".someClass3 {color: green;}",
      ".someClass4 {text-decoration: underline; color: red;}",
      ...
 ];

 if (s.sheet && s.sheet.insertRule) {
     for (var i = 0, len = cssRules.length; i<len; i++) {
         s.sheet.insertRule(cssRules[i], s.sheet.cssRules.length);
     }         
 }

因此s.sheet.insertRule的每次调用都会触发浏览器重排。我怎样才能将浏览器重排最小化到一次？

感谢。

Answer 1

您可以将join所有规则整理成一个字符串：

// Join rules and use a space as delimiter
var cssRulesAppended = cssRules.join(' ')

您还可以通过添加style标记直接将CSS写入您的头脑中，完全跳过insertRule方法：

var head = document.head || document.getElementsByTagName('head')[0],
    styleTag = document.createElement('style')

styleTag.type = 'text/css'

if (styleTag.styleSheet) {
    styleTag.styleSheet.cssText = cssRulesAppended
} else {
    styleTag.appendChild(document.createTextNode(cssRulesAppended))
}

head.appendChild(styleTag)

修改
如果您已经知道要添加的规则，我强烈建议不要按照您现在的方式插入它们。将它们放入样式表以在页面加载开始时使用，或者，如果您知道需要特定样式的元素，则使用JavaScript的样式属性。这是一个JSPerf：link。

如何添加多个css规则以最大限度地减少浏览器重排？

1 个答案: