XML/XSL Probleme de vitesse d'execution Javascript

XML/XSL Probleme de vitesse d'execution Javascript - XML/XSL - Programmation

Marsh Posté le 18-04-2006 à 08:36:21    

Bonjour,
 
Dans une feuille de transformation XSL générant du HTML,
j'ai une perte considerable de temps d'execution par l'ajout  
d'evenements javascript dans un <td>.
 
J'espere de pas etre le seul a avoir rencontrer ce probleme
 
Merci d'avance
 

Reply

Marsh Posté le 18-04-2006 à 08:36:21   

Reply

Marsh Posté le 18-04-2006 à 09:28:30    

Pour plus de précisions:
 
j'ajoute a chaque boucle de génération  les evenements "onclick", "onmouseover", "onmouseout" à un <td>.
Il y a environ 150 passages dans boucles.
la page html met environ 3 fois plus de temps à s'afficher par l'ajout
de ces evenements.
Quelqu'un aurait il une idée?

Reply

Marsh Posté le 18-04-2006 à 09:54:23    

comprends pas exactement :o
Tu as un flux xml, tu le transformes en html via xsl, jusque là ça va...
Ensuite tu ajoutes tes evenements en js ou alors tes "evenements" ont été ajoutés lors de la transformation?

Reply

Marsh Posté le 18-04-2006 à 09:58:46    

Mes evenements sont ecrits dans ma feuille xsl.
 
 
voici mon code :
 
<xsl:template match="REFQX">
<xsl:param name="la_ref" select="."/>
  <xsl:param name="val_ARTLIB" select="../ITNBR"/>
  <xsl:param name="htj" select="../HTJOAX"/>
  <xsl:param name="chemin_image" select="../chemin_image"/>
   
  <xsl:param name="prix" select="../TARPU"/>
   <xsl:if test="$htj=' ' ">
    <td  
    onclick="window.location='/IntranetJLC/servlet/article?codeArticle={$la_ref}&#038;sessionID={$sessionID}&#038;roleTarif={$roleTarif}&#038;codeDevise={$codeDevise}&#038;typeTarif={$typeTarif}&#038;Langue={$langue}&#038;joaillerie=non&#038;ref6000={$val_ARTLIB}&#038;prix={$prix}' "  
    onmouseout="HideBulle(this)"  
    onmouseover="LoadBulle('{$detail}','{$reference}','{$val_ARTLIB}','{$la_ref}','{$chemin_image}',this)"  
    NOWRAP='1'  
    width='80'  
    class="artref" >
     <xsl:value-of select="$la_ref" />
    </td>

Reply

Marsh Posté le 18-04-2006 à 10:10:29    

Ok et donc ce qui est lent c'est le "rendu" de la page dans le navigateur?
 
Alors la réponse à la question: "Est-ce normal qu'une page contenant 150 lignes de tableau mette plus de temps a s'afficher avec des handlers d'evenements sur chacune des lignes que sans ces handlers?"
La réponse est : OUI.
 
Maintenant as-tu vraiment besoin de javascript??? Ne pourrais-tu pas faire la même chose juste avec des css ( ce qui résoudrait le problème)!

Reply

Marsh Posté le 18-04-2006 à 10:31:51    

En fait je n'ai pas le choix. je suis obliger d'utiliser javascript car avec css je ne peux pas gerer d'evenements.
 
Ce qui est long est la transformation avec xslt. Ce code ecrit dans une servlet ou une page php ne prend pas beaucoup de temps.
 
Je sais pas s'il existe une astuce pour eviter de faire des appels javascipts dans la feuille xsl.

Reply

Marsh Posté le 18-04-2006 à 13:07:50    

Mais ton xslt il appelle rien du tout [:pingouino] , il ecrit juste du texte ... ce que ca represente, lui il s'en fou .. Apres c'est ton navigateur qui va s'en occuper.
Donc si ton probleme est que ça met trop longtemps a ecrire le JS ... bein c'est normal .. tu lui fais ecrire le double [:pingouino]. Si c'est l'execution , c'est normal aussi


