Rilevamento di hardware lento/browser lenti con JavaScript

Question

Il mio sito Web ha diverse animazioni CSS e transizioni, che rendono molto, molto lentamente in alcuni browser (fortunatamente, non molti di loro), e con un hardware più datato. Sto cercando di evitare UA sniffing; esiste un modo per rilevare i browser o le configurazioni hardware utilizzando un JavaScript o una libreria JS e successivamente caricare versioni non animate per i browser che so non hanno un buon supporto per quelle funzionalità?

Solo per chiarire ogni ambiguità, non sto cercando qualcosa come Modernizr.

Answer 1

Questo non è affatto sufficiente per rilevare un sistema lento, ma sarebbe minimizzare l'impatto sugli utenti di tali sistemi:

Use CSS transitions e innescare con jQuery (commutando classi se necessario), elemento scarico animazioni al motore di rendering in modo che la reattività funzionale della pagina non ne risentirebbe almeno.

Utilizzare corretto Proprietà CSS. Ad esempio, anziché animare le proprietà top:10px;left:10px;, utilizzare transform: translateX(10px) translateY(10px) che sarà più efficiente.

Accelerazione dell'hardware di trigger (GPU) aggiungendo transform: translate3d(0,0,0); o una soluzione alternativa simile all'elemento di destinazione.

Se stai assolutamente attaccati alle animazioni, o hai bisogno di attivare funzionalità di fallback (nascondi/mostra/riposizionare elementi) senza i CSS per qualche motivo, you could try a Modernizr workaround:

if(!Modernizr.csstransitions) { 
    /*fallback logic*/ 
}