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