1. Evite as operações DOM frequentes diretamente no documento . Se você realmente precisar, pode usar o método off-document. Os métodos específicos incluem, mas não incluem completamente o seguinte:
(1). Primeiro exclua o elemento do documento e, depois de concluir a modificação, coloque o elemento de volta à sua posição original
(2). Defina a exibição do elemento como "nenhum" e, depois de concluir a modificação, modifique a tela no valor original
(3). Se você precisar criar vários nós DOM, poderá usar o DocumentFragment para adicionar o documento ao mesmo tempo depois de criá -lo usando documentfragment
2. Modificar centralmente o estilo
(1). Modifique os atributos no estilo do elemento o mínimo possível
(2). Tente modificar o estilo modificando o nome da classe
(3). Definir valor de estilo através da propriedade CSSTEXT
3. Valor do atributo de layout do cache
Para valores de tipos não referenciados em atributos de layout (tipos numéricos), se forem necessários vários acessos, eles podem ser armazenados na variável local primeiro em um acesso e depois usados variáveis locais, que podem evitar renderizar pelo navegador sempre que o atributo é lido.
var largura = el.offsetWidth; var scrollLeft = el.scrollleft;
4. Defina a posição do elemento como absoluto ou fixo
Quando a posição de um elemento é estática e relativa, o elemento está na estrutura da árvore Dom. Quando uma operação no elemento precisa ser renderizada novamente, o navegador renderizará a página inteira. Definir a posição de um elemento como absoluto e fixo pode separar o elemento da estrutura da árvore Dom e, quando o navegador precisa renderizar, ele só precisa renderizar o elemento e o elemento abaixo do elemento, reduzindo assim o tempo de renderização do navegador em certa medida, o que vale especialmente a pena, considerando o número crescente de animações de Javascript de hoje.
O exposto acima são alguns dos assuntos resumidos por mim sobre a redução de reflexão e repintura do navegador. Espero que todos gostem.