Discussion :

[rockt13]

Bonjour,
j'ai mis sur mon site la navigation en ajax en faisant comme ceci:

html:

Code html :

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

<a href="url" class="ajax"> Lien1 </a>

javascript:

Code :

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

1
2
3
4
5
6
7
8
        $(".ajax").bind("click",function(){
            var url=$(this).attr('href');
            $.get(url,{},function(data){
 
                $(".content").empty().append(data);
                history.pushState(null,null,url);
           }
          }

Ca a tjrs trés bien fonctionné.
Mais depuis quelque temps maintenant, mes requêtes sont systématiquement bloqué 5000ms à la réception. Quelque soit le type de page, ça coince toujours au même endroit...auriez vous une idée??

Merci par avance

[NoSmoking]

Bonjour,

Quelque soit le type de page, ça coince toujours au même endroit.

Certes mais lequel ?

Comme tu utilises un lien, <a>, pour lancer ta commande, il te faut inhibé le comportement par défaut de celui-ci

Code :

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

1
2
3
$(".ajax").bind("click",function(event){
    // inhibe le comportement par défaut
    event.preventDefault();

peut-être même que ton history.pushState(null,null,url) ne servira plus à rien.

[rockt13]

Bonjour
ça coince systématiquement sur la réception avec un délai toujours proche de 5 secondes

[Invité]

Bonjour,

1-.bind() est déprécié. Il faut utiliser .on().

2- .empty().append(...) : si on veur juste remplacer par du code html, .html(...) convient et suffit.

Donc :

Code :

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

1
2
3
4
5
6
7
8
	$("a.ajax").on("click",function(event){
		event.preventDefault(); // inhibe le comportement par défaut
		var url = $(this).attr('href');
		$.get(url,{},function(data){
			$(".content").html(data);
			history.pushState(null,null,url);
		}
	}

N.B. ".content" : si c'est un conteneur UNIQUE, il vaudrait mieux utiliser un id.

[rockt13]

Salut,
merci j'ai fait les changements .on(), html() et preventDefault()

Par contre ça ne change rien au niveau de la réception

[Invité]

Comme on ne sait rien du fichier importé, on ne peut rien dire de plus.

[rockt13]

Le fichier importé n'a rien de particulier,
ça le fait sur n'importe quelle page du site, ça à toujours trés bien fonctionné et du jour au lendemain la navigation est devenu bloqué 5 secondes.

Sachant qu'en local ça fonctionne trés bien, j'ai pas ce deadlock.

Voici par exemple une vue que je charge en ajax:

Code :

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
17
18
19
20
21
22
 
<?php 
$points=0.0;
 ?> 
 
<div class="row">
 
  	<div class="col-md-6">
  		<div class="panel panel-warning" >
			<div class="panel-heading">Informations</div>
 
			<p style="padding:5px;">Vous devez avoir suffisamment de points dans votre cagnotte pour pouvoir remonter des annonces. Vous avez actuellement <span class='text-info' style='font-weight: bold;'><?php echo $points; ?> points </span> dans votre cagnotte.
			</p>
 
			<p style="padding:5px;" class="text-warning">
				<strong>Attention: </strong> blablabla mon texte
			</p>
 
		</div>
	</div>
 
</div>

[Invité]

Teste avec $.post() au lieu de $.get().

Sinon, je ne vois pas.

[rockt13]

Je viens de tester en post() ça ne change rien..

[NoSmoking]

Sachant qu'en local ça fonctionne trés bien, j'ai pas ce deadlock.

Pourrais tu mettre un exemple en ligne pour que l'on juge.

[rockt13]

Voila en local:

[NoSmoking]

Je parlais d'un lien en ligne accessible pour que l'on puisse se rendre compte du délai de réponse sur ton serveur.

[rockt13]

Bonsoir,
Il m'est difficile de donné l'accès à un site qui nécessite une authentification , par contre j'ai fait une petite vidéo

[Toufik83]

Salut,
Tu ne vois pas d'erreur dans la console ? parce qu'il manquent des parenthèses de fermeture ligne 7 et 8 de ton premier post

Code :

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

1
2
3
4
5
6
7
8
9
 
$(".ajax").on("click",function(e){
      e.preventDefault();
      var url=$(this).attr('href');
       $.get(url,{},function(data){
            $(".content").empty().append(data);
            history.pushState(null,null,url);
       });//ici
});//et ici

[rockt13]

Bonsoir,
c'était juste un pb de copier/coller, non je n'ai pas d'erreurs dans la console.

En revanche je me suis rendu compte que même sans passer par ajax, j'obtiens ce délai de chargement tjrs de l'ordre de 5 secondes même pour des vues qui n'affichent que du statique. J'ai un peu monitoré tout ça et on s’aperçoit qu'il y a 3.6 secondes d'iDLE.




Ici on s’aperçoit que tout est chargé du cache donc presque instantanément et la page met quand même 5 secs à charger.



Avez-vous une idée ?

[Toufik83]

utlises-tu des script js dans ta page ?
Si oui, essaie de les mettre en bas de la page, juste avant la fin de body et refais le teste.

[rockt13]

Oui j'en utilise plein, qui sont déja en bas de page juste avant le </body>

[Toufik83]

Vérifies bien qu'il n'y a pas de script qui s'exécute en mode synchrone. parce que d'après ton dernier post, c'est la partie "scripting" qui met trop de temps à se charger.

Essaies aussi de commenter les scripts un par un, puis tu fais le teste afin de déterminer quel est le script qui pose problème.

[rockt13]

Malgré le fait qu'ils soient tous chargés du cache en 0ms, il est possible que ça provienne d'un script ? il y aurait donc distinction entre temps de chargement et temps d’exécution ?

[Toufik83]

Je ne sais pas si je dis n'importe quoi, mais je pense qu'il y a une différence quand même entre "chargement" et "exécution" d'un script js.

Si un expert pourra nous éclairer, ce serai gentil.

Regarde un peu ce lien, il peut t'aider.

Il y a aussi des outils en ligne qui permettent d'analyser les performances de ton site s'il est en ligne comme PageSpeed Insights et DareBoost.