É ok para manipular dom antes que o estado está pronto?

StackOverflow https://stackoverflow.com/questions/1222849

Pergunta

Este é geralmente como eu gerenciar melhoria progressiva enquanto manter o ambiente limpo, mas como é que é seguro? há potencial para uma condição de corrida e isso não está funcionando?

Imagine o cenário simples resumo, você quer mostrar algo diferente se você tem suporte javascript .. este é geralmente o que eu vou acabar fazendo: 

<div id="test">original</div>
<script type="text/javascript">
    var t = document.getElementById('test');
    t.innerHTML = 'changed';
</script>

Muitos podem alegar que você deve usar um quadro e esperar por um evento domready, e fazer mudanças lá .. no entanto, há um atraso significativo em que o elemento 'teste' já terão sido proferida antes do final do documento e do css são gatilhos prontos e uma domready .. causando, assim, uma cintilação perceptível de 'original'.

É este código passível de falhas de condição de corrida? ou posso garantimos que um elemento é visível e modificável se existir antes do script?

Agradecemos antecipadamente.

Foi útil?

Solução

Você pode, mas há questões que cercam a fazê-lo.

Primeiro, no IE, se você tentar manipular um nó que não foi fechado (por exemplo, corpo antes de sua tag próximo que deve ser abaixo de sua JS), então você pode encontrar erro "Operação abortada" do IE, que irá resultar em um espaço em branco página. Manipulação de um nó inclui nós anexando, nós móveis, etc.

Em outros navegadores o comportamento é indefinido, porém eles geralmente se comportam como seria de esperar. O principal problema é que, como sua página evolui, a página pode carregar / análise / executar de forma diferente. Isso pode causar algum script para ser executado antes que um navegador define elementos referenciados foram efectivamente criados e disponibilizados para manipulação DOM.

Se você está tentando para aprimorar seu usuário percebida desempenho (ou seja snappiness). Eu sugiro que você evite este caminho e olhar para iluminar suas páginas. Você pode usar página de Desempenho Firebug do Yahoo YSlow / Google para ajudar você a começar.

Page Speed ??do Google

do Yahoo YSlow

Outras dicas

Você pode manipular o DOM antes de estar totalmente carregado, mas pode ser arriscado. Você, obviamente, não pode garantir que o bit do DOM que você está tentando manipular realmente existe, no entanto, para que o seu código pode falhar intermitentemente.

Enquanto você só modificar os nós que precedem o bloco de script (ou seja, tag de fechamento do nó precede tag de abertura do script), você não deve encontrar quaisquer problemas.

Se você quer ter a certeza a operação for bem sucedida, coloque o código em um bloco try...catch e chamá-lo novamente via setTimeout() em caso de falha.

Em Viajeros.com Eu tenho um trabalho indicador de carga desde 8-9 meses e não tenho problemas até agora. Parece que este: 

<body>

<script type="text/javascript">
    try {
        document.write('<div id="cargando"><p>Cargando...<\/p><\/div>');
        document.getElementById("cargando").style.display = "block";
    } catch(E) {};
</script>

Como acessar o DOM joga prematuramente exceções no IE 5 e Navigator 4.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top