В JavaScript мы можем создать элемент динамически и добавить к раздел, чтобы применить правило CSS для огромного количества элементов.

Каковы преимущества или недостатки этого подхода?

Если это действительно дает выигрыш в производительности по сравнению с итерацией JavaScript по элементам. Что скрывается за сценой (внутри браузера)?

Какой из них быстрее или медленнее? Javascript итерация по элементам или динамическое добавление CSS в браузере?

Как насчет времени обработки? загрузка процессора?

Для лучшего понимания вопроса, где я использовал этот подход, смотрите следующий пример:

Пример: Если у меня есть таблица с 20 или более столбцами и 1000 строк или более, как в следующем HTML:

    
        
            Id
            Name
            Family Name
            SSN
            //Other table data
        
    
    
        
            1
            Nick
            Jackson
            123456
            //Other table data
        
        //Other rows
        
            809
            Helga
            Jhonson
            125648
            //Other table data
        
        //Other rows
        
            1001
            Nick
            Jhonson
            216458
            //Other table data
        
        //Other rows
    

Если кому-то нужен пример jsFiddle, я могу создать его позже.

Случай 1: Если я хочу, чтобы динамически скрыть только столбец таблицы, которые содержат данные SSN. Я могу применить несколько подходов, чтобы сделать это. Этот подход можно разделить на две основные категории. Врешения первой категории Я могу перебратьtd элементы и динамически изменить стиль для столбца. Ввторой подход Я могу применить CSS путем динамического создания или использования предопределенных правил CSS, как указаноВот от@ Фриц ван Кампен, (Замечания: @ Фриц ван Кампен хорошее решение для данного случая. Но я хочу обсудить больше, чем манипулирование отображением и скрытием строк таблицы.)

Я могу создать динамическое правило CSS следующим образом:

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

Или примените предопределенное правило CSS:

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

Вот примеры jsFiddly:

Вот сравнение времени с использованием метода console.time, который я нашелВот.

Слева - динамический CSS, а справа - итерационный подход.

Возможно, он не подходит, потому что он вычисляет добавляемый элемент стиля против итерации по элементам. Все итерации элемента в динамическом CSS будут выполняться внутренними компонентами браузера. Однако, если мы думаем, что время отклика нашего сценария динамическое, CSS быстрее.Заметка: итерационный подход будет быстрее в чистом JavaScript по сравнению с jQuery. Но насколько быстрее у меня нет результатов. Так что вы можете больше в своих ответах.

Случай 2: Теперь я хочу выделить строку таблицы который содержит пользователя с именемНик', Здесь вы можете заметить, что строка таблицы имеет атрибуты данных, такие как name, family_name, id и т. Д. Итак, здесь я снова могу перебирать элементы, используя javascript или любые другие библиотечные инструменты, или могу применять какое-то динамическое правило (я не знаю, возможно ли это или не применять предопределенные фильтры, как в случае 1.)

Правило CSS:

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

В этом случае я могу сделать очень интересную фильтрацию, применяя правило CSS динамически.

Обновление: пример, приведенный здесь, для простого обзора проблемы. И некоторые оптимизированные итерации могут выполняться одинаково быстро в JavaScript. Однако я рассматриваю только таблицу, в которой отсутствуют дочерние элементы dipper, сравнительно вложенные элементы ul, где обход для выбора элемента может быть затруднен.

Важный: Я приведу здесь только пример таблицы, чтобы прояснить, с какой проблемой я столкнулся, если это не имеет значения, не стесняйтесь редактировать вопрос и удалять эту часть. Также, пожалуйста, четко сформулируйте свои ответы в рамках вопроса. Здесь я не спрашиваю оЯ реализовал хорошо или нет? Я спрашиваю, что является преимуществом или недостатком динамического создания элементов стиля с точки зрения внутренних механизмов браузера.

Постскриптум и пример: Почему я пришел с этой идеей? Я отвечаю недавно заКак скрыть столбцы в очень длинной HTML-таблице? вопрос. В этом вопросе OP задает вопрос о применении правила CSS для определенных столбцов таблицы в длинной таблице. Я предлагаю создать элемент стиля с правилами на лету, и он отлично работает. Я думаю, это потому, что стиль применяется внутренними механизмами браузера и дает лучшую производительность, чем итерация по элементам и применение стиля к каждому элементу.