JavaScript: Zalety i wady dynamicznego (w locie) tworzenia elementu stylu

Question

Jan 08, 2014, 02:38 AM

javascript css jquery dynamic-css browser

JavaScript: Zalety i wady dynamicznego (w locie) tworzenia elementu stylu

W JavaScript możemy tworzyć<style> element dynamicznie i dołącz do<head> sekcja w celu zastosowania reguły CSS dla ogromnej liczby elementów.

Jakie są zalety lub wady tego podejścia?

Jeśli tak, to naprawdę zwiększa wydajność w porównaniu z iteracją javascript nad elementami. Co kryje się za sceną (wewnątrz przeglądarki)?

Który jest szybszy lub wolniejszy? Iteracja JavaScript nad elementami lub dynamiczne dodawanie css w przeglądarce?

Co z czasem przetwarzania? obciążenie przetwarzania?

Aby lepiej zrozumieć problem, w którym zastosowałem to podejście, zobacz następujący przykład:

Przykład: Jeśli mam tabelę z 20 lub więcej kolumnami i 1000 wierszy lub więcej, jak w poniższym 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>

Jeśli ktoś potrzebuje przykładu jsFiddle, mogę go utworzyć później.

Przypadek 1: Jeśli chcę dynamicznie ukryć tylko kolumnę tabeli, która zawiera dane SSN. W tym celu mogę zastosować kilka metod. To podejście można podzielić na dwie główne kategorie. Wrozwiązania pierwszej kategorii Mogę się powtórzyćtd elementy i dynamicznie zmieniaj styl kolumny. Wdrugie podejście Mogę zastosować CSS, dynamicznie tworząc jeden lub używając wcześniej zdefiniowanych reguł CSStutaj przez@ Frits van Campen. (Uwaga: @ Frits van Campen jest dobrym rozwiązaniem dla danego przypadku. Ale chcę omówić więcej więcej niż manipulowanie pokazywaniem i ukrywaniem wierszy tabeli).

Mogę utworzyć dynamiczną regułę CSS w następujący sposób:

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

Lub zastosuj predefiniowaną regułę CSS:

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

Oto przykłady jsFiddly:

Iteracja CSS w locie

Oto porównanie czasu za pomocą metody console.time, którą znalazłemtutaj.

Lewy to dynamiczny css, a prawy to podejście iteracyjne.

Być może nie jest to odpowiednie rozwiązanie, ponieważ oblicza on dołączający element stylu vs iterując po elementach. Cała iteracja elementu w dynamicznym CSS będzie wykonywana przez wewnętrzne elementy przeglądarki. Jeśli jednak sądzimy, że dynamiczny czas odpowiedzi skryptu jest szybszy.Uwaga: podejście iteracyjne będzie szybsze w czystym JavaScript w porównaniu z jQuery. Ale o ile szybciej nie mam wyników. Więc możesz więcej w swoich odpowiedziach.

Przypadek 2: Teraz chcę podświetlić wiersz tabeli<tr> który zawiera użytkownika o nazwie „Nick”. W tym miejscu można zauważyć, że wiersz tabeli ma atrybuty danych, takie jak nazwa, nazwa_grupy, identyfikator itd. Tak więc tutaj mogę powtórzyć elementy za pomocą javascript lub innych narzędzi bibliotecznych lub zastosować dynamiczną regułę (nie wiem, czy jest to możliwe lub nie stosuj wstępnie zdefiniowanych filtrów, jak w przypadku 1.)

Reguła CSS:

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

W tym przypadku mogę zrobić dużo fajnego filtrowania, stosując dynamicznie regułę CSS.

Aktualizacja: podany przykład służy do prostego przeglądu problemu. Niektóre zoptymalizowane iteracje mogą działać równie szybko w javascript. Uważam jednak, że tylko tabela, która nie ma elementów potomnych czerpaka, stosunkowo zagnieżdżonych elementów ul, w których przechodzenie w celu wybrania elementu może być trudne.

Ważny: Podaję tylko przykład tabeli, aby wyjaśnić, z jakim problemem mam do czynienia, jeśli nie ma sensu edytować pytania i usunąć tę część. Proszę również podać swoje odpowiedzi wyraźnie w zakresie pytania. Tutaj nie pytam o „Czy wdrożyłem się w dobry czy nie?” Pytam, jakie są zalety lub wady dynamicznego tworzenia elementów stylu pod względem wewnętrznych mechanizmów przeglądarki.

P.S. i przykład: Dlaczego przyszedłem z tym pomysłem? Odpowiadam ostatnio za 'Jak ukryć kolumny w bardzo długiej tabeli htmlpytanie. W tym pytaniu OP pyta o zastosowanie reguły CSS dla niektórych kolumn tabeli w długiej tabeli. Proponuję stworzyć element stylu z regułami w locie i działa dobrze. Myślę, że dzieje się tak, ponieważ styl stosowany przez wewnętrzne mechanizmy przeglądarek i zapewnia lepszą wydajność niż iterowanie elementów i stosowanie stylu do każdego elementu.