Diseño y renderización a 60 fps
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Si alcanzas los 60 fps en tus proyectos, se correlaciona de forma directa con la participación de los usuarios y es esencial para su éxito. En esta charla, Nat y Tom hablaron sobre la canalización de procesamiento de Chrome, algunas causas comunes de la disminución de fotogramas y cómo evitarlos.
Diapositivas
- Un fotograma tiene una duración de 16 ms. Contiene JavaScript, cálculos de estilo, pintura y composición.
- Pintar es extremadamente costoso. Una tormenta de pintura es el lugar donde se repite innecesariamente el trabajo de pintura costoso.
- Las capas se utilizan para almacenar en caché elementos pintados.
- Los controladores de entrada (objetos de escucha y receptores de la rueda del mouse) pueden eliminar la capacidad de respuesta; evítalos si puedes. En los casos en que no pueda minimizarlas,
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2025-07-25 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 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"]]
