Cosa sarebbe più efficiente, spostare elementi DOM o clonarli?

Question

Cosa sarebbe più efficiente, spostare elementi DOM o clonarli?

#1 da (0 voti)

0

Ho questo dilemma, devo creare un menu, l'estruttura di base è composta da quattro a sei voci del menu principale e ognuno può avere menu di livello 2 N e ogni sottomenu può anche avere sottotitoli.

Ottengo dal server questo due html come questo:

<ul>
   <li> <a>Normal link</a></li>
   <li> 
       <a> </a>
       <ul> this is other level of menus</ul>
   </li>
</ul>

Il primo elenco che ho appena contiene le voci del menu principale, il secondo tutti i sottolivelli.

Deve essere presentato qualcosa di simile a questo:

Ognivoltachel'utentefaclicsullevocidelmenuprincipale,vengonovisualizzatiglielenchidilivellosecondario,quandosifaclicsuunmenusecondario,illivellosuccessivovienevisualizzatosottoquelloattivo.

Questastrutturadibasenonècosìcomplessa.PrendosoloconJavascripttuttiglielementi"sotto livello N" e ogni 3 voci di menu (in ogni livello) aggiungo un nuovo <li> dove metto tutto contenente i livelli successivi <ul> e mostra / nascondi usando classi e attributi correlati, ad esempio:

<ul>
  <li></li>
  <li class="i-am-for-X></li>
  <li></li>
  <li class="here-are-my-next-level-items">
      <ul></ul>
      <ul class="i-am-x"></ul>
      <ul></ul>
  </li>
  <li></li>
  <li class="here-are-my-other-next-level-items">
</ul>

Il mio problema arriva ora, mi è stato richiesto che la classe del menu avesse un metodo che modificasse il numero di colonne per sottomenu (da utilizzare in alcuni punti di interruzione della vista). Ciò significa che in teoria il mio i-am-x può essere dopo il 3%% di co_de come nel mio esempio precedente poiché potrebbe essere dopo il 4 o il X, quindi ho bisogno dello stesso contenuto in più posti, per quanto posso vedere ne ho solo due opzioni: clonali o spostali.

Se li clono, lo farò dopo che il mio <li> sarà a posto e dopo che la pagina è stata caricata e lascia che il css gestisca lo show e si nasconda con javascript solo per cambiare le classi necessarie.

Se li sposto, devo farlo dopo che la pagina è stata caricata su ogni breakpoint. Penso che questo potrebbe essere più inquietante per l'utente e la reattività.

Non sono sicuro che non visualizzi un'altra opzione e / o più problemi relativi a questa opzione e non sono sicuro di quale abbia prestazioni migliori.

Grazie in anticipo per il tuo contributo!

javascript websites website-performance

posta distante 05.04.2018 - 21:58

fonte

1 risposta

Leggi altre domande sui tag javascript websites website-performance

Repository vs. DAO (di nuovo) WPF DI con DbContext per modulo

score 0 · Answer 1

My problem comes now, I was required that the menu class should had a method that changes the number of cols per sub menus (to be used in some viewport breakpoints). This means theoretically my i-am-x can be after the 3rd <li> as in my above example as it could be after the 4th or the Xth so I need the same content in multiple places.

Conosci queste cose in anticipo:

Il numero di punti di interruzione
Il markup necessario per ogni punto di interruzione
Le regole di stile necessarie per ogni punto di interruzione

Per quanto riguarda le prestazioni, la generazione di CSS diversi per lo stesso markup sarebbe un'opzione. Ad esempio:

$breakpoints: (
  small: 320px,
  medium: 480px,
  large: 960px,
  xlarge: 1200px
);

@mixin bp($name) {
    @if not map-has-key($breakpoints, $name) {
        @warn "Invalid breakpoint '#{$name}'.";
    } @else {
        @if map-get($breakpoints, $name) {
            @media (min-width: map-get($breakpoints, $name)) {
                @content;
            }
        } @else {
            @content;
        }
    }
}

CSS-wise, usa grid-template-columns e content per controllare a livello di codice il numero di colonne e il contenuto rispettivamente.

Riferimenti