Um tweet do meu chefe sobre a experiência de outra empresa com o PhoneGap foi muito relevante para nós no momento – eles dizem que você deve pausar as atualizações do DOM durante a rolagem, pois isso causa nervosismo, atrasos, o que quer que seja na rolagem.
Isso é verdade, um dos aplicativos de um empreendimento teve exatamente o mesmo problema. O caso de uso é que, conforme você rola por uma lista de itens, ela exibe o intervalo de datas atual e um total na barra de navegação no topo.
O problema? As atualizações do DOM basicamente causam um monte de redesenhos em toda a página – o navegador está recalculando sabe Deus o quê. Tento não pensar no que está fazendo, pois dói minha cabeça.
A solução? O elemento HTML Canvas brilhante e brilhante ! E, claro, alguns desenhos personalizados.
Normalmente pensamos no elemento Canvas como uma forma de fazer renderização personalizada de alto desempenho, mas também é um elemento autocontido – as alterações dentro dele não se propagam fora do elemento canvas.
Sim, você perde muitos dos benefícios do HTML lá, no entanto, se você tem um conjunto restrito de dados para exibir, então é perfeito. Parece ser compatível com um bom conjunto de navegadores (testado no Android 4.1 e iOS 6), então estamos mais ou menos bem lá, e provavelmente degradaríamos graciosamente para algum tipo de atualização mais lenta para qualquer navegador que não apóia isso.