Chargement page coté navigateur trop long

Question

Bonjour, j'ai programmé un petit jeu sur lequel j'ai une grille de 8000 cases à afficher avec une requete (qui fonctionne bien) pour savoir pour chaque case si elle a été retournée ou pas. Tout ceci marche très bien, ma programmation fonctionne. Par contre je fais une boucle 8000 fois pour afficher ou non ma case. Mais mon fichier final envoyé du serveur php au navigateur fait 1Mo (8200 lignes au final) et ma grille fait comme un chargement de 10 à 40 secondes suivant si j'utilise FF ou IE (10 secondes sous ie et 30 à 40 sous FF3) Voici le code de ma boucle : [index.php?num_case= ] je me posais la question de savoir s'il y avait moyen de contourner le fait que ça rame (comme par exemple utiliser flash, mais le problème de boucle flash est le meme non ? Ou de précharger ?) merci si quelqu'un a une solution potentielle cordialement chalex

Flachy Joe · Answer

Utilise AJAX : tu télécharge la page une fois, du javascript créé les cases puis effectue une requête vers le serveur à chaque changement de la grille pour obtenir le nouvel état à afficher (code par exemple dans une chaîne de caractères "0111010100000111..."), tu n'as plus que 8000 caractères à télécharger, soit 8ko
Et si tufais un codage sur 1 bit tu code l'état de 8 cases sur chaque octet de ta chaine et tu n'as plus besoin que de 1000 caractères.
Ensuite les cases seront mises à jour par du javascript.

 Flachy Joe 

« Il vaut mieux mobiliser son intelligence sur des conneries que mobiliser sa connerie sur des choses intelligentes. » Les Shadoks<

kohntark · Answer

@flashy
Et si tufais un codage sur 1 bit tu code l'état de 8 cases sur chaque
octet de ta chaine et tu n'as plus besoin que de 1000 caractères.

= > heu, je n'ai pas compris là

 tu n'as plus que 8000 caractères 
 => un ti peu plus quand même hein, ... ok, je titille :)

C'est une très bonne solution que tu proposes mais elle est sans doute améliorable, parce que 8...10 Ko c'est à la fois peu et beaucoup.
Peut être y a t il moyen de n'envoyer que la ligne modifiée, voir la case (style :  ligne 123, col 27), voir en codant en hexa. Mais gaffe à ce que le code JS ne fasse pas ramer la machine du client.

Chalex :
combien de colonnes / lignes as tu ?
Tu peux en dire plus sur le but du jeu et son déroulement ?
N'hésite pas à poster ton code.

Cordialement,

Kohntark -

cs_chalex · Answer

Bonjour,

