Um conjunto de técnicas para acelerar o DHTML
Autor：Eve Cole
Data da Última Atualização：2009-06-20 16:59:57
HTML dinâmico (DHTML) na Microsoft? No Internet Explorer 4.0
Introduzido para disponibilizar novos modelos de programação para autores e desenvolvedores da web. Desde então, os autores da Web têm
Aproveite ao máximo esse poderoso recurso para fornecer conteúdo, estilo e posicionamento dinâmicos para que os usuários da web possam
Experimente recursos interativos avançados. A flexibilidade do DHTML significa que normalmente existem múltiplas maneiras de implementar
Sua ideia. Entenda como a análise de HTML e os componentes de exibição do Internet Explorer são processados
para ajudá-lo a determinar a melhor maneira de realizar o trabalho. Este artigo descreve algumas das funcionalidades do DHTML
impacto significativo no desempenho e fornece algumas dicas para melhorar o desempenho da página.
Alterações em lote de DHTML
Nas páginas da web DHTML, a maneira mais eficaz de melhorar o desempenho é melhorar o
Mudanças no conteúdo. Existem várias maneiras de atualizar uma página da web, o que é importante entender. Congke
A julgar pelo feedback dos usuários, os autores da Web podem usar blocos de texto HTML ou DHTML
Object Model (Inglês) ou W3C Document Object Model (DOM) (Inglês) para acessar HTML individual
elemento. Sempre que você altera o conteúdo HTML, a análise e exibição de HTML do Internet Explorer
Todos os componentes de exibição devem reorganizar a representação interna da página, recalcular o layout do documento e
transmitir e exibir essas alterações. Embora o desempenho real seja determinado pelo conteúdo da página da Web e pelas alterações feitas
, mas essas operações são relativamente caras. Se você usar blocos de texto HTML em vez de blocos individuais
Para acessar o elemento, o analisador HTML deve ser chamado, o que causará sobrecarga adicional de desempenho. Aceitar HTML
Os métodos e propriedades de texto incluem insertAdjacentHTML (inglês) e pasteHTML (inglês)
text), bem como os atributos innerHTML (inglês) e outerHTML (inglês).
Dica 1: Faça alterações no conteúdo HTML em uma função de script. Se o seu design usa
Se você tiver vários manipuladores de eventos (por exemplo, em resposta a movimentos do mouse), as atualizações deverão ser centralizadas
mudar.
Outro fato importante sobre a análise e exibição de componentes HTML é que, uma vez que o script retorna o controle (por exemplo,
Quando o manipulador de eventos de script é encerrado ou quando métodos como setTimeout (inglês) são chamados),
Este componente recalculará o layout e exibirá a página da web. Agora você conhece o Internet Explorer
Como lidar com as mudanças, a seguir você começará a melhorar o desempenho de suas páginas da web.
Dica 2: crie uma string HTML e faça uma alteração no documento em vez de várias
tempos atualizados. Se o conteúdo HTML não for necessário, considere usar
Propriedade innerText (inglês).
No exemplo a seguir, o método mais lento chama HTML sempre que a propriedade innerHTML é definida
Analisador. Para melhorar o desempenho, você pode primeiro construir uma string e depois atribuí-la ao innerHTML
propriedade.
lento:
divUpdate.innerHTML = "";
para (var i=0; i<100; i++)
{
divUpdate.innerHTML += "Este é um método mais lento!";
}
rápido:
varstr="";
para (var i=0; i<100; i++)
{
str += "Por usar strings, esse método é mais rápido!";
}
divUpdate.innerHTML = str;
Usar texto interno
O modelo de objeto DHTML acessa o texto de um elemento HTML através do atributo innerText (Inglês).
conteúdo, enquanto o DOM W3C fornece um nó de texto filho independente. Diretamente através do atributo innerText
Atualize o conteúdo do elemento permanentemente, mais rápido do que chamar o método DOM createTextNode (inglês).
Dica 3: Use a propriedade innerText para atualizar o conteúdo do texto.
O exemplo a seguir mostra como usar a propriedade innerText para melhorar o desempenho.
lento:
nó var;
para (var i=0; i<100; i++)
{
nó = document.createElement("SPAN");
node.appendChild(document.createTextNode("Usar createText
Nó() "));
divUpdate.appendChild(nó);
}
rápido:
nó var;
para (var i=0; i<100; i++)
{
nó = document.createElement("SPAN");
node.innerText = "Usar propriedade innerText";
divUpdate.appendChild(nó);
}
Adicione um único elemento usando o DOM
Conforme mencionado anteriormente, a aplicação do método de acesso ao texto HTML fará com que o analisador HTML seja chamado, de
Isso reduzirá o desempenho. Então, usando createElement (inglês) e insertAdjacent
O método Element (inglês) adiciona elementos mais rapidamente do que chamar o método insertAdjacentHTML uma vez.
Dica 4: chame os métodos createElement e insertAdjacentElement mais rapidamente do que chamar
O método insertAdjacentHTML é rápido.
O envio de atualizações DHTML em lote e a chamada do método insertAdjacentHTML uma vez podem melhorar
Desempenho, mas às vezes é mais eficiente criar elementos diretamente do DOM. No cenário abaixo, você pode
para tentar os dois métodos e determinar qual deles é mais rápido.
lento:
para (var i=0; i<100; i++)
{
divUpdate.insertAdjacentHTML("beforeEnd", "Usar inserção
AdjacenteHTML() ");
}
rápido:
nó var;
para (var i=0; i<100; i++)
{
nó = document.createElement("SPAN");
node.innerText = "Usar insertAdjacentElement()";
divUpdate.insertAdjacentElement("beforeEnd", node);
}
Estendendo opções em um elemento SELECT
Para a regra anterior usando o método de texto HTML, um grande número de OPÇÕES (Inglês)
Uma exceção é o caso onde elementos são adicionados ao SELECT (inglês). Neste momento, use innerHTML
As propriedades são mais eficientes do que chamar o método createElement para acessar uma coleção de opções.
Dica 5: Use innerHTML para adicionar um grande número de opções ao elemento SELECT.
Use operações de concatenação de strings para construir o texto HTML do elemento SELECT e, em seguida, use isso
Dicas para definir o atributo innerHTML. Para um número particularmente grande de opções, a operação de concatenação de strings também
afetar o desempenho. Neste caso, crie um array e chame o Microsoft JScript join
(Português) Método para realizar a concatenação final do texto HTML do elemento OPTION.
lento:
var opt;
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉";
para (var i=0; i<1000; i++)
{
opt = document.createElement("OPÇÃO");
selUpdate.options.add(opt);
opt.innerText = "Item" + i + "Item";
}
rápido:
var str="〈SELECT ID='selUpdate'〉";
para (var i=0; i<1000; i++)
{
str += "〈OPÇÃO〉th" + i + " item〈/OPÇÃO〉";
}
str+= "";
divUpdate.innerHTML = str;
Mais rápido:
var arr = novo Array(1000);
para (var i=0; i<1000; i++)
{
arr[i] = "〈OPÇÃO〉th" + i + " item〈/OPÇÃO〉";
}
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉" + arr.join() + "
";
Atualizar tabela com DOM
Usar o método DOM para inserir linhas e células da tabela é melhor do que usar insertRow (inglês) e inserir
O método Cell (inglês) (parte do modelo de objeto de tabela DHTML) é mais eficiente. especialmente em
Ao criar tabelas grandes, a diferença de eficiência é ainda mais óbvia.
Dica 6: Use métodos DOM para criar tabelas grandes.
lento:
var linha;
célula var;
para (var i=0; i<100; i++)
{
linha = tblUpdate.insertRow();
para (var j=0; j<10; j++)
{
célula = linha.insertCell();
cell.innerText = "Linha " + i + " , célula " + j + " ";
}
}
rápido:
var linha;
célula var;
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild(tbody);
para (var i=0; i<100; i++)
{
linha = document.createElement("TR");
tbody.appendChild(linha);
para (var j=0; j<10; j++)
{
célula = document.createElement("TD");
linha.appendChild(célula);
cell.innerText = "Linha " + i + " , célula " + j + " ";
}
}
Escreva uma vez, use muitos
Se o seu site usa scripts para realizar operações comuns, considere adicionar essas funções
Pode ser colocado em um arquivo separado para que possa ser reutilizado por várias páginas da Web. Ao fazê-lo, não só
Pode melhorar a capacidade de manutenção do código e manter o arquivo de script no cache do navegador, assim
Ele só precisa ser baixado localmente uma vez quando o usuário visitar o site. Coloque as regras de estilo comumente usadas em separado
Os mesmos benefícios podem ser obtidos em arquivos.
Dica 7: reutilize scripts colocando códigos usados com frequência em ações ou arquivos independentes
Para aproveitar melhor a reutilização de scripts, coloque as operações de script usadas com frequência em suplementos DHTML.
comportamento do código ou elemento (Inglês). Os comportamentos fornecem uma maneira eficiente de reutilizar scripts e
Crie componentes que são acessados a partir de HTML e permitem usar seus próprios objetos, métodos, propriedades e eventos para
Modelo de objeto DHTML estendido. Para comportamento que não usa o recurso viewlink (inglês), você pode
Considere usar o recurso de comportamento leve no Internet Explorer 5.5
Encapsulamento de código mais eficiente. Além disso, se o seu código de script estiver em um SCRIPT (inglês)
Em blocos, será alcançado maior desempenho.
Não use muito atributos dinâmicos
Propriedades dinâmicas (inglês) fornecem aos autores da web uma maneira de usar expressões como valores de propriedade.
A expressão é avaliada em tempo de execução e seu valor resultante é aplicado ao atributo. Este é um recurso poderoso. esse
recurso pode ser usado para reduzir a quantidade de script na página, mas como as expressões devem ser reavaliadas periodicamente, e
Essa expressão costuma estar relacionada a outros valores de propriedade, portanto pode ter um impacto negativo no desempenho. Esse tipo de
Isto é especialmente verdadeiro para propriedades de posicionamento.
Dica 8: Limite o uso de propriedades dinâmicas.
A vinculação de dados funciona muito bem
A vinculação de dados (inglês) é um recurso poderoso que permite combinar os resultados de uma consulta ao banco de dados
Conteúdo Fruit ou ilha de dados XML (em inglês), vinculado ao elemento HTML da página Web. Você não tem
Precisa retornar ao servidor para extrair dados, ele pode fornecer funções de classificação e filtragem de dados, bem como dados diferentes
visualização de dados. Imagine uma página da Web que exibe os dados de uma empresa como um gráfico de linhas, de barras ou de pizza.
gráfico, também possui botões para classificar os dados por escritório, produto ou estágio de vendas, e todos
A função só precisa acessar o servidor uma vez para implementá-la.
Dica 9: Use a vinculação de dados para fornecer uma visão rich client dos seus dados.
Não defina o atributo expando no objeto de documento
O atributo expando (inglês) pode ser adicionado a qualquer objeto. Esta propriedade é muito útil, pois pode
para armazenar informações na página Qua atual e fornecer outra maneira de estender o modelo de objeto DHTML
Lei. Por exemplo, você pode atribuir um atributo clicado a um elemento DHTML e usar esse atributo para solicitar ao usuário
Em qual elemento o usuário clicou. Ao gerar um evento, você também pode usar o atributo expando para
Os manipuladores de eventos fornecem mais informações contextuais. Não importa como você usa o atributo expando, corte
Lembre-se de não defini-los no objeto documento (inglês). Se você fizer isso, quando visitar
Ao solicitar esta propriedade, o documento deverá realizar operações adicionais de recálculo.
Dica 10: Defina o atributo expando no objeto janela (inglês).
lento:
para (var i=0; i<1000; i++)
{
var tmp;
window.document.myProperty = "Item" + i + "Item";
tmp = janela.document.myProperty;
}
rápido:
para (var i=0; i<1000; i++)
{
var tmp;
window.myProperty = "Item" + i + "Item";
tmp = janela.minhaPropriedade;
}
Evite mudar as regras de classe e estilo
A troca de regras de classe e estilo é uma operação muito cara que requer recálculo e ajuste de todo o
O layout de um documento. Se o seu site usa folhas de estilo para fornecer visualizações alternativas de conteúdo, você pode
Considerar a modificação direta do objeto de estilo (inglês) do elemento a ser alterado, em vez de modificar o estilo do elemento
atributo className (inglês) ou objeto styleSheet (inglês) associado à classe.
Dica 11: Ao alterar a aparência do conteúdo, modifique diretamente o objeto de estilo.
Recolher o intervalo de texto antes de encontrar o pai
Um objeto TextRange (inglês) representa um elemento selecionado pelo usuário ou recuperado de um elemento HTML
Área de texto, como BODY (inglês). Chamando o método parentElement (inglês),
Pode identificar o pai de um intervalo de texto. Para intervalos de texto complexos, chame parentElement
Antes do método, será mais eficiente chamar primeiro o método de colapso (inglês).
Dica 12: reduza o intervalo de texto antes de acessar o método parentElement.
Extraído de http://www.microsoft.com/china/msdn/?MSCOMTB=ICP_MSDN
