HTML mit JAVASCRIPT-Ereignissen viel länger

[Julia]

Hi,
ich schreibe eine Anwendung mit php auf mysql-Basis. An einer Stelle werden die Datensätze aus mysql abgefragt und in einer HTML-Tabelle ausgegeben. Das Laden dieser Tabelle dauert schon mit 4500 Datensätzen knapp 30 Sekunden...

Beispielhaft die wichtigsten Auszüge:

$query = "SELECT Beschreibung FROM Tabelle1";
$result = mysql_query($query) or die(mysql_error());
while ($array = mysql_fetch_array($result))
    {
        echo "<tr onmouseover='change_to(this);' onmouseout='change_back(this);' onclick = 'docSenden(this);'>";
        echo "<td>" . $array[Beschreibung] . "</td></tr>";
    }
echo "</table>";

Wir haben schon ein wenig herumgesucht: die SQL-Abfrage (bei mir natürlich ein wenig größer und verschachtelt) ist so in Ordnung, Fremdschlüssel sind vorhanden. In mysql dauert das Ausführen 0,2 Sekunden... so weit, so gut.

Ersetzt man die tr-Zeile oben durch ein einfaches echo "<tr>", wird die Tabelle in etwa 1/5 der Zeit geladen. Deswegen mein Verdacht, daß es an den onmouseout/ onmouseover/ onclick-Ereignissen liegt. Seht ihr das genauso? Wenn ja, warum ist das so? Auf dieser Seite steht doch nur Text, die eigentliche Verarbeitung findet doch erst statt bei einer Mausbewegung/ einem Klick.
WIe könnte man das lösen (evtl. Optionen des Servers?) bzw. eindämmen? Bin für jeden Ansatz dankbar!

Viele Grüße,
Julia

[ChrisB]

Hi,

Ersetzt man die tr-Zeile oben durch ein einfaches echo "<tr>", wird die Tabelle in etwa 1/5 der Zeit geladen. Deswegen mein Verdacht, daß es an den onmouseout/ onmouseover/ onclick-Ereignissen liegt. Seht ihr das genauso?

Nun ja, damit fallen schon mal 92 Zeichen weg - bei 4500 Datensaetzen sind das also 414000 Zeichen weniger, die an den Client uebertragen werden wollen. Bei einer Kodierung, die ein Byte pro Zeichen braucht, sind das schon ueber 400 KB.

WIe könnte man das lösen (evtl. Optionen des Servers?) bzw. eindämmen? Bin für jeden Ansatz dankbar!

Eventhandler nicht als HTML-Attribute im Dokument unterbringen, sondern nach dem Laden dynamisch hinzufuegen, Stichwort unobstrusive Javascript.

MfG ChrisB

[Julia]

Hi Chris,

Eventhandler nicht als HTML-Attribute im Dokument unterbringen, sondern nach dem Laden dynamisch hinzufuegen, Stichwort unobstrusive Javascript.

never heard - aber vielen Dank, ich werde mich damit auseinandersetzen!

Viele Grüße,
Julia

[Struppi]

Eventhandler nicht als HTML-Attribute im Dokument unterbringen, sondern nach dem Laden dynamisch hinzufuegen, Stichwort unobstrusive Javascript.

never heard - aber vielen Dank, ich werde mich damit auseinandersetzen!

Wesentlich einfacher ist das von mir bereits erwähnte tr:hover, allerdings Wissen wir natürlich nicht, was deine mouse Funktionen tatsächlich tun.

Struppi.

[Struppi]

ich schreibe eine Anwendung mit php auf mysql-Basis. An einer Stelle werden die Datensätze aus mysql abgefragt und in einer HTML-Tabelle ausgegeben. Das Laden dieser Tabelle dauert schon mit 4500 Datensätzen knapp 30 Sekunden...

Von was sprichst du?
Wenn das laden einer Tabelle mit so wenig Datensätze so lange dauert, ist irgendetwas nicht in Ordnung.

Oder meinst du die Dauer bis der Browser die Seite aufgebaut hat?
Da spielt die Menge der Daten eine Rolle, ausserdem gibt es Browser, die eine Tabelle erst darstellen können wenn die Tabelle vollständig im Client angekommen ist. Dazu müßte man aber Wissen welchen Browser du benutzt.

while ($array = mysql_fetch_array($result))
    {
        echo "<tr onmouseover='change_to(this);' onmouseout='change_back(this);' onclick = 'docSenden(this);'>";
        echo "<td>" . $array[Beschreibung] . "</td></tr>";
    }