avant de répondre, je vous remercie de vous occuper de mon cas (quoi qu'il en soit, je testerai des solutions ce soir)

Comment fonctionne le jeu (pour simplifier je vais dire qu'il n'y a qu'une grille de 8000 case) :
dans ma table grille j'ai :
id_case(de 1 à 8000) | id_client (état 0 ou 1, 0 par défaut si case pas cliquée)
ceci me fait une table de 8000 lignes (1par case | je ne gère pas les lignes/colonnes)  

fonctionnement du jeu :
la grille est commune à tous les joueurs, si le joueur 121 clique sur la case 48, cette dernière ne sera plus visible par les autres joueurs (d'ou le besoin de rafraichir la grille completement entre chaque clique). Par contre si le joueur 54 ouvre ma page grille.php et qu'entre temps un autre joueur clique sur une case, il ne verra son action qu'une fois son clic(joueur54) effectué ou s'il recharge la page.

L'histoire des 00011100011000000000010010001 me semble pas mal, mais s'il y a 7000 chiffre 1 j'en reviens encore à un code de 7000 lignes uniquement en javascript ?

Le problème sera-t-il le même avec du flash ?
entre 1Mega et 10ko je préfère 10 ko...

chalex

Flachy Joe · Answer

bon, je réexpliqe, le javascript n'est pas sensé être écrit par le php :
1. Tu as 2 fichiers "affichage" et "traitement"
2. dans "affichage"
 Javascript :
 a. boucler pour créer 8000 cases en HTML
 b. demander à "traitement" la valeur des cases 
 c. boucler sur le résultat de "traitement" pour modifier l'affichage des cases
3. dans "traitement"
  PHP :
  a. Boucler sur la base de donnée pour lister les valeurs des cases
  b. Retourner une chaine de caractère interprétable par le javascript

Et voila, tu n'as pas besoin d'une seul goutte de php dans a"ffichage" uniquement du html, du css et du javascript. De même tu n'as besoin de rien d'autre que du php dans traitement.

Et tu n'as même pas besoin de raffraichir toute la page pour modifier l'affichage, uniquement que le javascript refasse la demande et boucle à nouveau pour changer l'affichage. Tu économise la création des cases HTML.

 Flachy Joe 

« Il vaut mieux mobiliser son intelligence sur des conneries que mobiliser sa connerie sur des choses intelligentes. » Les Shadoks<

Flachy Joe · Answer

[../auteur/KOHNTARK/302665.aspx @kohntark]


Chaque case n'a que 2 état possible : 0 ou 1 or chaque caractère de la chaîne fais 1 octet, soit 8 bits donc on peut y coder l'état de 8 cases.
Exemple :
le caractère 'a' vaut '97' en code ascii décimal soit "1100001" en binaire, on voit bien là l'état de 8 cases...

 Flachy Joe 

« Il vaut mieux mobiliser son intelligence sur des conneries que mobiliser sa connerie sur des choses intelligentes. » Les Shadoks

kohntark · Answer

@flachy
OK, c'est un peu plus clair mais je crains ne pas encore avoir bien saisi.
Pourquoi fais tu référence à l'ascii ??
Tu veux coder les cases avec une chaine ascii ?? Je me trompe peut être mais c'est ingérable.
Par exemple, comment fais tu pour représenter la 1ère case cochée (ou la 8eme selon le LSB) ?




Je reste sur mon codage en hexa qui selon moi est la meilleure solution.




Cordialement,

Kohntark -

kohntark · Answer

... enfin, la meilleure solution reste les lignes / colonnes, car ça représente l'énorme avantage de n'envoyer qu'une trame "ajax" du style :  10.36 (ligne 10 colonne 36), soit 6 caractères max, qui ne concerne que la case modifiée
Inutile donc de laisser des ressources (PHP comme JS) à réécrire toute la grille, sans compter les conversions de base (bindec and Co)
C'est sans doute 100 fois plus rapide que les solutions ci dessus.

Kohntark -

cs_chalex · Answer

Si j'ai bien compris :
1 - je fais ma grille avec toutes les cases à l'état 0 (case fermée) (avec mes div avec une boucle javascript ?)
2 - je lance mon ajax dans un 
 qui fait une boucle php des infos de ma base sur 8000 cases, j'en reçois : 1100000011010111011000010001... (soit 8000 0 ou 1). 
3 - je décompose cette chaine tous les 8 caractères ce qui me donne 1000 octets que je mouline dans une fonction javascript (dans l'ajax?)
4 - je supprime grace à la fonction JS les cases qui sont à 1.

Dis moi si mon cheminement est bon, et dernière question j'utilise bindec comme fonction php pour découper ?

chalex

cs_chalex · Answer

Kohntark : si chacun de mes div est du style : avec n incrémenté, ta solution peut fonctionner de récupérer seulement les id_client de ma table qui valent 1 dans un div ajax et de modifier l'apparence du div ? Pour mieux expliqué 1 - je créer une grille remplie de de 5x5 px (cases remplies) en Javascript 2 - en ajax, je récupère mes numéros de case id_case où id_client == 1 3 - toujours en partant du fichier ajax je fait une sorte de : est ce que c'est aussi simple ? et ok la page téléchargée sera pas très grande, mais le fait de faire autant de javascript (création de 8000 cases pleines puis supprimer celles déjà utilisées) n'est pas trop lourd pour le client merci en tout cas pour votre aide, ça m'ouvre plein de perspectives auxquelles je n'avais pas pensé ! chalex

kohntark · Answer

@Chalex


Pour ton avant dernier post :
Tu devrais renvoyer une chaîne (celle générée par php) encodée de la même manière (et pas des 0/1)


Mais je ne m'attarderai pas sur cette solution qui n'est pas la meilleure.




Dernier post :
Je ne sais pas pourquoi j'ai parlé de ligne / colonne. Je voulais plutôt parler d'id unique pour chaque case.
Alors oui, dans les grandes lignes tu dis juste. Et oui c'est aussi simple (c'est le plus difficile, de faire simple :)) Bon, je n'est pas écrit le code complet, il y a sans doute des difficultés.



et ok la page téléchargée sera pas très grande, mais le fait de faire autant de javascript (création de 8000 cases pleines puis supprimer celles déjà utilisées) n'est pas trop lourd pour le client


=> tu parles bien de la première page téléchargée là ?
A mon avis il y a des tests à faire :
    - solution "tout php" == le client ne charge qu'une page web, toute la charge incombe au serveur
    - solution ajax == ce que tu dis avec envoi d'une seule trame codée en hexa (2000 car)
Tout ça est à creuser, mais je ne pense pas que ce soit le plus gros pb puisque cela ne survient qu'une fois (même si il a 10...15 secondes d'attente avec un message "chargement du jeu en cours" ça peut passer)

Le pb avec la solution que je proposais est qu'il faut prendre en compte le clic des autres joueurs.
 chui un peu trop pressé (et fatigué) pour y réfléchir maintenant, mais je pense qu'il faut éviter de faire des requêtes sur 8000 enregistrements et d'envoyer la trame résultante. Peut être avec des flags, peut être avec une table temporaire ou un système n'autorisant qu'une seule requête à la fois et qui met à jour automatiquement les grilles des autres joueurs .... ce n'est pas si simple et ça mérite reflexion.


Tu n'aurais pas un exemple en ligne à nous proposer ?

Cordialement,

Kohntark -

cs_chalex · Answer

Ben pour répondre rapidement car moi aussi v me coucher...

J'ai un exemple d'un site en flash qui contient 100 000 cases par grille, mais ce n'est pas une grille commune :
www.otopix.com

L'autre exemple c'est mon site, 8000 cases communes pour tous les joueurs ( plus de chance de gagner donc ^.^ ):
www.lafoireauxcadeaux.com
rubrique jeux/grille

dans les 2 cas, il faut se créer un compte sur le site pour voir les grilles.

Allé demain j'aurai le temps de me pencher sérieusement sur une solution.

chalex

cs_chalex · Answer

Yop bon j'ai bien avancé

après avoir tout placé en javascript et avoir eu des alarmes de IE et Firefox du style :
un script est en  cours et ralenti l'execution de la page, voulez vous continuer ?

du coup  j'ai créé ma page ajax, mais dès que j'envoie plus de 2000 caractere vers l'ajax, il ne me charge pas ma page ajax.

Tu coup j'ai une chaine du style $chaine_case = 000100000000100000000101110000... (normalement 8000 caractère) mais elle ne passe pas il faut que je la convertisse en octet, mais je n'arrive pas a voir comment faire pour :
- mettre tous les 8 caractere un $chaine_dec .= bindec($chaine_case); (ça ok avec un modulo %)
- envoyer $chaine_dec à l'ajax (bon ça ok aussi)
- recuperer $chaine_dec dans mon ajax (ça ok)
- retransformer $chaine_dec en binnaire dans mon ajax (en javascript ou php ?)
- faire ma boucle avec mon script javascript (ça c'est ok, je laisse tombé pour l'instant le rafraichissement de la grille)

En attendant votre aide sur ces dernières questions, je troubleshot un peu encore....

cs_chalex · Answer

Bon ben en fait ça sera en hexa finalement mais j'ai un soucis. Ci je fais ça :
<?php
$binaire = "01000000000000000000000011100000110";
$hexadecimal = base_convert($binaire, 2, 16);
echo "
 binaire : $binaire 
 hexa : $hexadecimal";
$binaire = base_convert($hexadecimal, 16, 2);
echo "
 binaire : $binaire ";
?>

voila ce qui est affiché :
binaire : 01000000000000000000000011100000110 
 hexa : 200000706
 binaire : 1000000000000000000000011100000110 	


je perd donc le premier 0 et ça m'embete grave
:'( c'est la première fois que je galère autant pour  du code tout con, je pête un cable aujourd'hui...

vous connaissez le moyen de faire un genre hex2oct ?

Flachy Joe · Answer

Si tu ne trouve pas d'autre solution, force un 1 comme premier bit et ne le prend pas en compte dans le traitement js...

 Flachy Joe 

« Il vaut mieux mobiliser son intelligence sur des conneries que mobiliser sa connerie sur des choses intelligentes. » Les Shadoks<

cs_chalex · Answer

Salut,

ben en fait pour solution je regarde la différence de taille de chaine de caractere et j'ajoute des zero si besoin.

Je suis en train de me prendre la tete avec mon ajax (car je crois que j'ai completement mal compris l'ajax)
j'utilise prototype comme framework et je bloque sur 1 point :

dans ma page php je crée par exemple : 
dans mon ajax je fais : $('test').innerHTML 'blabla'; (comme ci je voulais faire document.getElementById('test').innerHTML  'blabla'; en javascript) ça ne marche pas et je ne ocmprend pas pourquoi (est ce que c'est $A('test') ou $F('test') ? Je ne sais guère, je ne trouve pas d'excellent tuto pour les nuls en ajax ^^ )

Du coup je suis en train de voir une solution flash/action script

chalex

Chargement page coté navigateur trop long

15 réponses

Votre réponse

Discussions similaires