Come ottimizzeresti il rendering di 10.000 elementi su una pagina web?

3

Sono uno sviluppatore di siti Web completo, ho iniziato a cercare lavoro da poco da quando non ho esperienza di lavoro per aziende, ma ho già fatto alcuni progetti in passato, dalla progettazione alla distribuzione (per circa 6 anni).

In un colloquio di lavoro, ultimamente mi è stato chiesto che cosa penso sia una domanda strana nel contesto delle domande CSS front-end:

Intervistatore: "Che cosa faresti per ottimizzare le prestazioni di rendering di molti elementi sulla pagina?"

Io: "Non penso di seguirlo, ottimizzando cosa esattamente? cosa intendi con" rendering "?"

Intervistatore: "Diciamo che hai ottenuto 10.000 risultati di ricerca dal back-end, come puoi ottimizzare le prestazioni di renderli nella pagina"

Me: "Scusa ancora, ma non capisco la domanda, Nel front-end, se devi renderli tutti, non conosco un modo per" ottimizzare "il rendering. Stiamo parlando di CSS qui? O JS? Ajax? "

Intervistatore: "... Qualunque cosa tu ritenga opportuno risolvere il problema ..."

Io: "Be ', essendo onesto, non vorrei inviare 10.000 risultati di ricerca in primo luogo e, se dovessi, mostrerei solo una manciata di loro all'utente in un momento potrebbero utilizzare segnaposto (in seguito chiarito che intendevo elenchi virtuali) per gli elementi di caricamento, ma non vedo una soluzione se si desidera visualizzarli tutti contemporaneamente ... "

Gli intervistatori mi sembravano sbagliati ...

Mi sono perso qualcosa? Ho anche cercato nel web una risposta ma non ho trovato nulla, e ad essere onesti, mi sento sicuro della mia conoscenza (specificamente) front-end ... Ma quella domanda mi ha fatto pensare che forse mi mancava qualcosa sul campo.

Modifica: Giusto per chiarire, non mi interessa in particolare se quella era la risposta voluta dall'intervistatore, voglio sapere se c'è un modo che non conosco per ottimizzare il rendering di quella quantità di elementi diversi dagli esempi che ho dato.

    
posta Samuel E. 07.06.2017 - 13:29
fonte

2 risposte

3

Credo che quello che stai cercando sia Caricamento pigro . Potrebbe essere o non essere ciò che intendevi per elenco "virtuale", ma nei miei anni di esperienza, questo è il modo ottimizzato per il rendering di 10.000 elementi nel DOM.

Ecco un altro approfondimento. Prima di tutto, non vuoi caricare 10.000 elementi nel DOM, causerà troppo stress al browser e renderà la pagina web estremamente insensibile. Si desidera solo visualizzare ciò che è necessario per l'utente, dopotutto il front-end è centrato sull'utente. Detto questo, non c'è niente di sbagliato nel quering di 10.000 elementi perché è possibile memorizzarlo nel front-end per ridurre le chiamate API in un secondo momento.

Nel front-end c'è una differenza tra Visibility e Display . Visibility eseguirà ancora il rendering dell'elemento nel DOM, ma lo nasconderà all'utente, mentre Display non lo farà. Da una prospettiva di ottimizzazione, display: none; è più efficiente di visibility: hidden; Ma in nessun caso dovresti usare selettori di elementi per alternare stati di visualizzazione degli elementi. Il ciclo di 10.000 elementi e il loro stato di commutazione suonano efficienti ?

In conclusione, credo che le best practice continuino a caricare solo ciò che l'utente vede, sia che si tratti di 1 articolo, 5 elementi o 10 elementi. Carica dinamicamente la lista come sottoinsieme dei 10.000 per ridurre il numero di elementi nel DOM.

    
risposta data 07.06.2017 - 15:31
fonte
1

È impossibile per noi sapere quale risposta si aspettavano gli intervistatori.

Ma se si trattava di una situazione reale, l'unica risposta corretta è "Dov'è il collo di bottiglia?". Se si verifica un problema di prestazioni, è necessario utilizzare la profilatura per determinare dove si trova il problema, poiché potrebbe trovarsi in qualsiasi punto dello stack.

    
risposta data 07.06.2017 - 17:36
fonte

Leggi altre domande sui tag