Discussion :

[Couin]

Couiiiin ! Hello !

Une page index.php avec une partie haute ou dira des boutons de menu, et en dessous une div conteneur, servant à afficher les résultats, appelés via une requête AJAX.

Tout fonctionne mais pour un des menus, la requête est assez longue.
En effet, les infos générées sont sous forme d'une liste de titres, dont on regarde combien de fois ils ont été inscrit en tant que programmation normale dans la table "playlist", combien de fois ils ont été inscrits en tant que bonus, leur bpm, durée, et bac (style musical).
La table a les colonnes suivantes :

id (on dira numéro de ligne, en auto-incrément).
titre
bpm
duree
bac
bonus

mais aussi les colonnes suivantes, non utilisées dans la requête :

partie (l'émission se fait en général en 2 parties).
track (numéro de piste de l'émission).
theme (Thème de l'émission, par exemple une spéciale remixes, etc etc)
datepl (date de la playlist)
ep (épisode, pour numéro chaque émission)

Chaque colonne est indexée.

La table a actuellement quelque chose comme un peu plus de 1800 lignes.

Voici la requête :

Code sql :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
SELECT id, bac, duree, bpm, titre AS titrecnt,
(SELECT COUNT(id) FROM playlist WHERE titre LIKE titrecnt AND bonus = 0) AS pl,
(SELECT COUNT(id) FROM playlist WHERE titre LIKE titrecnt AND bonus = 1) AS bonus
FROM playlist GROUP BY titre ORDER BY titre ASC

Il faut compter une dizaine de secondes afin que les premières données commencent à s'afficher, et environ 5 secondes supplémentaires pour que la page soit vraiment disponible (prête à effectuer d'autres opérations sur la liste de résultats). Bon c'est un peu long donc du coup je mets un gif animé en tant que loader, sous forme de div cachée dans la page index et que j'affiche avant la requête AJAX.

Le souci c'est que le gif animé freeze et au bout d'une dizaine de secondes, j'ai un message de firefox "Une page web ralenti le navigateur blablabla".
Ca fini par se débloquer et les données apparaissent, mais je ne sais pas comment éviter ca.

Le serveur est un Xeon 3 GHz en linux , habituellement très rapide (bien plus que WAMP Server à l'époque sur la même machine) avec 4 Go de RAM, le poste client est un i3 3,3 GHz avec 8 Go de RAM.

La fonction javascript (simplifiée) appelée par le bouton pour lister les titres :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
												// Statistiques
function stats(sortbyfield,sortbyorder) {
		document.getElementById('playlistdatas').style.display = 'none';              // div où sont affichée les données
		document.getElementById('divchargement').style.display = 'inline';              // div pour afficher le loader avec le gif animé
		$.ajax({
		type: 'POST',
		url: 'stats.php',
		data: {sortbyfield:sortbyfield, sortbyorder:sortbyorder },
		success: function(data){
		$("#playlistdatas").html('');
		$('#playlistdatas').append(data);	
		document.getElementById('divchargement').style.display = 'none';
		document.getElementById('playlistdatas').style.display = 'inline';
		}	
    });	
}

La page stats.php contient en autres , la requête citée en début de post.

Y a-t-il une manière plus propre et surtout moins gourmande de faisable ?

Merkouin

[SpaceFrog]

Tu pourrais utiliser un plugin comme DataTable et sa pagination efficace...

[Couin]

Merci je vais regarder ça, bien que ca n'a pas l'air simple à mettre en oeuvre

[Couin]

Hello,

Je suis parvenu à adapté le script Datatables.

Dans un premier temps, les données apparaissent sous forme de tableau basique et une fois toutes les données chargées, le tableau Datatables prends forme.

Ceci dit l'affichage final est un peu p,nus rapide qu'avant, c'est déjà un bon pouint.

J'ai donc ajouté une petit modif au fichier jquery.dataTables.js pour que :
- la div où il y a
- la div dans laquelle le tableau est affiché, ne devienne visible qu’une fois le tableau mis en forme finale.

Cependant, le gif animé freeze entre le moment où les données commencent à charger et le moment où le tableau s'affiche.

En gros, les étapes se résument à :

- Clic sur le bouton pour déclencher la récupération des données
- Masquage de la div d'affiche des données
- Affichage de la div du gif animé
- Freeze 1 ou 2 secondes du gif animé au bout de quelques secondes d'animation
- Masquage de la div du gif animé
- Affichage de la div contenant le tableau des résultats.

Je pense que le gif freeze pendant que le navigateur est occupé à mettre en place le tableau généré par le script de Datatables.

Y a-t-il un moyen de forcer JS/JQuery a ne pas utiliser toutes les ressources du poste client, afin d'en laisser un peu pour laisser le gif s'animer ?

MErkouin