Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

performance javascript

5 réponses
Avatar
Olivier B.
Salut,
j'élabore un annuaire d'entreprise, plustot que de faire de construire
la page selon les requettes de recherche j'ai décidé de créer toutes
les entées d'annuaire sous forme de layer (300) pour les animer
ensuite au fur et à mesure de ce qui est entré dans les champs nom et
prenom service etc... , les layer venant alors s'empiler pour
constituer la liste des le premier caractere entré, et ceux non
correspondant sortant lors des caracteres suivant, les vides se
comblant par le bas ainsi de suite...

Ce qui est bouclé:
- synthese dans une table de l'export active diyrectory et de
l'annuaire autocom
- creation de la page asp avec un layer par entrée d'annuaire

J'en suis maintenant au stade de l'implementation javascript, je me
pose la question de la performance, est-il plus approprié pour
calculer les layers à afficher de créer un tableau et de travailler
sur ses valeurs ou est-ce que j'obtiendrais les meme perf en le
faisant sur le contenu des layers ?

merci
--
pas de turlututu. apres l'@robase

5 réponses

Avatar
SAM
Olivier B. a écrit :
Salut,
j'élabore un annuaire d'entreprise, plustot que de faire de construire
la page selon les requettes de recherche j'ai décidé de créer toutes
les entées d'annuaire sous forme de layer (300) pour les animer
ensuite au fur et à mesure de ce qui est entré dans les champs nom et
prenom service etc... , les layer venant alors s'empiler pour
constituer la liste des le premier caractere entré, et ceux non
correspondant sortant lors des caracteres suivant, les vides se
comblant par le bas ainsi de suite...

Ce qui est bouclé:
- synthese dans une table de l'export active diyrectory et de
l'annuaire autocom
- creation de la page asp avec un layer par entrée d'annuaire

J'en suis maintenant au stade de l'implementation javascript, je me
pose la question de la performance, est-il plus approprié pour
calculer les layers à afficher de créer un tableau et de travailler
sur ses valeurs ou est-ce que j'obtiendrais les meme perf en le
faisant sur le contenu des layers ?

merci



J'ai rien compris ... qu'est-ce qu'un 'layer' ?

