+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu][Javascript] Est-ce qu'un gros code source ralentit l'application ? (/showthread.php?tid=2488)
[Résolu][Javascript] Est-ce qu'un gros code source ralentit l'application ? - Kassak - 26-02-2008
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>
Ce n'est qu'un petit bout, il y en a un bon paquet, ma question, je peux m'affoler en me disant que ca me bouffe les 3/4 des ressources, ou bien que se soit volumineux ca ne prend en faites pas de "place", j'entends par place que ça ralentisse l'affichage. ( quand 200 joueurs vont cliquer en même temps...ouille!)
Merci bien !
RE: Javascript, lourd non? - Sephi-Chan - 26-02-2008
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; }
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
RE: Javascript, lourd non? - genosite - 27-02-2008
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.
RE: Javascript, lourd non? - Sephi-Chan - 27-02-2008
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
RE: Javascript, lourd non? - Kassak - 27-02-2008
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.
RE: Javascript, lourd non? REGLE - Roworll - 27-02-2008
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 !
RE: Javascript, lourd non? REGLE - Sephi-Chan - 27-02-2008
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
RE: Javascript, lourd non? REGLE - naholyr - 27-02-2008
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>
Code PHP :
<?php
// Javascript (prototype.js)
$$('td.demo').each(function(td) {
$w(td.className).each(function(className) {
var matches = className.match(/c-(\d+)-(\d+)/);
if (matches) {
Event.observe(td, "mouseover", function(event){ change_txt('demo', matches[1]+'/'+matches[2]) });
Event.observe(td, "mouseout", function(event){ restaure('demo') });
return $break;
}
});
// CSS
td.demo {
vertical-align: middle;
text-align: center;
}
// HTML
<td class="demo c-11-10"></td>
<td class="demo c-12-10"></td>
<td class="demo c-13-10"></td>
<td class="demo c-14-10"></td>
<td class="demo c-15-10"></td>
<td class="demo c-16-10"></td>
<td class="demo c-17-10"></td>
<td class="demo c-18-10"></td>
Au-delà de la pure ponte de code, j'aimerais également attirer ton attention sur un point qui peut être intéressant : si JS est strictement nécessaire à l'exécution des pages de ton jeu, question bande passante tu peux aussi bien générer ton HTML en Javascript
Pour reprendre ton exemple :
Code PHP :
<?php
for (var x=11;x<19;x++) document.write('<td class="demo c-' + x + '-10"></td>');
Mais c'est le genre d'optimisations auxquelles on peut refléchir quand le besoin devient réel.