---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait
Reply

Marsh Posté le 18-04-2006 à 19:34:20    

As-tu vraiment besoin de tous ces attributs dans chaque handler? Des trucs comme sessionID, codeDevise, langue, ...
Tu pourrais avoir une fonction javascript unique qui fait le window.location en passant les quelques paramètres qui changent.

Reply

Marsh Posté le 19-04-2006 à 17:45:43    

Je pense ne pas avoir été clair et precis:
 
voici le debut de ma feuille xslt
 
 

Code :
  1. <?xml version="1.0" encoding="ISO-8859-1"?>
  2. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  3. <xsl:output method="html" version="1.0" encoding="ISO-8859-1" indent="yes"/>
  5. <xsl:variable name='sessionID' select="/document/sessionid"/>
  6. <xsl:variable name='roleTarif' select="/document/roleTarif"/>
  8. <xsl:variable name='codeDevise' select="/document/codeDevise"/>
  9. <xsl:variable name='typeTarif' select="/document/typeTarif"/>
  10. <xsl:variable name='langue' select="/document/Langue"/>
  12. <xsl:variable name='detail' select="/document/detail"/>
  13. <xsl:variable name='reference' select="/document/reference"/>
  14.  
  15. <xsl:variable name='codeFamille' select="/document/ARTCNA/@codeFamille"/>
  16. <xsl:variable name='codeRLP' select="/document/ARTCNA/ARTCFA/@codeRLP"/>
  17. <xsl:variable name='codeLP' select="/document/ARTCNA/ARTCFA/ARTCLP/@codeLP"/>
  18. <xsl:variable name='codeGenre' select="/document/ARTCNA/ARTCFA/ARTCLP/ARTCMO/@codeGenre"/>
  21. <xsl:template match="document">
  22.   <html>
  23.    <head>
  24.     <META http-equiv="Pragma" content="no-cache">
  25.     </META>
  26.        
  27.     <LINK REL="stylesheet" TYPE="text/css" HREF= "/IntranetJLC/css/classification.css">
  28.     </LINK>
  29.    
  30.     <script src="/IntranetJLC/js/classificationHTML.js" language="JavaScript"></script>

 

 
On peux remarquer que je fais appel a un ficier de fonction javascript "classificationHTML.js"
dont voici le code
 
 