Tu parles là d'auto-complétion dans un champ de texte ?
(à partir d'une liste de mots clés : 300 mots ou 300 listes?)

combien pèse le tableau JS de ces mots ?
ss doute pas beaucoup

<http://groups.google.com/group/fr.comp.lang.javascript/msg/b8d0ca3e1bc76dec?rnum=1>
<http://groups.google.fr/group/comp.lang.javascript/msg/ecfed36c8f308c3b>

--
sm
Avatar
Patrick 'Zener' Brunet
Bonjour.

"Olivier B." a écrit dans le message de news:

j'élabore un annuaire d'entreprise, plustot que de faire de
construire la page selon les requettes de recherche j'ai décidé
de créer toutes les entées d'annuaire sous forme de layer (300)
pour les animer ensuite au fur et à mesure de ce qui est entré
dans les champs nom et prenom service etc... , les layer venant
alors s'empiler pour constituer la liste des le premier caractere
entré, et ceux non correspondant sortant lors des caracteres
suivant, les vides se comblant par le bas ainsi de suite...
[...]



Je crois que je vois le truc... Donc une liste de propositions se filtrant à
chaque frappe de caractère.
Et vous nommez "layer" chaque élement formé d'un nom sur une ligne, dans un
tag HTML et avec un style sans doute.

J'en suis maintenant au stade de l'implementation javascript,
je me pose la question de la performance,



Un peu tard, après le choix précédent...

est-il plus approprié pour
calculer les layers à afficher de créer un tableau et de travailler
sur ses valeurs ou est-ce que j'obtiendrais les meme perf en le
faisant sur le contenu des layers ?




En supposant que votre module de calcul de la liste pertinente est lui-même
efficace, concentrons-nous sur l'aspect graphique:

Vous pouvez modifier dynamiquement le contenu (innerHTML) de votre conteneur
de liste lui-même, en reconstruisant dans un buffer le nouveau contenu et en
le substituant globalement. Il va donc se retracer d'un coup.
Ensuite, chaque ligne de ce contenu peut elle-même contenir un emballage
HTML (un <li> par exemple) qui donnera le style voulu.

Par contre, si vous pensiez à déplacer en JS ces éléments noms un par un
pour les empiler ou les écarter de la liste, à chaque frappe, je pense que
ça va pas être terrible, dans le genre vol de papillons, donc assez
insupportable.

Vous pouvez aussi optimiser un peu en faisant en sorte que la mise à jour de
la liste ne se fasse pas immédiatement mais après une demi-seconde sans
frappe par exemple, prolongeable, afin que l'utilisateur qui tape plusieurs
lettres d'un coup ne soit pas trop perdu.

--
Cordialement.
--
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
Avatar
Olivier B.
On Sun, 23 Mar 2008 17:58:13 +0100, "Patrick 'Zener' Brunet"
wrote:

Je crois que je vois le truc... Donc une liste de propositions se filtrant à
chaque frappe de caractère.



exactement, sauf que les propositions sont faites au travers du
positionnement des layer

Et vous nommez "layer" chaque élement formé d'un nom sur une ligne, dans un
tag HTML et avec un style sans doute.



non un layer est un calque nommé et donc manipulable en javascript,
déplacement caché/visible etc... Chaque layer contient graphiquement
photo/.nom/prenom/telephones/... ce qui consitue la "minifiche" d'une
entrée d'annuaire

J'en suis maintenant au stade de l'implementation javascript,
je me pose la question de la performance,



Un peu tard, après le choix précédent...



ben en dehors du javascript quel autre choix ais-je pour implementer
cette partie coté client ??? sinon si je devais faire marche arriere
c'est trs simple coté asp, mais le produit final perdrait beaucoups
coté animation.

Vous pouvez modifier dynamiquement le contenu (innerHTML) de votre conteneur
de liste lui-même



pas du tout, je veux analyser dynamiquement la frappe et en focntion
de lanalyse afficher les layer corespondants, 2 choix selon les perfs
que j'obseverais:
- 1 jouer sur cache/visible et position afin d'empiler les layers
filtrés
-2 aller un peu plus loin et implementer un moteur animant les layer
selon les positions cibles calculées par le filtre, ainsi par exemple
lorsque l'on ajoute un caractere les layers hors filtre sortent par la
gauche et ceux restant remontent pour reconstituerla pile.

Par contre, si vous pensiez à déplacer en JS ces éléments noms un par un
pour les empiler ou les écarter de la liste, à chaque frappe, je pense que
ça va pas être terrible, dans le genre vol de papillons, donc assez
insupportable.



je pense gérer un timer pour attendre 1/2 secondes apres la saisis de
la derniere touche afin de ne pas recalculer en permanence, quand à
l'effet "papillon" il faudra voir ce que cela donne...

Vous pouvez aussi optimiser un peu en faisant en sorte que la mise à jour de
la liste ne se fasse pas immédiatement mais après une demi-seconde sans
frappe par exemple, prolongeable, afin que l'utilisateur qui tape plusieurs
lettres d'un coup ne soit pas trop perdu.



ha ben... heu... promis j'avais pas lu avant de proposer la meme chose
:-)
--
pas de turlututu. apres l'@robase
Avatar
SAM
Olivier B. a écrit :
On Sun, 23 Mar 2008 17:58:13 +0100, "Patrick 'Zener' Brunet"
wrote:

exactement, sauf que les propositions sont faites au travers du
positionnement des layer



oui, bon, une fois qu'on a fait la liste des layers (qui ont même id que
le nom tenté d'être entré) et réalisé le truc de tri-sélections, il n'a
plus qu'à activer la fonction de bougeage.

Et vous nommez "layer" chaque élement formé d'un nom sur une ligne, dans un
tag HTML et avec un style sans doute.



non un layer est un calque nommé et donc manipulable en javascript,
déplacement caché/visible etc... Chaque layer contient graphiquement
photo/.nom/prenom/telephones/... ce qui consitue la "minifiche" d'une
entrée d'annuaire



??? et il y a 300 de ces fiche-div-layer ?
toutes avec photos étoussa ...

à charger d'entrée ? ! ! !
environ 6 à 9 Mo ! ?

avec ou sans streaming ?

en RTC ? ADSL 512 ?

je veux analyser dynamiquement la frappe et en focntion
de lanalyse afficher les layer corespondants, 2 choix selon les perfs
que j'obseverais:
- 1 jouer sur cache/visible et position afin d'empiler les layers
filtrés



