问JavaScript创建的内联样式与JavaScript创建的样式表之间的性能差异

EN

我想在DOM中动态设置给定选择器的所有元素的样式。我或多或少看到了两种方式。对于下面的示例，我将使用p元素和它的text-align属性，但我更感兴趣的是这两种可能方法的优缺点，而不是专门对齐文本的段落。

1.内联(每元素)样式

var nodes = document.getElementsByTagName('p');
Array.prototype.forEach.call (nodes, function (node) {
     node.style.textAlign = "center";
});

2.样式表

var sheet = (function() {
  // Create the <style> tag
  var style = document.createElement("style");

  // WebKit hack :(
  style.appendChild(document.createTextNode(""));

  // Add the <style> element to the page
  document.head.appendChild(style);

  return style.sheet;
})();

sheet.insertRule("p { text-align: center; }");

通常我会走内联样式的路线，因为它看起来更简单，而且它确保样式更改将覆盖现有的样式表。但我发现其中一个原因:有时不重写样式表可能更好；另一个原因是:修改一个style元素可能比修改数量未知的p元素性能更好。但这只是我的假设。

在性能方面，是否会出现将内联样式应用于每个单独的元素比创建样式表更好的情况？假设答案可能取决于我设计了多少元素，那么在某一时刻创建样式表会变得更高效吗？

编辑:为了澄清我为什么要问这个问题，我将解释一下为什么我要问这个问题:我最近将一些我经常在项目之间复制粘贴和调整的JS hack变成了一组可重用的CommonJS模块。在窗口调整大小或其他触发器上最高或最宽的度量可能会发生变化的情况下，它们会将给定选择器的所有元素设置为与集合中的最高或最宽元素相同的高度或宽度。

这里有一篇关于它的博客文章：http://davejtoews.com/blog/post/javascript-layout-hacks

以下是模块的GitHub代码库：

• Same Height
• Same Width
• Align to Sides
• Layout Queue

在这一点上，所有这些模块都使用内联样式，但我正在考虑将它们转换为样式表。关于这两种方法的优缺点，我都找不到一个好的答案，所以我在这里贴出了这个问题。