11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à toutes & tous !

Dans le cadre d'une application Web je dois donner la possibilité de plier/déplier des blocs (div, table).

Afin d'arriver à mes fins j'utilise une moulinette maison qui plie/déplie mes blocs grace a leurs id en changeant leur style (display block ou none).
Jusque la rien de bien méchant.

Maintenant mon problème.

Lorsque dans une page intervient un trop grande nombre de ligne avec cette possibilité d'ouverture/fermeture de block je commence à voir de réel problème de performance.

Afin de rester accessible toute mon arborescence est générer en HTML (car j'ai vu des solutions ou tout l'arbre est généré en tableau javascript). Puis grace a un script je ferme les blocks souhaités.

A mon avis ce n'est pas la boucle qui est couteuse mais la fonction document_toggleDisplay qui elle est difficilement optimisable car elle fait une bête modification de style. Le changement du style display est une opération couteuse car elle impacte tout les éléments HTML de la page .

Pour chaque changement de style, le navigateur recalcule la position de tout les élements. Cette opération est d'autant plus couteuse que la taille de la page est grande . Dans mon cas elle prend a peu pres 1/2 secondes . Comme il y a 15 ruptures forcément ... (le calcul est vite fait) .

Optimiser ce comportement revient à étudier plus finement le comportement des navigateurs et à vérifier si on peut dire au navigateur d'effectuer le calcul de repositionnement à la fin. En gros je bloque le rafraichissement de la page, réalise mes modif de style et ensuite effectue un refresh de la page.

je ne sais pas si c'est réalisable ou si d'autres solutions existent.

Qu'en pensez vous ?

Merci par avance.
Salut,
Cocci_uk a écrit :
Optimiser ce comportement revient à étudier plus finement le comportement des navigateurs et à vérifier si on peut dire au navigateur d'effectuer le calcul de repositionnement à la fin. En gros je bloque le rafraichissement de la page, réalise mes modif de style et ensuite effectue un refresh de la page.

Il me semble que c'est le cas pour la plupart des navigateurs : la mise à jour de l'affichage n'est pas effectuée pendant l'exécution du code JS. Est-ce que tu as un exemple en ligne ?
La tout de suite non je n'ai pas d'exemple sous la main.

Mais je ne pense pas que ca soit le cas pour les navigateur étant donné que lors d'un long menu on peut voir le menu se replier au fur et a mesure que le JS s'execute. Mais je me trompe peut etre.