2

假设我需要应用一堆 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触发浏览器重排。如何将浏览器重排减至一次？

谢谢。

4

1 回答 1

2

您可以将join所有规则合并为一个字符串：

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

您也可以通过添加标签直接将 CSS 写入您的头部style，完全跳过该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:链接。

于 2014-07-05T10:26:03.440 回答