javascript - 複数の CSS ルールを追加してブラウザのリフローを最小限に抑える方法は?

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ブラウザのリフローがトリガーされます。ブラウザのリフローを 1 回だけに抑えるにはどうすればよいですか?

ありがとう。