Ralentissement important au bout de quelques lignes.

Salut,

En faisant des tests (sur un petit éditeur) j'ai remarqué un ralentissement important de l'affichage...

Par exemple quand j'enfonce la touche entrée et que je la maintiens enfoncée, des lignes s'ajoutent à une certaine vitesse, au début (quelques centaines de lignes) l'affichage se fait bien, on voit les numéros des lignes défiler régulièrement mais au bout d'un certain nombre de lignes l'affichage se fait par à-coups : parfois pendant un temps le défilement ralenti fortement voir s’arrête carrément puis après un laps de temps l'affichage se fait d'un coup...

C'est assez désagréable...

Je constate cela sur Chrome et sur FF ---> apparemment le traitement de chaque touche enfoncée est trop long..

Alors j'ai fait un autre test avec un code réduit juste pour voir ici : jsbin...

Sur FF ça à l'air d'aller (je suis allé jusqu'à plus de 5000 lignes) mais sur Chrome j'observe toujours ce ralentissement pourtant le code n'est pas énorme...

Vous pouvez tester ici jsbin : maintenez (dans la div éditable à droite) la touche entrée enfoncée pour afficher rapidement des nouvelles lignes...

Auriez-vous une idée qui expliquerait ce ralentissement (si toutefois vous le constatez vous aussi...) ?

Merci.
Modifié par Beginner (26 Aug 2017 - 23:13)

Bonjour Beginner,
J'ai fait le test en question, mais je n'ai pas constaté de ralentissement. Je suis aussi sur Chrome pourtant.

Au niveau du code de l'application :

function ajustNum() {

    var divNum = document.createElement("div");
    
    divNum.className = "numline";
    divNum.innerHTML = num.childElementCount + 1;
    num.appendChild(divNum);

    num.scrollTop += 20;
}

Peut-être que c'est un peu trop long de créer un nouveau div à chaque événement. As-tu déjà essayé d'afficher certains div (les 100 premiers) masqués au chargement de la page, puis simplement de les passer en visible lors de l'appuie sur la touche entrée ?

Salut,
Merci pour la réponse et désolé pour le retard je ne pensais pas qu'on me répondrait...

LearningBoy a écrit :
J'ai fait le test en question, mais je n'ai pas constaté de ralentissement. Je suis aussi sur Chrome pourtant.

Ah bon ? Peut-être que tu as un PC plus performant que le mien ?

Par exemple si je tape (rapidement ou en laissant une touche enfoncée) du texte à la ligne 11000 eh bien il s'affiche par à-coups (mot par mot) or en général (dans les éditeurs classiques) il s'affiche d'une manière fluide caractère par caractère... Il n'est pas normal qu'il y est un temps de réponse aussi important...

Tu n'as pas ce problème non plus ?

J'ai fait un autre teste (voici le code : ici), on peut ajouter des lignes de trois manières pour comparaison :

1- En tapant (dans la div éditable à droite) sur la touche "entrée" (rapidement ou en laissant la touche enfoncée)...
2- En cliquant sur le bouton "add line" - start/stop - (ajoute des lignes à une certaine vitesse).
3- En cliquant sur le bouton "+500" ---> cela ajoute 500 lignes d'un coup). ATTENTION pour le 3 : Il faut tester en dehors de jsbin car il limite apparemment... Pour cela on peut faire File--> Download pour ouvrir le code dans le navigateur de son choix...

Merci.
Modifié par Beginner (28 Sep 2017 - 21:43)