Déjà c'est pas mal
(il y a une limitation du nbre de layers visibles je suppose).
Ça doit être quasi immédiat (si on a l'array des noms).

-2 aller un peu plus loin et implementer un moteur animant les layer
selon les positions cibles calculées par le filtre, ainsi par exemple
lorsque l'on ajoute un caractere les layers hors filtre sortent par la
gauche et ceux restant remontent pour reconstituerla pile.



Ça semble assez joli.

C'est pour un ordi de 5Go de RAM et 4Ghz + processeur quadri-coeur non ?
avec écran 32 pouces

tu as oublié le fadding ... !

Je t'engage déjà à essayer avec le cache désactivé pour voir un peu le
temps que ça met à charger (sur un Pentium 500).

je pense gérer un timer pour attendre 1/2 secondes apres la saisis de
la derniere touche afin de ne pas recalculer en permanence, quand à
l'effet "papillon" il faudra voir ce que cela donne...



la 1/2 seconde va suffire à bouger-glisser d'1 côté de l'autre tout le
st frusquin ?

Je suppose que les layers sont cliquables pouur qu'ils remplissent le
champ ?

--
sm
--
sm
Avatar
Olivier B.
On Mon, 24 Mar 2008 16:27:02 +0100, SAM
wrote:

exactement, sauf que les propositions sont faites au travers du
positionnement des layer



oui, bon, une fois qu'on a fait la liste des layers (qui ont même id que
le nom tenté d'être entré) et réalisé le truc de tri-sélections, il n'a
plus qu'à activer la fonction de bougeage.



ça je sais faire à l'aise :-)

non un layer est un calque nommé et donc manipulable en javascript,
déplacement caché/visible etc... Chaque layer contient graphiquement
photo/.nom/prenom/telephones/... ce qui consitue la "minifiche" d'une
entrée d'annuaire



??? et il y a 300 de ces fiche-div-layer ?
toutes avec photos étoussa ...

à charger d'entrée ? ! ! !
environ 6 à 9 Mo ! ?

avec ou sans streaming ?

en RTC ? ADSL 512 ?



en intranet 100Mb infra gigabit car c'est un annuaire d'entreprise
intranet, d'ou cette liberté que je peux prendre d'alourdir le coté
client :-)

je veux analyser dynamiquement la frappe et en focntion
de lanalyse afficher les layer corespondants, 2 choix selon les perfs
que j'obseverais:
- 1 jouer sur cache/visible et position afin d'empiler les layers
filtrés



Déjà c'est pas mal
(il y a une limitation du nbre de layers visibles je suppose).
Ça doit être quasi immédiat (si on a l'array des noms).



je pense

-2 aller un peu plus loin et implementer un moteur animant les layer
selon les positions cibles calculées par le filtre, ainsi par exemple
lorsque l'on ajoute un caractere les layers hors filtre sortent par la
gauche et ceux restant remontent pour reconstituerla pile.



Ça semble assez joli.

C'est pour un ordi de 5Go de RAM et 4Ghz + processeur quadri-coeur non ?
avec écran 32 pouces



bah heu, en moyenne on est en 1024*768, les machines les moins
"chanceuses" sont des p4 2Ghz/768Mo

tu as oublié le fadding ... !



beuh, oui, c'est quoi ???

Je t'engage déjà à essayer avec le cache désactivé pour voir un peu le
temps que ça met à charger (sur un Pentium 500).



j'ai pô ;-)

je pense gérer un timer pour attendre 1/2 secondes apres la saisis de
la derniere touche afin de ne pas recalculer en permanence, quand à
l'effet "papillon" il faudra voir ce que cela donne...



la 1/2 seconde va suffire à bouger-glisser d'1 côté de l'autre tout le
st frusquin ?

Je suppose que les layers sont cliquables pouur qu'ils remplissent le
champ ?



heu, non pas prévu, le layer est l'information finale, il sera
clicable pour entrer en edition dans l'annuaire pour ceux qui ont les
droits

meci pour les réponses, j'attaque demain et compte procéder ainsi:

creation en asp:
- des n layers
- d'un tableau javascript par donnée à trier, prenom[n] /nom[n])

Coté client le javascript fera le tri sur les valeurs du tableau et
sortira les valeurs du tableau à sortir, en fonction de cela les
layers de rang n seront activé ou pas et un moteur de positionnement
fera le reste.

Je verrais bien ce que ça donne et si jamais j'essaierais de poster un
exemple quelque part.

A+



--
pas de turlututu. apres l'@robase