Quali tecniche dovrei usare per implementare lo scrolling infinito su un sito web? [chiuso]

4

Attualmente sto lavorando a un sito Web che implementa lo scorrimento infinito sulla sua pagina di ricerca (i risultati stessi provengono dalla ricerca elastica) e, non sorprende, più scorri più lentamente.

Questo è particolarmente importante sui dispositivi mobili, e in particolare sui dispositivi a basso costo (che la maggior parte delle persone usa).

Abbiamo lavorato molto per rendere il sito reattivo sui dispositivi mobili da una prospettiva HTML / CSS, ma inevitabilmente quando aggiungi altri elementi al DOM, le cose rallentano.

Vedo che siti come Twitter e Facebook fanno un buon lavoro per evitare questo problema, ma come? Immagino che sia una qualche forma di garbage collection del DOM, e gli oggetti vengono caricati non solo mentre scorri verso il basso, ma anche verso l'alto, e gli elementi non in vista sono GC'd?

In aggiunta alla complessità, stiamo usando la libreria headroom.js per avere il menu necessario per modificare le opzioni di ricerca sempre disponibili semplicemente scorrendo leggermente verso l'alto, e notiamo che questa azione diventa più lenta e più irregolare mentre scorri verso il basso e avere più risultati di ricerca per scorrere.

Ogni risultato di ricerca consiste non solo di testo, ma anche di un'immagine.

Inoltre, i risultati della ricerca vengono aggiornati senza un ricaricamento della pagina, per questo scopo utilizziamo l'associazione bidirezionale fornita da AngularJS (spingendo i risultati della ricerca dentro e spuntandoli da una matrice che ng-repeat usa per popolare la vista ), ma sospetto che gli utenti di altre librerie (come Ember.js) affrontino lo stesso problema.

Qualcuno può spiegare come dovremmo avvicinarci a questo? Abbiamo l'aspetto di scorrimento infinito (caricamento di più elementi nel DOM mentre scorri) inchiodato, ma su smartphone di fascia bassa, le cose rallentano velocemente quindi indovino un altro aspetto di questo problema che ci è sfuggito.

Suppongo che il trucco sia caricare solo gli elementi nel DOM che l'utente può vedere mantenendo la barra di scorrimento così com'è e rispondere agli eventi di scorrimento per caricare gli elementi che l'utente si aspettava di vedere, ma come faremmo in merito a questo ? Ci sono delle librerie disponibili per questo scopo?

Grazie

    
posta JMK 11.07.2014 - 01:36
fonte

1 risposta

3

Vedi questo: ClusterizeJS

Questo plug-in consente di scorrere un numero enorme di elementi mantenendo DOM basso e piccolo. Rimuove dagli elementi della vista e li sostituisce con elementi fittizi che vengono ridimensionati dinamicamente in modo che il posizionamento dello scorrimento venga mantenuto come previsto.

Facebook non lo fa in questo modo, ma suppongo che questo sia il modo migliore per avere buone prestazioni sui dispositivi lenti.

Una nota aggiuntiva su Angolare

Dovresti anche sapere che le pagine HTML + HTML sono molto più semplici da gestire rispetto al DHTML che esegue javascript aggiuntivi. Angular è particolarmente affamato in questo senso in quanto deve controllare il modello di controllo e la visualizzazione per tenerli sincronizzati ed eseguire qualsiasi codice relativo alle modifiche. Quando il tuo DOM contiene molti binding (dicono che il numero è circa 2000) la tua pagina ne risente. Prova ad utilizzare i binding una tantum implementati in Angular per velocizzare le cose, specialmente se le tue visualizzazioni visualizzano solo i dati senza che gli utenti modifichino il modello.

    
risposta data 27.07.2015 - 14:39
fonte

Leggi altre domande sui tag