[Résolu][Javascript] Est-ce qu'un gros code source ralentit l'application ?

[Kassak]

Yop yop!

Me suis amusé à faire des petites choses en javascript sur ma carte, quand le joueur passe la souris sur une case, les coordonées en X et Y de cette case sont affichées dans un petit endroit de la page, pareil quand il y a un joueur, un changement de map, un PNJ et j'en passe...


Je test avec une de mes maps qui fait 18/11 cases, ca marche nickel la n'est pas le soucis, mais je m'en vais voir mon code source via mon navigateur, et javascript génère à chaque resfresh, pour chaque case du tableau ceci :

Code PHP :

<?php 

<td align="center" valign="middle" onMouseOver="change_txt('demo','10/10 ')" onMouseOut="restaure('demo')"></td>



         <td align="center" valign="middle" onMouseOver="change_txt('demo','11/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','12/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','13/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','14/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','15/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','16/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','17/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','18/10 ')" onMouseOut="restaure('demo')"></td> 

[Sephi-Chan]

Il est clair que tu pourrais réduire fortement le poids de tes pages en utilisant des CSS et des Javascript décentralisés du code source. Au delà de réduire le poids des pages, il n'est jamais mauvais d'avoir un code source propre.

Pour le CSS, tu peux faire tes alignements par un simple :

Code :

table tr td { text-align: center; vertical-align: middle; }

Cela te permettrait d'économiser 30 caractères par ligne ! Ton code source t'en remerciera, et ta validité XHTML aussi.

Pour le Javascript, il suffit de passer par un script externe qui affecte un comportement aux différentes cellules. Cependant, pour t'aider plus, il faudrait avoir le code source qui génère cela.


Sephi-Chan

[genosite]

Le javascript est un langage cote client, donc si le joueur a un ralentissement, il ny a que lui qui est toucher, sauf si tu utilise des requête ajax.

[Sephi-Chan]

C'est un détail que j'ai oublié de signaler dans ma réponse. L'exécution côté client ne sera plus longue pour le visiteur que s'il a une machine peu puissante. Le serveur en lui même délivrera les pages à la même vitesse (qui sera peut-être un peu plus rapide si tu réduits ton code source en utilisant une feuille de style et des javascripts externes.


Sephi-Chan

[Kassak]

Oki, donc pas la peine de m'affoler pour le moment, j'ai d'autre trucs plus important à régler pour améliorer la vitesse ( comme enlever les SELECT * que j'ai mis partout xD)

Merci bien, je vais essayer de faire ça en CSS plus tard, j'avais déjà commencé en plus.

[Roworll]

Juste pour infos, il est possible de réaliser de superbes menus en full CSS sans un poil de javascript.
Une page avec beaucoup d'exemples complets peut être consultée ici

Ok c'est en anglais mais tous les exemples de menu et le code CSS correspondant peuvent être consultés librement en affichant simplement le code source de la page.

Et hop, un peu de fantaisie !

[Sephi-Chan]

Personne ne dit le contraire, cet homme fait vraiment des choses impressionnantes avec de simples feuilles CSS et sans trop d'extravagances en plus dans le code xHTML.

Simplement, CSS n'a pas le même cachet qu'un effet Javascript. C'est un peu triste à dire, mais il faut parfois taper dans l'œil du visiteur, Javascript y contribue.

Et puis, à chacun son rôle, CSS est là pour présenter, pas pour s'occuper du dynamisme d'une page, même si certaines pseudo-classes permettent à CSS de le faire.


Sephi-Chan

[naholyr]

Exemple d'équivalence, parce que j'aime bien faire des petites démos de prototype.js (que les amateurs d'autres librairies JS n'hésitent pas, voir de petits exemples comme ça peut parfois aider ceux qui cherchent à se décider) :

Code PHP :

<?php 

<td align="center" valign="middle" onMouseOver="change_txt('demo','11/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','12/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','13/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','14/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','15/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','16/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','17/10 ')" onMouseOut="restaure('demo')"></td>

         <td align="center" valign="middle" onMouseOver="change_txt('demo','18/10 ')" onMouseOut="restaure('demo')"></td>