8
votes

Retarder le rendu de l'élément DOM lors de la modification des propriétés

J'ai actuellement rencontré un problème de performance lors de la mise à jour des propriétés sur beaucoup d'éléments DOM à la fois. Il semble que chaque fois que je change de propriété, l'élément DOM est re-rendu. Y a-t-il de toute façon je peux retarder le rendu des éléments jusqu'à ce que toutes mes mises à jour aient eu lieu? Il semble être beaucoup plus lent dans les FF 3 & 3.5 que IE 7 & 8 qui va à l'encontre de ce que je suis attendu.

Un exemple de ce que je fais est ci-dessous. P>

var t;

for (var i = 0; i < tiles.length; i++) {
    t = tiles[i];
    t.width = '100';
    t.height = '100';
}

javascript performance

0 commentaires

4 Réponses :

2
votes

Déclarez l'affichage: Aucun pour chaque carreau Avant de modifier et d'afficher: Bloquer lorsque toutes les modifications sont effectuées.

0 commentaires

6
votes

d'accord avec @crimson mais Je pense qu'il sera préférable de cacher le parent de tous les éléments que vous mettrez à jour et si elles n'ont pas de parent exclusif, essayez de en créer un.

de cette façon, seuls deux me reproduit se produira , un lorsque vous masquez le conteneur carreaux , et autrui lorsque vous avez terminé la manipulation de l'élément et que vous le montrez à nouveau.

3 commentaires

Si la préoccupation concerne les réponses, pourquoi ne pas utiliser la visibilité: caché. Cela gardera les éléments où ils sont.

Ça marche magnifiquement, sauf! FF2 montre un bref flash blanc :( est là quand même pour empêcher cela?

@David, je ne pense pas visibilité: caché; travaillerait comme des changements peut potentiellement avoir une incidence sur la quantité d'espace adoptée par l'élément en question.

3
votes

Pour éviter le flash, vous pouvez remplacer le parent avec un clone de lui-même, puis travailler sur le parent d'origine en dehors du document. Ensuite, lorsque vous avez terminé, vous pouvez remplacer le clone avec l'original:
var parent = /* define parent here */; var clone = parent.cloneNode(true); parent.parentNode.replaceChild(clone, parent); /* Do stuff with parent and its childNodes... */ clone.parentNode.replaceChild(parent, clone);

2 commentaires

Cela semble être un excellent moyen d'atteindre ce que je veux dans cette question Stackoverflow.com/Questtions/16796105/... .

Pourquoi ne pas simplement travailler sur le clone? Ensuite, vous n'avez qu'une opération remplachetechild .
0 votes Il semble être beaucoup plus lent dans les FF 3 et 3,5 que IE 7 et 8 qui va à l'encontre de ce que j'attendais. Actuellement, FF recalcule immédiatement la mise en page sur un changement de propriété. C'est-à-dire qu'a attendu jusqu'à ce qu'il doit redessiner la page ou accéder à une propriété comme offsetwidth qui doit connaître la nouvelle mise en page. Cela n'a pas toujours utilisé pour fonctionner correctement. L'approche du CMS est bonne. Si tous vos tuiles ont la même taille que dans l'exemple, il existe un moyen encore plus rapide (ce qui fonctionne également si les tuiles n'ont pas de parent commun). Il suffit de leur donner toutes une classe et de les changer à la fois avec CSS: xxx Si vous ne connaissez pas une sélection prédéfinie de tailles possibles à l'avance, vous auriez à Ecrivez la règle de la feuille de style de manière dynamique, via la liste Document.StylesSheets. C'est un peu douloureux, car l'interface de script dans IE ne correspond pas tout à fait la norme DOM utilisée par d'autres navigateurs. À nouveau. 0 commentaires

Articles qui pourrait vous intéresser : Impossible d'importer le module "@ angular / material" Interaction profonde avec break and catch Utilisation de node.js comment renommer tous les fichiers d'un dossier Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO