Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Israel Elias

Qual usar: DOM CORE ou DOM HTML?

Por , em Javascript

Recommended Posts

Israel Elias    8

Israel Elias
Postado

Tudo oK pessoal!? Desses script abaixo

// Exemplo 01:
elemento.style.color = "#0000FF";
elemento.style.border = "1px solid red";
elemento.width = "100px";
...

// Exemplo 02
elemento.setAttribute("style", "color:#FF00FF");
elemento.setAttribute("border", "1px solid red");
elemento.setAttribute("width", "100px");
...

1: Qual desses é a melhor maneira de se trabalhar na manipulação em javascript, "Exemplo 01" ou "Exemplo 02"?
2: Qual tem maior desempenho?
3: Qual é mais compatível em todos os navegadores?
4: Ou tanto faz usar um ou outro, não tem diferença de desempenho, compatibilidade de todos os navegadores e etc...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Nenhum. Vc não deveria manipular o DOM, simplesmente isso.

 

Acesso ao DOM é lento, então evite, ambas as formas não são boas por isso. Mas a primeira é compatível com IEs antigos e a outra não

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alan Walking    5

Alan Walking
Postado

Achei interessante a questão.

Teoricamente eu já sabia que o Exemplo 01 executa de forma mais rápida* que o Exemplo 02.

*mais rápida numa fração imperceptível em milisegundos.

 

No Exemplo 01, a estilização é aplicada de forma direta ao elemento.

No Exemplo 02, primeiro ocorre a atribuição de estilização, após sua inclusão, é que ela é aplicada ao elemento.

Ou seja, no Exemplo 02 temos um passo a mais do no Exemplo 01.

 

Compatibilidade: Todos os navegadores agora seguem o padrão internacional do W3C, então, em navegadores atuais, deve funcionar ambas as formas.

 

 

Segue um teste prático bem simples que fiz abaixo:

Na maioria das vezes o Exemplo 01 será mais rápido, com pouquíssima diferença.

<!DOCTYPE html>
<html>
<head lang="PT-BR">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<p>
    <input type="texto" id="elemento" disabled>
</p>

<p><input type="button" value="Testar Velocidade de Estilização Direta" onclick="velocidadeEstilizacaoDireta();"> <input type="button" value="Testar Velocidade de Atribuição" onclick="velocidadeAtribuicao();"></p>
<br>
<p>Estilização Direta: <span id="tempo1"></span></p>
<br>
<p>Atribuição: <span id="tempo2"></span></p>

</body>



<script>

var t0;
var t1;

//******************************************************************

function timer1(){
    t0 = performance.now();
    for(var i = 0; i < 100000; i++){
        if(i % 2 == 0)
        {
            elemento.style.color = "#000FFF";
            elemento.style.border = "1px solid red";
        }
        else
        {
            elemento.style.color = "#FFF000";
            elemento.style.border = "1px solid black";
        }

    }
    t1 = performance.now();
}

//******************************************************************

function timer2(){
    t0 = performance.now();
    for(var i = 0; i < 100000; i++){
        if(i % 2 == 0)
        {
            elemento.setAttribute("style", "color:#000FFF");
            elemento.setAttribute("style", "border:1px solid red");
        }
        else
        {
            elemento.setAttribute("style", "color:#FFF000");
            elemento.setAttribute("style", "border:1px solid black");
        }

    }
    t1 = performance.now();
}

//******************************************************************

function velocidadeEstilizacaoDireta()
{
    timer1();
    var tempo1 = (t1 - t0).toFixed(2);
    document.getElementById("tempo1").innerHTML = tempo1 + " ms";
}


function velocidadeAtribuicao()
{
    timer2();
    var tempo2 = (t1 - t0).toFixed(2);
    document.getElementById("tempo2").innerHTML = tempo2 + " ms";
}

</script>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Israel Elias    8

Israel Elias
Postado

Nenhum. você não deveria manipular o DOM, simplesmente isso.

 

Acesso ao DOM é lento, então evite, ambas as formas não são boas por isso. Mas a primeira é compatível com IEs antigos e a outra não

 

Nesse ponto, também concordo contigo William Bruno! Mas quando formos dá efeitos bem legais nos elementos, não tem saída teremos que usar a manipulação DOM, não concorda?

 

Exemplo: aumentar o tamanho do elemento com efeitos de movimentos e muitos outros efeitos.

 

Alan Walking bacana o script que você apresentou.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Mais ou menos @Israel Elias, ai basta por exemplo trocar classes:

 

$el.classList.add("font12");
$el.classList.add("font14");
O que no caso do exemplo dado(manipulação de css), é sempre mais recomendado. Atribuir CSS em elementos DOM, em vez de usar classes CSS, é um anti-pattern.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito