Quando desenvolvemos Rich Internet Applications (RIA), geralmente escrevemos alguns scripts javascript para modificar ou adicionar elementos de página. Essas tarefas são finalmente concluídas pelo DOM - ou Document Object Model - e nosso método de implementação afetará a velocidade de resposta do aplicativo.
As operações DOM farão com que o navegador analise novamente (refluxo), que é um processo de cálculo do navegador que determina como os elementos da página são exibidos. Modificar diretamente o DOM, modificar o estilo CSS de um elemento ou modificar o tamanho da janela do navegador acionará uma nova análise. A leitura das propriedades de layout de um elemento, como offsetHeithe ou offsetWidth, também acionará uma nova análise. A nova análise leva tempo de cálculo, portanto, quanto menos nova análise for acionada, mais rápida será a aplicação.
As operações DOM geralmente modificam elementos de página existentes ou criam novos elementos de página. As quatro soluções de otimização a seguir abrangem dois métodos de modificação e criação de nós DOM, ajudando a reduzir o número de vezes que aciona a nova análise do navegador.
Solução 1: modifique o DOM trocando os nomes das classes CSS
Esta solução nos permite modificar vários atributos de estilo de um elemento e seus elementos filhos de uma só vez e acionar apenas uma nova análise.
precisar:
( nota emu : O autor do artigo original obviamente teve um curto-circuito no cérebro quando escreveu isso e colocou aqui os problemas a serem resolvidos no modo de manipulação DOM fora do fluxo subsequente. No entanto, é fácil de entender o autor a partir do código de demonstração O problema que eu realmente quero descrever, então o emu não reproduzirá o texto original)
Agora precisamos escrever uma função para modificar diversas regras de estilo de um hiperlink. É muito simples de implementar, bastando alterar os atributos correspondentes a estas regras um por um. Mas o problema é que toda vez que um atributo de estilo é modificado, isso causará uma nova análise da página.
function selectAnchor(elemento) {
element.style.fontWeight = 'bold';
element.style.textDecoration = 'nenhum';
elemento.style.color = '#000';
}
Solução:
Para resolver este problema, podemos primeiro criar um nome de estilo e colocar todas as regras de estilo a serem modificadas neste nome de classe. Em seguida, adicionamos esse novo nome de classe ao hiperlink, para que possamos adicionar várias regras de estilo e apenas uma nova análise seja feita. provocado. Outra vantagem deste modelo é que ele também consegue a separação entre desempenho e lógica.
.selectedAnchor {
peso da fonte: negrito;
decoração de texto: nenhuma;
cor: #000;
}
function selectAnchor(elemento) {
element.className = 'selectedAnchor';
}