Je suis en train de créer un template d'animation de texte. Une sous-étape de mon template consiste à générer des caractères aléatoires et les afficher à l'écran chaque dixieme de secondes, ce qui m'a pris 5 heures dans le contexte ou j'essaie de faire quelque chose de flexible. Je souhaite avoir des retours sur ce que je peux améliorer à propos de mon code, commencer à envisager une meilleure performance.
1. Ton code est beaucoup trop complexe pour une tâche aussi simple, tu as beaucoup trop de fichiers.
Presque toute tes fonctions ne font qu'une ligne, c'est inutile.
2. Prend note que le fait de chainer un setTimeout, ça ne comprends pas le temps d'execution.
Un petit log du temps que ça met entre chaque nouvelle lettre:
char_controller.js:14 Call: 108.98876953125 ms
char_controller.js:14 Call: 109.97607421875 ms
char_controller.js:14 Call: 109.2109375 ms
char_controller.js:14 Call: 111.869140625 ms
char_controller.js:14 Call: 109.498046875 ms
char_controller.js:14 Call: 109.68994140625 ms
char_controller.js:14 Call: 110.798095703125 ms
char_controller.js:14 Call: 107.93017578125 ms
char_controller.js:14 Call: 110.19189453125 ms
char_controller.js:14 Call: 101.614990234375 ms
char_controller.js:14 Call: 101.2021484375 ms
char_controller.js:14 Call: 109.0380859375 ms
char_controller.js:14 Call: 109.322998046875 ms
Donc ce n'est pas "exactement" un dixieme de seconde (c'est chipoter un peu, mais c'est pour te pointer ce qu'il se passe, que c'est jamais vraiment exact).
3. Les appels récursifs dont la profondeur n'est pas contrôlée peuvent faire crash ton app:
`randomLetterLoop` se call lui même à l'infini donc ça finit par exploser la stack au bout d'un moment.
Tu peux tester en réduisant ton setTimout à 0.
4. Tu faits beaucoup trop d'instances de classes
A chaque tour de boucle tu réinstancies ta classe `RandomCharModel` par exemple, alors qu'elle est inutile. Tu as de la chance que le moteur javascript clean la mémoire automatiquement (cherche Garbage Collector sur le net).
5. Tu obtiens souvent des charactères non affichable
Tu devrais peut être faire la liste des caractères que tu souhaites et piocher au hasard dedans pour éviter de faire des conditions sur chaque char non affichable.
6. Voilà à quoi devrait ressembler ton code
//Build <p> div and add it to the body
const htmlP = document.createElement('p');
document.querySelector('body').appendChild(htmlP);
//Change random char every 100ms
const availableChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+[]{}|;:,.<>?';
setInterval(() => {
htmlP.innerText = availableChars[Math.floor(Math.random() * availableChars.length)];
}, 100);
- Edité par Anonyme 8 juillet 2024 à 11:49:22
[JS] Dynamic Letters Code Kata
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
