Discussion :

[olivierPa]

Bonjour,

Je suis un nouvel adepte de JS. Cela m'ouvre des presepectives assez interessantes (notamment par rapport au php). Par contre, je suis surpris par sa lenteur meme pour un langage non compile.

Par exemple, dans un de mes premiers script, mon code JS
genere un tableau (dont le nombre de colonnes depend d'un parametre).
On peut quasiment voir les colonnes se creer une a une ! (bon, j'exagere,
mais je pensais que ce serait tellement instantanee qu'on n'aurait pas le temps de percevoir la page contenant le tableau vide avant construction
des colonnes).

D'ou ma question:
Quelles sont les bonnes pratiques pour optimiser un code JS ?
Quelles sont les commandes a eviter (ou tout du moins dont il ne faut pas abuser) ?
Est-ce que ce probleme de lenteur est specifique a la manipulation de l'arbre DOM ? Dans ce cas, concerne-t-il tous les types de manipulations (creation/suppression/deplacement d'un noeud) ?

Bon, c'est un peu vaste comme debat, mais j'aimerais bien profiter de votre experience dans ce domaine...

Olivier.

[Auteur]

bonjour,

ton tableau a combien de lignes et de colonnes ?
Peux-tu nous montrer ton code ?

[olivierPa]

Euh... 18 colonnes 3 lignes.

Le tableau et les 3 lignes sont deja dans le code html.
Je rajoute les noeuds td un a un apres que la page ait ete chargee.
(bon c'est surement pas optimal, car on doit pourvoir dupliquer les noeuds plutot qu'en creer de nouveaux a chaque fois... mais j'ai pas essaye).

[emmanuel.remy]

Salut,

Effectivement peux tu passer ton code ?
En matière de création de HTML à la volée, 2 possibilités: soit tu passes par le DOM comme je suppose tu le fais, et alors diverses optimisations et règles d'utilisations sont envisageables, soit tu crées le code HTML sous la forme d'une chaine et tu l'injectes dans ta page via la propriété innerHTML des objets.

En matière de test de performances tu trouveras d'excellentes infos ici.

ERE

[le_chomeur]

une contribution ici :

http://www.developpez.net/forums/d47...us-rapidement/

[olivierPa]

Dans l'optique de vous presenter un code lisible, je l'ai debarassé de tout ce qui etait superflu pour ne conserver que la partie creation du tableau... et suprise quand je teste le script (sans rien d'autre), ca fonctionne comme je l'attendais: on ne percoit pas le tableau vide avant qu'il ne soit rempli...

Donc, le probleme est ailleurs: et j'ai trouve ! Je chargeais une image
en fond d'ecran, or la creation du tableau ne commence que lorsque l'image est entierement chargee (j'utilise l'evenement window.onload pour declencher la creation du tableau)... bete n'est-ce pas (j'espere que vous me pardonnerez, je debute) ? Cela me rassure un peu sur le potentiel de JS.

J'ai vu que Jquery permettait d'eviter ce probleme (en utilisant onread au lieu de onload)... Bon, a prori, je ne suis pas fana a l'idee d'utiliser Jquery pour profiter d'1 ou 2 fonctions (je prefere de toute facon tout faire moi meme, au moins au debut... c'est tout de meme instructif). Si quelqu'un sait comment onread fonctionne, ca m'interesse (ceci dit, si c'est trop complexe, laissez tomber, j'essaierai de mettre mon nez moi meme dans jQuery pour comprendre si j'en trouve le temps).

Ceci dit, de maniere plus general, comme je debute, je prefere prendre d'ores et deja des bonnes habitudes, notamment en ce qui concerne l'optimisation. Ma premiere impression (fausse) me laissait croire que JS etait vraiment tres lent et que du coup optimiser un script etait absolument vital. Bon, c'est peut-etre moins crucial que je ne m'imaginais, mais tant qu'a faire autant partir sur un bon pied.

Merci pour les references concernant l'optimisation et les perfs.
Je vais potasser tout ca.

olivier.

[Auteur]

Je chargeais une image
en fond d'ecran, or la creation du tableau ne commence que lorsque l'image est entierement chargee (j'utilise l'evenement window.onload pour declencher la creation du tableau)... bete n'est-ce pas (j'espere que vous me pardonnerez, je debute) ?

de toute façon tant que la page n'est pas chargée tu ne peux pas lancer la création du tableau donc tu n'as pas le choix : tu dois appeler ta fonction lors du onload.

[olivierPa]

Oui, mais avec ready (de JQuery - et non onread... je m'etais trompe dans mon precedent post), on peux manipuler le DOM avant que les images ne soient chargees, non ? (je n'ai pas teste).

Sinon, le lien envoye par ERE est vraiment interessant... et me pousse a me convertir a Opera ! et a utiliser innerHTML (je sais, c'est tres mal, mais bon, quand on considere les tests presentes, il est difficile de resister).

olivier.