echo "</table>";

Ich vermut die mouseover/out Funktionen sind nur optischer Schnick Schnack, dieser kann mit :hover mit viel weniger Code umgesetzt werden und wenn es unbedingt sein muss dass der IE <7 dies auch anzeigt, noch zusätzlich ein JS.

Wir haben schon ein wenig herumgesucht: die SQL-Abfrage (bei mir natürlich ein wenig größer und verschachtelt) ist so in Ordnung, Fremdschlüssel sind vorhanden. In mysql dauert das Ausführen 0,2 Sekunden... so weit, so gut.

Ich finde auch 0.2 Sekunden für 4.500 Datensätze sehr viel.

Struppi.

[Julia]

Hi,

Oder meinst du die Dauer bis der Browser die Seite aufgebaut hat?

genau die meinte ich. Ich habe IE 6.0 zur Verfügung.

MfG
Julia

[EKKi]

Mahlzeit,

Ersetzt man die tr-Zeile oben durch ein einfaches echo "<tr>", wird die Tabelle in etwa 1/5 der Zeit geladen. Deswegen mein Verdacht, daß es an den onmouseout/ onmouseover/ onclick-Ereignissen liegt. Seht ihr das genauso? Wenn ja, warum ist das so? Auf dieser Seite steht doch nur Text, die eigentliche Verarbeitung findet doch erst statt bei einer Mausbewegung/ einem Klick.

Jein. Die eigentliche Aktion findet erst beim Bewegen der Maus bzw. beim Klicken statt, das ist richtig. Aber der Browser muss beim Rendern der Tabelle entsprechende Event-Handler anlegen, sich also "merken", was er bei welcher Aktion, die bei/an/auf/über/bei/mit diesem Element stattfindet, machen soll. Das braucht halt seine Zeit.

WIe könnte man das lösen (evtl. Optionen des Servers?) bzw. eindämmen? Bin für jeden Ansatz dankbar!

Wie ChrisB schon schrieb: die Event-Handler erst nach dem Laden des reinen HTML-Codes per Javascript hinzufügen (ohne Anspruch auf Korrektheit oder Vollständigkeit):

  
[...]  
<script type="text/javascript">  
[code lang=js]  
function addRowHandler()  
{  
  rows = document.getElementsByTagName('TR');  
  
  for(var i = 0; i < rows.count; i++)  
  {  
    rows[i].onMouseOver = 'change_to(this);';  
    rows[i].onMouseOut = 'change_back(this);';  
    rows[i].onClick = 'docSenden(this);';  
  }  
}  

</script>
</head>

<body onload="addRowHandler();">
[...]
[/code]

MfG,
EKKi

[Struppi]

rows[i].onMouseOver = 'change_to(this);';
    rows[i].onMouseOut = 'change_back(this);';
    rows[i].onClick = 'docSenden(this);';

Das ist Quatsch. Die Eventhandler werden immer Klein geschrieben und erwarten eine Funktionsreferenz, keinen String.

Struppi.

[EKKi]

Mahlzeit,

rows[i].onMouseOver = 'change_to(this);';
    rows[i].onMouseOut = 'change_back(this);';
    rows[i].onClick = 'docSenden(this);';

Das ist Quatsch. Die Eventhandler werden immer Klein geschrieben und erwarten eine Funktionsreferenz, keinen String.

Das stimmt. Wer lesen kann, ist aber klar im Vorteil:

ohne Anspruch auf Korrektheit oder Vollständigkeit

Ich habe einfach nur mal eben schnell eine Idee zusammengeklimpert und weder Zeit, noch Gelegenheitt der gar Lust, für andere Leute das Testen und Komplettieren zu übernehmen.

MfG,
EKKi

[Julia]

Hi EKKi,

Wie ChrisB schon schrieb: die Event-Handler erst nach dem Laden des reinen HTML-Codes per Javascript hinzufügen (ohne Anspruch auf Korrektheit oder Vollständigkeit):

[...]
<script type="text/javascript">
[code lang=js]
function addRowHandler()
{
  rows = document.getElementsByTagName('TR');

for(var i = 0; i < rows.count; i++)
  {
    rows[i].onMouseOver = 'change_to(this);';
    rows[i].onMouseOut = 'change_back(this);';
    rows[i].onClick = 'docSenden(this);';
  }
}

> </script>  
> </head>  
>   
> <body onload="addRowHandler();">  
> [...]  
> [/code]  
  
Vielen Dank für das Beispiel - sieht gut aus!  
  
Viele Grüße,  
Julia