В JavaScript мы можем создать элемент <style> динамически и добавить в раздел <head>, чтобы применить правило CSS для огромного количества элементов.
-
В чем преимущества или недостатки этого подхода?
-
Если это действительно дает прирост производительности по сравнению с итерацией javascript по элементам. Что происходит за сценой (внутри браузера)?
-
Какой из них быстрее или медленнее? Итерация Javascript по элементам или динамическое добавление css в браузере?
-
Как насчет времени обработки? обрабатывающая нагрузка?
Чтобы лучше понять проблему, в которой я использовал этот подход, см. следующий пример:
Пример: Если у меня есть таблица с 20 или более столбцами и 1000 строк или более, как указано ниже:
<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, как указано здесь @Frits van Campen. ( Примечание: @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:
Вот сравнение времени с помощью метода console.time, который я нашел здесь.
Слева - динамический css, а правый - итерационный.
Возможно, это не подходит, потому что он вычисляет элемент стиля добавления и выполняет итерацию по элементам. Вся итерация по элементу в динамическом CSS будет выполняться внутренними браузерами. Однако, если мы думаем, что наш script ответный динамический css-запрос быстрее. Примечание: итерационный подход будет быстрее в чистом JavaScript по сравнению с jQuery. Но насколько быстрее у меня нет результатов. Таким образом, вы можете больше в своих ответах.
Случай 2: Теперь я хочу выделить строку таблицы <tr>, которая содержит пользователя с именем "Nick". Здесь вы можете заметить, что в строке таблицы есть атрибуты данных, такие как name, family_name, id и т.д. Итак, здесь я снова могу перебирать элементы с помощью javascript или любых других инструментов библиотеки или применять какое-либо динамическое правило (я не знаю, возможно ли это или не применять предопределенные фильтры, как в случае 1.)
Правило CSS:
tr[data-name ~='nick']
{
background-color:red;
}
В этом случае я могу сделать большую забавную фильтрацию, применяя правило CSS динамически.
Обновление: здесь приведен пример для простого обзора проблемы. И некоторые оптимизированные итерации могут работать одинаково быстро в javascript. Тем не менее, я рассматриваю только таблицу, в которой нет дочерних элементов-ковша, относительно вложенных элементов ul, где перемещение для выбора элемента может быть затруднено.
Важно:. Я приводил только пример таблицы, чтобы пояснить, с какими проблемами я столкнулся, если это не имеет значения, не стесняйтесь редактировать вопрос и удалять эту часть. Кроме того, пожалуйста, четко сформулируйте свои ответы в рамках вопроса. Здесь я не спрашиваю: "Я реализовал это в хорошем смысле или нет?" Я задаю вопрос о преимуществах или недостатках динамического создания элементов стиля с точки зрения внутренних механизмов браузера.
P.S. и пример: Почему я пришел с этой идеей? Я недавно отвечаю за "Как скрыть столбцы в очень длинной таблице html. В этом вопросе OP спрашивает о применении правила CSS для определенных столбцов таблицы в длинной таблице. Я предлагаю создать элемент стиля с правилами на лету, и он отлично работает. Я думаю, это связано с тем, что стиль применяется внутренними механизмами браузеров и обеспечивает лучшую производительность, чем повторение элементов и применение стиля к каждому элементу.