Est-ce que ça va de manipuler dom avant d'être prêt?

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

Question

C’est généralement ainsi que je gère l’amélioration progressive tout en préservant la propreté de l’expérience, mais est-elle sûre? existe-t-il un potentiel de concurrence et cela ne fonctionne pas?

Imaginez le scénario abstrait simple, vous voulez afficher quelque chose différemment si vous avez le support javascript. C’est généralement ce que je finirai par faire: 

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

Beaucoup peuvent prétendre que vous devez utiliser un cadre et attendre un événement domready pour y apporter des modifications. Cependant, il existe un délai important où l'élément 'test' aura déjà été rendu avant la fin du document et du fichier css. sont prêts et un domready se déclenche .. provoquant ainsi un scintillement perceptible de 'original'.

Ce code est-il susceptible d'entraîner des défaillances? ou puis-je garantir qu'un élément est découvrable et modifiable s'il existe avant le script?

Merci d'avance.

Était-ce utile?

La solution

Vous pouvez le faire, mais le faire pose certains problèmes.

Tout d’abord, dans IE, si vous essayez de manipuler un nœud qui n’a pas été fermé (par exemple, BODY avant sa balise de fermeture qui devrait se trouver en dessous de votre JS), vous pouvez alors rencontrer le message "OPERATION ABORTED" de IE. erreur qui entraînera une page blanche. La manipulation d'un noeud inclut l'ajout de noeuds, le déplacement de noeuds, etc.

Dans d’autres navigateurs, le comportement n’est pas défini, mais ils se comportent généralement comme prévu. Le problème principal est que, au fur et à mesure que votre page évolue, la page peut se charger / analyser / exécuter différemment. Cela peut entraîner l’exécution d’un script avant que le navigateur ne définisse les éléments référencés créés et rendus disponibles pour la manipulation DOM.

Si vous essayez d’améliorer les performances perçues par les utilisateurs (à savoir la vivacité). Je vous suggère fortement d’éviter ce chemin et d’éclaircir vos pages. Vous pouvez utiliser Page Performance Firebug de Yahoo, YSlow / Google, pour vous aider à démarrer.

Vitesse de défilement de Google

Yahoo YSlow

Autres conseils

Vous pouvez manipuler le DOM avant qu'il ne soit complètement chargé, mais cela peut être risqué. Vous ne pouvez évidemment pas garantir que le fragment du DOM que vous essayez de manipuler existe réellement, votre code peut donc échouer par intermittence.

Tant que vous ne modifiez que les nœuds qui précèdent le bloc de script (c'est-à-dire que la balise de fermeture du nœud précède la balise d'ouverture du script), vous ne devriez pas rencontrer de problèmes.

Si vous voulez vous assurer que l'opération réussit, placez le code dans un bloc try ... catch et appelez-le à nouveau via setTimeout () en cas d'échec.

Sur Viajeros.com, j’ai un indicateur de charge en fonctionnement depuis 8 à 9 mois et je n’ai pour l’instant aucun problème. Cela ressemble à ceci: 

<body>

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

L’accès prématuré au DOM déclenche des exceptions dans IE 5 et Navigator 4.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top