JavaScript：动态(飞行)创建样式元素的优点和缺点

>这种方法有哪些优点或缺点？
>如果真的比元素上的JavaScript迭代更能提供性能提升.幕后(浏览器内)是什么？
哪一个更快或更慢？ Javascript迭代元素或在浏览器中动态添加css？
>处理时间如何？处理负载？

为了更好地理解我使用这种方法的问题,请参见以下示例：

示例：如果我有20个或更多列和1000行或更多列的表如下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示例,我可以稍后再创建一个.

情况1：如果我想动态隐藏包含SSN数据的表列.我可以应用几种方法来做到这一点.这种方法可以分为两大类.在第一类解决方案中,我可以遍历td元素并动态更改列的样式.在第二种方法中,我可以通过动态创建一个或多个使用预定义的CSS规则来应用CSS,如here给出的here(注意：@Frits van Campen是给定情况下的很好的解决方案,但是我想进一步讨论更多的操作表行和隐藏)

我可以创建动态CSS规则如下：

td:nth-child(3)
{
  display:none;
}

或应用预定义的CSS规则：

table.no-filter td.column3
{
   display:block;
}
table.filter3 td.column3 
{ 
   display: none; 
}

这里是jsFiddly的例子：

> Iteration
> CSS on fly

这是使用COnsole.time方法的时间比较,我发现here.

左是动态css,右是迭代方法.

也许,它不合适,因为它计算附加样式元素而不是迭代元素.动态CSS中的元素的所有迭代都将由浏览器内部完成.但是,如果我们认为我们的脚本响应时间动态css更快.注意：与jQuery相比,纯JavaScript的迭代方法会更快.但是,我没有更快的结果.所以你可以更多地在你的答案.

情况2：现在,我想强调表格行< tr>其中包含用户名为“Nick”的用户.在这里,您可以注意到,表行具有名称,family_name,id等数据属性.因此,我再次可以使用javascript或任何其他库工具对元素进行迭代,也可以应用一些动态规则(我不知道是否可能或者不应用预定义的过滤器,如在情况1.)

CSS规则：

tr[data-name ~='nick']
{
    BACkground-color:red;
}

在这种情况下,我可以通过动态应用CSS规则来进行很多有趣的过滤.

更新：此处给出的示例是简单的概述问题.并且一些优化的迭代可以在javascript中执行同样快速.但是我只考虑不具有杓子子元素的表,比较嵌套的ul元素,其中遍历为了选择元素可能是困难的.

重要提示：我只是在这里给出了一个例子,以澄清我所面对的是什么样的问题,如果它是无关紧要的,可以自由地编辑问题并删除这部分.还请您明确说明问题的答案.在这里我不是问“我是否实施好了？我在询问在浏览器内部机制方面动态创建样式元素的优点或缺点是什么.

附：和例子：为什么我来这个想法？我最近回答“How to hide columns in very long html table”的问题.在这个问题中,OP要求在长表中对某些表列应用CSS规则.我建议用飞行规则创建风格元素,它可以正常工作.我认为这是因为浏览器内部机制应用的风格,比通过元素迭代和应用风格给每个项目提供更好的性能.