60 QPS de layout e renderização
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Atingir 60 fps nos seus projetos se correlaciona diretamente com o engajamento do usuário e é crucial para o sucesso. Nesta palestra, Nat e Tom falaram sobre o pipeline de renderização do Chrome, algumas causas comuns para a queda de frames e como evitá-los.
Apresentações
- Um frame tem 16 ms. Ele contém JavaScript, cálculos de estilo, pintura e composição.
- A pintura é extremamente cara. Em uma Tempestade de tinta, é necessário repetir o trabalho de pintura desnecessariamente.
- As camadas são usadas para armazenar em cache elementos pintados.
- Os gerenciadores de entrada (listeners de toque e mousewheel) podem eliminar a capacidade de resposta. Evite-os se puder. Quando não for possível reduzi-los.
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2025-07-25 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-07-25 UTC."],[[["\u003cp\u003eAchieving 60 frames per second (fps) in web projects is vital for user engagement and overall success, as it ensures smooth and responsive interactions.\u003c/p\u003e\n"],["\u003cp\u003eChrome's rendering pipeline involves JavaScript execution, style calculations, painting, and compositing, all within a 16ms timeframe for each frame.\u003c/p\u003e\n"],["\u003cp\u003eExcessive or unnecessary paint work can lead to performance bottlenecks known as "paint storms," negatively impacting frame rates.\u003c/p\u003e\n"],["\u003cp\u003eUtilizing layers effectively allows for caching of painted elements, reducing redundant rendering and improving performance.\u003c/p\u003e\n"],["\u003cp\u003eMinimizing the use of input handlers, such as touch and mousewheel listeners, is crucial for maintaining responsiveness and avoiding performance issues.\u003c/p\u003e\n"]]],["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"],null,["# 60fps Layout and Rendering\n\nHitting 60fps in your projects directly correlates to user engagement and is crucial to its success. In this talk Nat and Tom talked about Chrome's rendering pipeline, some common causes of dropped frames and how to avoid them.\n\n[Slides](https://docs.google.com/a/google.com/presentation/d/1CH8ifryioHDLT1Oryyy8amusUmq2FytpCPCpk0G3E4o/edit#slide=id.g175f55166_010)\n\n- A frame is 16ms long. It contains JavaScript, style calculations, painting and compositing.\n- Painting is *extremely* expensive. A Paint Storm is where you unnecessarily repeat expensive paint work.\n- Layers are used to cache painted elements.\n- Input handlers (touch and mousewheel listeners) can kill responsiveness; avoid them if you can. Where you can't keep them to a minimum."]]
