Ajax vs mémoire navigateur

Version imprimable

03/06/2015, 10h26
frolij

Ajax vs mémoire navigateur

Bonjour, je suis confrontée à un problème de stockage de mémoire du navigateur (je suis obligée d'utiliser IE...) trop important lorsque ce dernier doit afficher 24h/24 un dashboard, affichant plusieurs petites "boites" appelées en ajax.
Ces boites sont rafraîchies toutes les 20 secondes, les unes à la suite des autres.
Y a-t-il un autre moyen de libérer cette mémoire que de rafraîchir la page une fois par jour ?

Merci de votre aide !
12/06/2015, 12h14
Arno_94

Salut,

A la lecture de ton post, je crois comprendre qu'une techno pourrait bien t'aider, il s'agit de SignalR.

Apparemment, tu as un dashboard que tu souhaites tenir à jour le plus possible et par conséquent tu fais probablement des appels ajax toutes les n secondes.

SignalR te permet de faire du push, c'est à dire que ce n'est qu'à partir du moment où il y a un vrai changement que le contrôle ou la page se rafraîchit.

Cela dit, ça n'expliquerait pas la conso mémoire.

Pourquoi la conso augmente, sans code, difficile à dire mais par expérience, il se peut que ta page html grossit toutes les n secondes.

Typiquement, si ta requête te remonte un changement, je suppose que tu l'affiches. C'est souvent dans cette fonction d'affichage que des choses pas très propres se passent. L'erreur qui revient souvent est d'injecter des contrôles HTML dans la page sans prendre la peine de supprimer ceux qui étaient là avant. A l'arrivée, ta page peut devenir monstrueuse.

Après, ça peut venir d'ailleurs. Que font ces fameuses requêtes ? Que deviennent les données remontées toutes les 20 sec ? impossible de savoir sans le code. Une autre erreur qui revient souvent, lorsqu'il s'agit de remonter des collections par exemples, est d'instancier une nouvelle collection à chaque appel. Il convient d'utiliser la même. Si tu as des besoins de comparaison à faire, tu en gardes 2 en permanence et c'est tout (une que tu appelles oldCollection et l'autre newCollection, la new devenant old à chaque nouvel appel).

N'hésite pas à poster du code.

Bon courage.

Merci arno_94 pour ta réponse :-)

En effet, j'appelle toutes les 20 secondes plusieurs petites pages html via ajax. Voici un extrait de la fonction JS qui est lancée toutes les 20 secondes:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
function afficherTB(){
        goPageS('GMAO_afficherTB.aspx?ouvert=True&stat=1','divdemande');
        setTimeout("goPageS('GMAO_afficherOI.aspx?statut=2','div_oi_ouvert')", 1000); 
        setTimeout("goPageS('GMAO_afficherOI.aspx?statut=3','div_oi_encours')", 2000); 
        setTimeout("goPageS('GMAO_afficherREE.aspx?histo=False','divree')", 3000);   
    }
 
function goPageS(url,div)
          {                      
                xhr = createXHR();                          
 
                xhr.open("POST",url,true);                
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send();           
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4 && xhr.status == 200)
                    {
                        var e = document.getElementById(div);
                        e.innerHTML = xhr.responseText;                        
                        var scripts = e.getElementsByTagName('script');
                        for(var i=0; i < scripts.length;i++)
                        {
                            if (window.execScript)
                            {
                                window.execScript(scripts[i].text.replace('<!--',''));
                            }
                            else{
                                window.eval(scripts[i].text);
                            }
                        }
                    }
                }                                                                                                                  
            }
function createXHR() 
{
    var request = false;
    if(window.XMLHttpRequest) 
       request = new XMLHttpRequest(); 
    else if(window.ActiveXObject){  
       try {
                  request = new ActiveXObject("Msxml2.XMLHTTP");
              } catch (e) {
                  request = new ActiveXObject("Microsoft.XMLHTTP");
              }
    }
    else { 
       alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
       request = false; 
    } 
    return request;
}

et voici ce que peut afficher une des pages html:

Code:

1
2
3
4
5
6
7
8
9
10
11
 
    <table class='tabBoxVert' style='padding-top:5px; width: 144px; height: 105px;'>
        <tr>
            <td style='height: 57px'>
                <span class='elemBox'>4</span>
            </td>
        </tr>
        <tr>
            <td class='arret'>dont 1 avec arrêt</td>
        </tr>
    </table>

Ce sont des pages assez légères au final. Le contenu des div de la page principale est donc rafraîchi toutes les 20 secondes par du contenu "à jour".

merci de ton aide :)

16/06/2015, 15h17
Arno_94

Salut,

Bon, c'est pas super optimisé tout ça mais bon, pourquoi pas.

Dans un premier temps, tu utilises Js "classique" pour les HTTPrequest. N'hésite pas à passer par un framework type jQuery. Il propose des wrappers très sympas à utiliser pour les requêtes Ajax.

Bref, revenons à ton code.

Parmi les petites améliorations, je pense que tu devrais délaisser les variables locales pour des variables globales.
xhr, e, scripts pourraient être déclarés globalement, tu utiliserais ainsi toujours les mêmes "objets" (ce ne sont pas vraiment des objets au sens propre du terme d'où les guillemets).

Comme j'utilise jQuery, ça fait un bail que je n'ai pas manipulé xhr. Je me demande s'il est nécessaire à chaque itération de faire un Create (peut-être que oui, c une question).

Par contre, toujours dans goPage, tu t'abonnes à l'événement onreadystatechange. Là encore, pour peu que tu réutilises le même objet, il ne devrait pas avoir besoin de se réabonner à chaque itération.

Enfin, je ne sais pas trop comment se comporte le garbage collector lorsqu'on appelle des aspx comme ça via javascript toutes les n secondes. Est-ce que les pages sont correctement "disposées" ? Je ne sais pas trop mais si la conso mémoire explose, il n'est pas impossible que oui.

Je ne sais pas trop pourquoi tu appelles ces quatre pages mais ne pourrais tu pas plutôt passer par un webservice ou un handler qui te renverrait une chaine HTML à intégrer dans tes divs plutôt que d'instancier des pages ASPX ?

Bon courage

salut,

bon en fait c'était tout bête, comme d'habitude .... :evilred:

il suffisait d'utiliser la méthode GET et de vider la cache ...
Code:

1 2 3 4 5 6 xhr.open("GET",url,true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.setRequestHeader('Cache-Control', 'no-cache'); xhr.setRequestHeader("Pragma", "no-cache"); xhr.send();
Code:

1 2 var url1 = "page.aspx?nocache=" + Math.random();
c'est énervant quand c'est aussi simple ......

merci quand meme pour ton aide :)