Code :
  1. [#7f0055 size=2]
  2. var [/#7f0055 size=2][size=1]IB=[/size][#7f0055 size=2]new [/#7f0055 size=2][size=1]Object;[/size][#7f0055 size=2]
  3. var [/#7f0055 size=2][size=1]posX=0;[/size][#7f0055 size=2]
  4. var [/#7f0055 size=2][size=1]posY=0;[/size][#7f0055 size=2]
  5. var [/#7f0055 size=2][size=1]xOffset=10;[/size][#7f0055 size=2]
  6. var [/#7f0055 size=2][size=1]yOffset=10;[/size][#7f0055 size=2]
  7. function [/#7f0055 size=2][size=1]LoadBulle(refArtQ, path,x)[/size][#7f0055 size=2]{
  9. var [/#7f0055 size=2][size=1]color = [/size][#8e00ff size=2]"#DDDDDD"[/#8e00ff size=2][size=1];
  10. x.bgColor= color;
  13. [/size][#7f0055 size=2]var [/#7f0055 size=2][size=1]monImage = [/size][#7f0055 size=2]new [/#7f0055 size=2][size=1]Image();
  14. monImage.src = path+[/size][#8e00ff size=2]'/'[/#8e00ff size=2][size=1]+refArtQ+[/size][#8e00ff size=2]'.jpg'[/#8e00ff size=2][size=1];
  15. [/size][#3f5fbf size=2]// Il y a une image  
  16. [/#3f5fbf size=2][size=1]AffBulle([/size][#8e00ff size=2]'<CENTER><img src=\''[/#8e00ff size=2][size=1]+monImage.src+[/size][#8e00ff size=2]'\' onerror="LoadBulleNO(\''[/#8e00ff size=2][size=1]+refArtQ+[/size][#8e00ff size=2]'\', \''[/#8e00ff size=2][size=1]+path+[/size][#8e00ff size=2]'\')" ></CENTER>'[/#8e00ff size=2][size=1]);[/size][#7f0055 size=2]
  17. }[/#7f0055 size=2][size=1][/size][#7f0055 size=2]
  18. function [/#7f0055 size=2][size=1]LoadBulleNO(refArtQ, path)[/size][#7f0055 size=2]{
  19. var [/#7f0055 size=2][size=1]monImage = [/size][#7f0055 size=2]new [/#7f0055 size=2][size=1]Image();
  20. monImage.src = path+[/size][#8e00ff size=2]'/NO_'[/#8e00ff size=2][size=1]+refArtQ+[/size][#8e00ff size=2]'.jpg'[/#8e00ff size=2][size=1];
  21. [/size][#3f5fbf size=2]// Il y a une image Non Officielle  
  22. [/#3f5fbf size=2][size=1]AffBulle([/size][#8e00ff size=2]'Unofficial image ... <br>'[/#8e00ff size=2][size=1]+[/size][#8e00ff size=2]'<CENTER><img src=\''[/#8e00ff size=2][size=1]+monImage.src+[/size][#8e00ff size=2]'\' onerror="LoadBulleErr()" ></CENTER>'[/#8e00ff size=2][size=1]);[/size][#7f0055 size=2]
  23. }[/#7f0055 size=2][size=1][/size][#7f0055 size=2]
  24. function [/#7f0055 size=2][size=1]LoadBulleErr()[/size][#7f0055 size=2]{
  25. [/#7f0055 size=2][#3f5fbf size=2]// Il n'y a pas d'image  
  26. [/#3f5fbf size=2][size=1]AffBulle([/size][#8e00ff size=2]'Sorry, this picture is unavailable'[/#8e00ff size=2][size=1]);[/size][#7f0055 size=2]
  27. }[/#7f0055 size=2][size=1]
  28. [/size][#7f0055 size=2]
  29. function [/#7f0055 size=2][size=1]AffBulle(texte) [/size][#7f0055 size=2]{
  30. [/#7f0055 size=2][size=1]contenu=[/size][#8e00ff size=2]"<TABLE border=0 cellspacing=0 cellpadding="[/#8e00ff size=2][size=1]+IB.NbPixel+[/size][#8e00ff size=2]"><TR bgcolor='"[/#8e00ff size=2][size=1]+IB.ColContour+[/size][#8e00ff size=2]"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"[/#8e00ff size=2][size=1]+IB.ColFond+[/size][#8e00ff size=2]"'><TR><TD><FONT size='-1' face='arial' color='"[/#8e00ff size=2][size=1]+IB.ColTexte+[/size][#8e00ff size=2]"'>"[/#8e00ff size=2][size=1]+texte+[/size][#8e00ff size=2]"</FONT></TD></TR></TABLE></TD></TR></TABLE>&nbsp;"[/#8e00ff size=2][size=1];
  31. [/size][#7f0055 size=2]var [/#7f0055 size=2][size=1]finalPosX=posX-xOffset;
  32. [/size][#7f0055 size=2]if [/#7f0055 size=2][size=1](finalPosX<0) finalPosX=0;
  33. [/size][#7f0055 size=2]if [/#7f0055 size=2][size=1](document.getElementById([/size][#8e00ff size=2]"bulle"[/#8e00ff size=2][size=1])!=[/size][#7f0055 size=2]null[/#7f0055 size=2][size=1])[/size][#7f0055 size=2]{
  34. [/#7f0055 size=2][size=1]document.getElementById([/size][#8e00ff size=2]"bulle"[/#8e00ff size=2][size=1]).innerHTML=contenu;
  35. document.getElementById([/size][#8e00ff size=2]"bulle"[/#8e00ff size=2][size=1]).style.top=posY+yOffset;
  36. document.getElementById([/size][#8e00ff size=2]"bulle"[/#8e00ff size=2][size=1]).style.left=finalPosX;
  37. document.getElementById([/size][#8e00ff size=2]"bulle"[/#8e00ff size=2][size=1]).style.visibility=[/size][#8e00ff size=2]"visible"[/#8e00ff size=2][size=1];
  38. [/size][#7f0055 size=2]}
  40. }[/#7f0055 size=2][size=1][/size][#7f0055 size=2]
  41. function [/#7f0055 size=2][size=1]HideBulle(x) [/size][#7f0055 size=2]{
  43. var [/#7f0055 size=2][size=1]color = [/size][#8e00ff size=2]"#FFFFFF"[/#8e00ff size=2][size=1];
  44. x.bgColor= color;
  46. document.getElementById([/size][#8e00ff size=2]"bulle"[/#8e00ff size=2][size=1]).style.visibility=[/size][#8e00ff size=2]"hidden"[/#8e00ff size=2][size=1];
  47. [/size][#7f0055 size=2]
  48. }[/#7f0055 size=2][size=1][/size][#7f0055 size=2]
  49. function [/#7f0055 size=2][size=1]InitBulle(ColTexte,ColFond,ColContour,NbPixel) [/size][#7f0055 size=2]{
  50. [/#7f0055 size=2][size=1]IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
  51. document.write([/size][#8e00ff size=2]"<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>"[/#8e00ff size=2][size=1]);
  52. document.onmousemove=getMousePos;
  53. [/size][#7f0055 size=2]
  54. }[/#7f0055 size=2][size=1][/size][#7f0055 size=2]
  56. function [/#7f0055 size=2][size=1]getMousePos(e) [/size][#7f0055 size=2]{
  57. if [/#7f0055 size=2][size=1](document.all) [/size][#7f0055 size=2]{
  58. [/#7f0055 size=2][size=1]posX=event.x+document.body.scrollLeft; [/size][#3f5fbf size=2]//modifs CL 09/2001 - IE : regrouper l'?v?nement
  59. [/#3f5fbf size=2][size=1]posY=event.y+document.body.scrollTop;
  60. [/size][#7f0055 size=2]}
  61. else {
  62. [/#7f0055 size=2][size=1]posX=e.pageX; [/size][#3f5fbf size=2]//modifs CL 09/2001 - NS6 : celui-ci ne supporte pas e.x et e.y
  63. [/#3f5fbf size=2][size=1]posY=e.pageY;
  64. [/size][#7f0055 size=2]}
  65. }[/#7f0055 size=2]

 

 
 
Voici la partie de ma feuille xsl qui fait appel aux fonctions
 
 

Code :
  1. <xsl:template match="DSLNG">
  2.   <xsl:param name="refQ" select="../REFQX"/>
  3.   <xsl:param name="chemin_image" select="../chemin_image"/>
  4.  
  5.   <td class="artlib" width='330' NOWRAP='1'
  6.   onmouseover="LoadBulle('{$refQ}','{$chemin_image}',this)"
  7.   onmouseout="HideBulle(this)" >
  8.    <xsl:apply-templates/>
  9.   </td>
  10. </xsl:template>

 

On peut remarquer que j'ai reduit les parametres des fonction javascripts
 
 
le template "DSLNG" est appele 150 fois environ
 
 
Mon probleme est que les deux lignes :
 
 
onmouseover="LoadBulle('{$refQ}','{$chemin_image}',this)"
onmouseout="HideBulle(this)" >
 
me font perdre 3 fois plus de temps a l'affichage.
 
je ne comprends pas pourquoi.  
le meme code sans transformation XML->HTML avec xslt est rapide  
 
 
je vous remercie de vos réponses.
 
 

Reply

Marsh Posté le 19-04-2006 à 17:46:37    

desole pour le code javascript: le rendu est erroné

Reply

Marsh Posté le 19-04-2006 à 17:46:37   

Reply

Marsh Posté le 20-04-2006 à 00:16:57    

Et sinon ca sert à quoi à part être extrèmement compliqué surement pour rien  :pt1cable:  ?

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed