JavaScript的：优点和创建样式元素缺点动态（上飞） [英] JavaScript: Advantages and disadvantages of dynamically (on fly) creating style element
问题描述
在JavaScript中，我们可以创建＆LT;风格＆GT;动态元素，并追加到＆LT; HEAD＆GT; 为了节申请CSS规则的元素数量巨大。
In JavaScript we can create <style> element dynamically and append to <head> section in order to apply CSS rule for huge number of elements.
-
什么是这种方法的优点和缺点？
What is advantages or disadvantages of this approach?
如果它真的让性能提升超过要素比较JavaScript的迭代。善有善报幕后（内浏览器）？
If it is really gives performance gain comparing to javascript iteration over elements. What goes behind the scene (inside of browser)?
哪一个是快或慢？ JavaScript的迭代过的元素或浏览器动态地添加CSS？
Which one is faster or slower? Javascript iteration over elements or adding css dynamically in browser?
有关处理时间是什么？处理负荷？
What about processing time? processing load?
为了更好地理解，我采用这种方法的问题，请参见下面的例子：
For better understanding the issue where I used this approach see following example:
示例：：如果我有表20列或多列和1000行以上为下面的HTML：
Example: If I have table with 20 or more columns and 1000 rows or more as following html:
<table border="1" class='no-filter'>
<thead>
<tr>
<th data-title='id'>Id</th>
<th data-title='name'>Name</th>
<th data-title='family_name'>Family Name</th>
<th data-title='ssn'>SSN</th>
//Other table data
</tr>
</thead>
<tbody>
<tr data-id='1' data-name='nick' data-famil_name='jackson' data-ssn='123456'>
<td class="column column1">1</td>
<td class="column column2">Nick</td>
<td class="column column3">Jackson</td>
<td class="column column4">123456</td>
//Other table data
</tr>
//Other rows
<tr data-id='809' data-name='helga' data-famil_name='jhonson' data-ssn='125648'>
<td class="column column1">809</td>
<td class="column column2">Helga</td>
<td class="column column3">Jhonson</td>
<td class="column column4">125648</td>
//Other table data
</tr>
//Other rows
<tr data-id='1001' data-name='nick' data-famil_name='jhonson' data-ssn='216458'>
<td class="column column1">1001</td>
<td class="column column2">Nick</td>
<td class="column column3">Jhonson</td>
<td class="column column4">216458</td>
//Other table data
</tr>
//Other rows
</tbody>
</table>
如果有人需要的jsfiddle例如，我以后可以创建一个。
If somebody needs jsFiddle example I can create one later.
案例1：如果我想动态隐藏包含SSN数据仅供表列。我可以申请几个方法来做到这一点。这种方法可以分为两大类。在第一类解决方案我可以遍历 D 元素和动态改变风格的列。在第二种方法给出我可以通过动态创建oneor使用predefined CSS规则CSS <一个href=\"http://stackoverflow.com/questions/20984618/how-to-hide-columns-in-very-long-html-table/20986014#20986014\">here由 @Frits面包车坎彭。 （注意： @Frits面包车坎彭是对于给定的情况下，很好的解决方案但我想进一步讨论，然后操纵表行显示和隐藏。）
Case 1: If i want to dynamically hide only table column which contain SSN data. I can apply several approach to do this. This approach can be divided into two major category. In first category solutions I can iterate over td elements and dynamically change the style for the column. In second approach I can apply CSS by dynamically creating oneor use predefined CSS rules as given here by @Frits van Campen. (Note: @Frits van Campen is good solution for given case. But I want to discuss further more then manipulating table row showing and hiding.)
我可以创建动态CSS规则如下：
I can create dynamic CSS rule as following:
td:nth-child(3)
{
display:none;
}
或者使用predefined CSS规则：
Or apply predefined CSS rule:
table.no-filter td.column3
{
display:block;
}
table.filter3 td.column3
{
display: none;
}
下面是jsFiddly例子：
Here are jsFiddly examples:
- Iteration
- CSS on fly
下面是使用console.time方法，我发现<时间比较href=\"http://stackoverflow.com/questions/16759647/browser-console-and-calculating-multiple-javascript-execution-time-differences\">here.
Here is time comparison using console.time method which I found here.
左是动态的CSS和右边是迭代的方法。
Left is dynamic css and right is iteration approach.
也许，这是不恰当的，因为它计算追加式元件VS迭代以上的元素。动态CSS所有迭代结束的元素会被浏览器内部来完成。但是，如果我们认为我们的脚本响应时间动态CSS更快。 注意：迭代方法将快于纯JavaScript比较jQuery的。但是，如何更快我没有结果。所以，你可以更答案。
Perhaps, it is not appropriate one because it calculates appending style element vs iterating over elements. All iteration over element in dynamic CSS will be done by browsers internals. However if we think our script response time dynamic css is faster. Note: iteration approach will be faster in pure JavaScript comparing to jQuery. But how much faster i do not have results. So you can more in your answers.
案例2：现在，我想强调的表行＆LT; TR＆GT; ，其中包含一个名为尼克的用户。在这里，你可以注意到，表行有数据属性，如姓名，FAMILY_NAME，身份证等。所以，在这里我再次可以通过使用JavaScript或任何其他库工具元素循环，也可以涂抹一些动态规则（我不知道是否有可能或不适用predefined过滤器作为的情况下，1）
Case 2: Now, I want to highlight table row <tr> which contains user with name 'Nick'. Here you can note that table row has data attributes like name, family_name, id and etc. So, here again I can iterate over elements using javascript or any other library tools or can apply some dynamic rule (I do not know whether it is possible or not apply predefined filters as in case 1.)
CSS规则：
tr[data-name ~='nick']
{
background-color:red;
}
在这种情况下，我可以动态地应用CSS规则做了很多有趣的筛选。
In this case I can do a lot of fun filtering by applying CSS rule dynamically.
更新：这里给出的例子是对这个问题的简单概述。而一些优化迭代可以在JavaScript同样快执行。不过，我只考虑它不具有瓢子元素相对嵌套UL元素，其中，以选择元素可能很难遍历表。
Update: Example given here is for simple overview of the problem. And some optimized iterations can perform equally fast in javascript. However I consider only table which does not have dipper child elements comparatively nested ul elements where traversing in order to select element can be difficult.
重要：我只给TABEL例如这里做出澄清什么样的问题，我面对，如果它是自由编辑的问题，并删除这部分无关紧要的感觉。也请有问题的范围内清楚地说明你的答案。在这里，我不是问'难道我的好办法实施或不呢？我问什么是优势或动态创建样式元素的缺点在浏览器内部机制方面。
Important: I only give tabel example here to make clarification with what kind of issue I faced if it is irrelevant feel free to edit the question and delete this part. Also please state your answers clearly in scope of question. Here I am not asking about 'Did I implemented in good way or not?' I am asking what is of advantages or disadvantages of dynamically creating style elements has in terms of browser internal mechanisms.
P.S。而例如：为什么我带着这个想法？最近我回答'如何隐藏在很长的HTML表中的列'的问题。在这个问题上OP询问在长表应用CSS规则对某些表列。我建议创建飞规则样式元素，它工作正常。我想这是因为浏览器内部机制应用，提供了比通过迭代元素和应用样式每个项目更好的表现风格。
P.S. and example: Why I came with this idea? I answer recently for 'How to hide columns in very long html table' question. In this question OP asks about applying CSS rule for certain table columns in long table. I suggest to create style element with rules on fly and it works fine. I think this is because style applied by browsers internal mechanisms and gives better performance than iterating through elements and applying style to each item.
推荐答案
动态生成CSS是坏。不这样做。
这是通过生成动态CSS有效的解决方案可以转化为不需要动态CSS的解决方案。
A solution that works by generating dynamic CSS can converted to a solution that doesn't require dynamic CSS.
如果你需要一个例子，看到我的答案在这里： jQuery来更新实际CSS
If you need an example, see my answer here: jQuery to update actual CSS
要直接左右你链接的情况下作出回应：
To respond directly about the case you linked:
这似乎是一个很奇怪的用例给我。有一个表，1000行的页已经是一个糟糕的起始位置。你不能合理地适合您的屏幕1000行，并期望任何一种有用的互动。 CSS是不是这里的问题。如果表是越小性能问题消失。
This seems like a very strange use-case to me. A page that has a table with 1000 rows is already a bad starting position. You can't reasonably fit 1000 rows on your screen and expect any kind of useful interaction. CSS is not the problem here. If the table were smaller the performance concerns disappear.
有可能是其他方法比在OP建议。你并不需要（动态）一类添加到每个单元格，可以把班上有上一代的时间，如：
There are possibly other approaches than the on OP suggests. You don't need to (dynamically) add a class to each cell, you can put the class there on generation time, like:
<table class="no-filter">
...
<td class="filter1 filter2"></td>
...
</table>
然后有类似：
table.filter1 td.filter2 { display: none; }
table.filter2 td.filter1 { display: none; }
您只更改桌子上的类地说适用的过滤器。
You only change the class on the table to say which filter applies.
CSS不仅仅是一个锤子越多，它的非常精致，非常强大的工具，整个工具集。确保你使用正确的。
CSS is more than just a hammer, it's a whole tool-set of very refined and very powerful tools. Make sure you use the right ones.
有静态的CSS应该是不言明显的优点：
The advantages of having static CSS should be self-apparent:
- 更容易理解，测试，调试和维护。
- 的CSS实际上是在CSS（在JavaScript）。
- 您可以做模板，也许添加一些视觉回归测试。
也有一些性能问题。我可以看到浏览器厂商反对优化CSS动态。我的意思是，如果有静态CSS的优化，减少动态CSS的表现你就可能做出这种权衡。
There are also some performance concerns. I can see browser vendors optimizing AGAINST dynamic CSS. By this I mean if there is an optimization for static CSS that reduces performance of dynamic CSS you just might make this tradeoff.
这篇关于JavaScript的：优点和创建样式元素缺点动态（上飞）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
