Layout e rendering a 60 f/s
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Raggiungere 60 f/s nei tuoi progetti è direttamente correlato al coinvolgimento degli utenti ed è fondamentale per il suo successo. In questa discussione Nat e Tom hanno parlato della pipeline di rendering di Chrome, nonché di alcune cause comuni della perdita di frame e di come evitarli.
Presentazioni
- Un frame ha una durata di 16 ms. Contiene JavaScript, calcoli di stile, pittura e composizione.
- La pittura è estremamente costosa. Una tempesta di vernice è il punto in cui ripeti inutilmente i lavori di pittura.
- I livelli vengono utilizzati per memorizzare nella cache gli elementi dipinti.
- I gestori di input (ascoltatori touch e rotelline) possono impedire la reattività; evitali se puoi. Dove non è possibile mantenerli al minimo.
Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0, mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0. Per ulteriori dettagli, consulta le norme del sito di Google Developers. Java è un marchio registrato di Oracle e/o delle sue consociate.
Ultimo aggiornamento 2025-07-25 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-07-25 UTC."],[],["Maintaining 60fps is vital for user engagement. The rendering pipeline involves JavaScript, styling, painting, and compositing within a 16ms frame. Painting is resource-intensive, particularly in \"Paint Storms,\" where it's repeatedly done unnecessarily. Layers cache painted elements to reduce this burden. Input handlers, such as touch and mousewheel listeners, can significantly impact responsiveness; thus, their usage should be minimized.\n"]]
