[RESOLU] Affichage de très gros texte

par **Naroth** » 03 août 2016, 12:52

Bonjour,

J'ai trouvé la source du problème : javaScript (Jquery dans mon cas)

En enlevant tous les scripts Jquery le temps de chargement sous Chrome se trouve sous la barre des 5 secondes
Les scripts en question ne servant que dans la barre de menu.

Après recherche sur les moteurs de Chrome et de Mozilla je suis tombé sur un mini-Benchmark, mettant en lumière la différence de temps entre le selecteur par id ou par class

Le Benchmark ci-dessous lance la recherche par selecteur 20000 fois avant de donner le temps d’exécution de cette recherche

Code : Tout sélectionner

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                startTime = new Date().getTime();               
                for (i = 0; i < 20000; i++)
                {
                    s = $(".someclass");
                }           
                $("#class").html(elapsedMilliseconds(startTime));


                startTime = new Date().getTime();
                for (i = 0; i < 20000; i++)
                {
                    s = $("#somecontainer");
                }           
                $("#id").html(elapsedMilliseconds(startTime));

            });

            function elapsedMilliseconds(startTime)
            {
                var n = new Date();
                var s = n.getTime();
                var diff = s - startTime;
                return diff;
            }
        </script>
    </head>
    <body>
        <h1>jQuery Selector Performance: Context vs No Context</h1>

        <h2>$(".someclass")</h2>
        <span id="class">---</span> ms<br /><br />

        <h2>$("#somecontainer")</h2>
        <span id="id">---</span> ms<br /><br />

        <hr />

        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <div id="somecontainer">
            <p class="a">a</p>
            <p class="b">b</p>
            <p class="c">c</p>
            <p class="someclass">someclass</p>
        </div>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
    </body>
</html>

Mes résultats :

Firefox
$(".someclass") - 79 ms
$("#somecontainer") - 32 ms

Chrome
$(".someclass") - 115 ms
$("#somecontainer") - 15 ms

1 - Le sélecteur par ID est beaucoup plus rapide car le moteur s'arrête dès qu'il a trouvé l'ID
2 - Le sélecteur par class lui va jusqu’à la fin du fichier pour trouver toutes les classes correspondantes

Cause :
Affichant plus de 20K lignes avec plusieurs classes la quantité de code à analyser pour les moteurs javascripts est relativement grande.
En combinant la taille du code plus le fait que Chrome soit plus lent dans la recherche par class que Firefox c'est sans surprise que Chrome paraît plus lent.

Solution :
J'ai donc choisis de supprimer tous le JS sur cette page. En faisant ainsi le temps de chargement est sous la barre des 5 secondes

par **Naroth** » 02 août 2016, 15:51

Ok, après plus d'investigation (test sur différentes machines / navigateurs)

Le problème semble venir de Chrome qui met 40 s contre 5s à 10s pour Mozilla suivant la machine.
Cependant je ne m'explique pas cette différence de temps.

par **or 1** » 02 août 2016, 15:42

voir aussi quelque chose comme http://stackoverflow.com/questions/2535 ... of-a-table
pour diminuer la taille du html généré, tout en conservant les styles des colonnes.

par **Naroth** » 02 août 2016, 15:35

L'affichage est le plus long.
La génération de l'array prendre moins d'une seconde

De plus impossible de mettre en cache, la liste des fichiers n'est jamais la même
Ce que j'ai oublié de dire c'est que cette liste de fichier est remontée par une api (JSON)

par **or 1** » 02 août 2016, 15:35

voir une table de 22000 lignes, mais qui ne s'affiche pas d'un coup :
http://www.kikourou.net/resultats/resul ... -2015.html
cela peut être une piste si le rendu est bien plus rapide que 40s.

par **Spols** » 02 août 2016, 15:33

La mise en place d'un cache est il envisageable ? la liste change t elle souvent ?

As tu cherché quelle partie du script met le plus de temps, la création de la liste ou son affichage ? ainsi tu peux voir où placer ton cache, ne peux t on pas updater la liste en cherchant que les fichiers modifié récemment ?

par **Naroth** » 02 août 2016, 15:26

Bonjour,

A l'heure actuelle j'affiche une liste de fichiers dans une table HTML, cela marche parfaitement.

code :

Code : Tout sélectionner

<?php 
echo "
		<span id='newfile' class='anchor'></span>
		<div class='box'>
			<table>
				<caption class='title_success'><span> Nouveaux fichiers </span></caption>
				<tbody>
					<TR>
						<TH class='table_th'><span>Dernière modification</span></TH>
						<TH class='table_th'><span>Nom</span></TH>
						<TH class='table_th'><span>Taille fichier</span></TH>
						<TH class='table_th'><span>Taille fichier non zippé</span></TH>
						<TH class='table_th'><span>Ratio</span></TH>
					</TR>
			";
					foreach($NewFile as $newFiles){
						echo "<TR>";
							//Supprime les dates sans modifications
							if (strcmp($newFiles['LastModified'],"1970-01-01 01:00:00")) 
							{
								echo "<TD class='td_last_date'>".$newFiles['LastModified']."</TD>";
							} 
							else
							{
								echo "<TD class='td_last_date'></TD>";
							}
							echo "<TD clas	s='td_name'>".$newFiles['Name']."</TD>";
							echo "<TD class='td_file_size'><strong>".formatBytes((float)$newFiles['FileSize'])."</strong> (".$newFiles['FileSize'].")</TD>";
							echo "<TD class='td_unzip_size'><strong>".formatBytes((float)$newFiles['UnzipFilesSize'])."</strong> (".$newFiles['UnzipFilesSize'].")</TD>";
							echo "<TD class='td_ratio'>".$newFiles['Ratio']."</TD>";
						echo "</TR>";
					}
			echo "</tbody>
			</table>
		</div>";
	?>

--

Le soucis intervient quand la liste des fichiers contient grosso modo 20.000 lignes

Code : Tout sélectionner

count($NewFile) = 17234

a ce moment la page met environ 40 secondes pour se charger (et surtout pour rendre la main proprement à l'utilisateur)

Ma question est donc la suivante : est-il possible de réduire ce temps ?

J'ai déjà essayé la solution suivante en vain :
- http://wonko.com/post/seeing_poor_perfo ... _heres_why

Si quelqu'un à une idée, je suis preneur.

[RESOLU] Affichage de très gros texte

Répondre

Étendre la vue Revue du sujet : [RESOLU] Affichage de très gros texte

Re: Affichage de très gros texte

Re: Affichage de très gros texte

Re: Affichage de très gros texte

Re: Affichage de très gros texte

Re: Affichage de très gros texte

Re: Affichage de très gros texte

Affichage de très gros texte