JavaScript创建的内联样式和JavaScript创建的样式表之间的性能差异
我想动态地设置DOM中给定选择器的所有元素的样式。我大致有两种看法。对于下面的示例，我将使用JavaScript创建的内联样式和JavaScript创建的样式表之间的性能差异,javascript,css,performance,dom,Javascript,Css,Performance,Dom,我想动态地设置DOM中给定选择器的所有元素的样式。我大致有两种看法。对于下面的示例，我将使用p元素，它是文本对齐属性，但我更感兴趣的是这两种方法的优缺点，而不是具体的文本对齐段落 1.内联（每个元素）样式 2.样式表 var表=（函数（）{ //创建标记 var style=document.createElement（“样式”）； //网络工具包黑客：( style.appendChild（document.createTextNode（“”）； //将元素添加到页面中 document.he
p文本对齐var表=（函数（）{
//创建标记
var style=document.createElement（“样式”）；
//网络工具包黑客：(
style.appendChild（document.createTextNode（“”）；
//将元素添加到页面中
document.head.appendChild（样式）；
返回样式表；
})();
insertRule（“p{text align:center；}”）；
样式元素可能比修改一个未知数量更有效关于p
元素。但这只是我的假设
就性能而言，是否会出现将内联样式应用于每个元素比创建样式表更好的情况？假设答案可能取决于我正在设置样式的元素数量，那么在某一点上创建样式表是否会更有效
编辑：为了澄清我为什么要问这个问题，我将解释一下我为什么要问：我最近把一些我经常在项目之间复制粘贴和改编的JS黑客变成了一组可重用的CommonJS模块。它们可以将给定选择器的所有元素设置为与se中最高或最宽的相同高度或宽度在最高或最宽的度量值可能会在窗口调整大小或其他触发器上发生更改的情况下
以下是一篇关于它的博文：
以下是模块的GitHub回购协议：
目前，所有这些模块都使用内联样式，但我正在考虑将它们切换到样式表。我找不到任何一种方法的优缺点的好答案，所以我将问题发布在这里。内联样式的优缺点
自从React和JSX获得了巨大的人气以来，在过去的几年里，关于这个问题有很多争论
我已经尝试了一些解决方案，所以我将在这里列出它们。首先是一般性讨论
CSS基本上是唯一提倡使用全局名称空间的语言，这也是人们不再使用直接的CSS和繁重的总体框架的第一个原因。使用flexbox，响应性布局可以在几行代码中完成，而不是像使用bootstrap这样的整个网格系统
CSS解决了以可重用的方式为文档提供样式的问题，但随着应用程序变得越来越庞大和复杂，越来越多的第三方库包含了自己的CSS，全局名称空间冲突的机会几乎不可避免。因此，一些不同的模式被创作和提倡，如BEM和斯马科斯
react的出现使得管理和创建可重用的内联样式变得相对简单。您可以使用所有javascript，这意味着您可以使用.extend
或Object.assign
之类的内容覆盖样式。这使得共享包含组件及其样式的模块和包变得容易，并且d不需要任何类型的样式加载器的好处，例如使用网页时所需的样式加载器。不过，这并不完全是好事。：hover
、其他psuedo选择器和媒体查询在纯内联样式中不受支持
为了克服这些限制，开发人员实现了触发样式更改的事件，例如用于悬停的onmouseover
，以及用于媒体查询的挂钩窗口调整事件大小。不久之后，创建了一个库来标准化这些js事件，并定义一个类似CSS的API，该库被称为Radium
他说，镭也不公平（相信我，我试过了）。在大型应用程序中，在所有JS下载之前，媒体查询都无法执行，我不推荐这样做
这导致了一些采用不同方法的新工具的创建。这些新一代工具使用JS中定义的样式，但生成CSS。这给了您内联样式的全部功能和CSS的全部功能。这两个方面都是最好的。哪一个库最好可能取决于您的用例，但它们包括Fela.JS、Aphrodite、，和JSS
我最喜欢的解决方案是Fela.js。请访问Fela.js.org。Fela可能是您将获得的最佳性能，并且它不特定于任何特定的框架。也就是说，它与React和React Native配合使用效果很好。它有一些简洁的功能，例如允许您从样式中访问道具。您可以设置渲染er
在页面的开头。Fela与SSR配合使用效果最好，但也可以根据您的需要纯客户端工作。与SSR配合使用时，您可以获得极快的页面加载，因为Fela优化了您写入原子css类的样式，并在初始请求时将其发送回客户端
如果你想获得尽可能快的页面，那么这些工具会让你大吃一惊。你可以很容易地完成一些困难的模式，比如关键路径css优化，其中必要的样式作为初始HTTP请求的一部分返回，而不是指向也必须下载的外部工作表的链接
最后，我必须提到CSS模块。这些模块确实创建了一个外部样式表，但允许每个模块仍具有名称空间的CSS。这允许您编写真正的CSS o
var nodes = document.getElementsByTagName('p');
Array.prototype.forEach.call (nodes, function (node) {
node.style.textAlign = "center";
});
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; }");
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="add-stylesheet">Stylesheet</button>
<button id="add-inline-styles">Inline</button>
<script type="text/javascript">
let stylesheet = document.getElementById('add-stylesheet');
let inline = document.getElementById('add-inline-styles');
stylesheet.addEventListener('click', addStylesheet);
inline.addEventListener('click', addInlineStyles);
function addStylesheet() {
let style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
style.sheet.insertRule('p { text-align: center }', 0);
}
function addInlineStyles() {
let nodes = document.getElementsByTagName('p');
for (let node of nodes) {
node.style.textAlign = 'center';
}
}
// initialize <p> elements
init(10000);
function init(numElements) {
for (let i = 0; i < numElements; ++i) {
let p = document.createElement('p');
p.innerText = 'testing'
document.body.appendChild(p);
}
}
</script>
</html>