Großer Baum -> Große Datei -> Hohe Ladezeit :(

PsychoEagle · 20.09.2007, 11:11

Hi und Tach auch

Ich habe eine kleines Problem (wie alle TE). Zum Thema:

Ich habe eine PHP Datei mit einem Baum, welcher den Aufbau meiner Seite bzw meines Projektes aufzeigt. Leider ist das Projekt sehr ausgedehnt und somit ist der Baum auch ziemlich groß.

Folge: 28207 Programmzeilen in einer 896 KB großen Datei

Das dauert dementsprechend leider viel zu lang zum Laden und zwingt den Browser in die Knie. So große Dateien sind auch nicht unbedingt sinnvoll und wie erwähnt nicht performant, aber mir fällt einfach keine andere Lösung ein.

In der Datei selbst ist alles statisch, kein PHP Code, alles nur HTML. Diese binde ich dann in meine "Content"-Seite ein:

PHP-Code:


			
<?php

  require 'inc/sys.tree.'. $_SESSION['language'] .'.php';

?>

Nun, hier noch ein Auszug aus der Baum Datei, um das zu verdeutlichen:

Code:

    <div style="display:block;margin:2px 0px;">
      [img]img/minus.png[/img]
      Deutschland
    </div>
    <div style="display:block;padding-left:17px;" id="fbDivDe">
      <div style="display:block;margin:2px 0px;">
        [img]img/plus.png[/img]
        Branchen
      </div>
      <div style="display:none;padding-left:17px;" id="fbDivDeBR">
        <div style="display:block;margin:2px 0px;">
          [img]img/plus.png[/img]
          Baugewerbe (583.803)
        </div>
        <div style="display:none;padding-left:17px;" id="fbDivDeBR11">
        <div style="display:block;margin:2px 0px;">
          [img]img/plus.png[/img]
          Baudienstleistungen
        </div>
        <div style="display:none;padding-left:17px;" id="fbDivDeBR21">
Baudienstleistungen gesamt

Abbruchunternehmen

Abdichtungsunternehmen

...

Die Datei selbst lass ich durch ein Script erzeugen, welches alle Daten aus einer Datenbank besorgt und eben dann die Daten in diese Datei schreibt bzw dann auf dem Server abspeichert. Das mach ich bisher manuell, da sich wenn sich was ändert ich die Datei neu schreiben lassen werde. Cronjob ist also unnötig.

Wie würdet ihr an die Sache ran gehen? Ich weiß nicht, wie ich das optimieren soll, vielleicht hatte jemand von euch auch mal so ein Problem oder weiß wie ich das angehen könnte.

Ajax möchte ich ein wenig "vermeiden", da ich damit nicht allzu viel gearbeitet habe und die Vermutung habe, dass wenn ich einen unterbaum aufklappen lassen möchte, dies zu lang dauert und wie schon erwähnt es viele unterbäume gibt *g* Hier noch nen Bildchen.

Aber wenn es mit Ajax am sinnvolsten ist, wieso nicht

was meint ihr zu dem Ganzen? Wie würdet ihr das lösen? Wäre für jeden Tipp dankbar, danke

Einen Link möchte ich, zum Schutz meines Kundens und vor Werbung hier im Forum, mal außen vor lassen. Wer dennoch diesen gerne hätte, um sich das genauer anzuschauen, darf mir gerne eine PM zukommen lassen

Danke nochmal, wurde doch ein wenig viel Text.

Grüße
Da Psy

cycap · 20.09.2007, 11:25

Also ich würde einfach die Daten abrufen wenn sie gebraucht werden, also von der statischen Datei weg. Dann machst du dir einfach nen Session-Array das bei jedem klick aktualisiert wird und je nach Inhalt des Arrays die gewünschten Zweige geöffnet werden. Nachteil dabei ist das die Seite jedes mal komplett neu geladen werden muss, aber dem Browser gefällt das sicherlich besser als diese riesige Datenmenge aufeinmal.

PsychoEagle · 20.09.2007, 11:57

Das überlegte ich mir auch schon, nur anstatt einer Session lieber Get-Parameter, aber das ständige Laden ist dann doch ein wenig nervig für den Benutzer.

Ein iFrame geht leider auch nicht so richtig, da der Baum ziemlich groß werden kann und dann Scrollbalken aufkommen. Oder soll ich das iFrame einfach dynamisch mit JS an den Inhalt anpassen? Mir ist das ganze ein wenig zu "unprofessionell"

Lieber doch Ajax und Get-On-Demand?!

Grüße
Da Psy

cycap · 20.09.2007, 12:02

wie wäre es wenn du einfach die ersten zweige (also die ersten ebenen, nicht die ersten von oben

) mit javascript lädst und die tieferen verzweigungen mit php lädst? dann hast du den reload nicht immer, aber trotzdem schneller ladezeiten als jetzt

PsychoEagle · 20.09.2007, 12:06

das wäre eine Idee, die ersten 2 Ebenen sind gleich. Erst Land, dann Hauptkategorie. Danach variiert es jedoch stark (nochmal 2-3 Ebenen unter Umständen auch keine).

Werd ich mal ausprobieren, wie schnell das ganze ist

danke

Zergling-new · 20.09.2007, 13:46

Hallo,
kein Mensch kann die Ausgabe von 28.000 Informationszeilen verarbeiten. Das überfordert jeden Geist. Wenn diese Informationsfülle zur Verfügung steht, muss die Anwendung eben das Ergebnis einschränken, bei einem Baum eben, in dem er Zweige öffnet oder schließt. Du kannst das ganze ja noch mit einer Suche oder Shortcuts verknüpfen. Dazu gleich mehr.

Erstmal musst du den Code verschlanken.

Redundanzen entfernen. In deinem Fall ist das CSS. Das musst du auslagern.
Beim <img> Tag kannst du border="0" auch weglassen, dafür reicht ein einziger CSS-Befehl img { border:0 }

Der Quellcode muss für den Menschen bei einer solchen Größe nicht lesbar sein, das heißt du kannst auf solche Bezeichnungen zugunsten kürzerer verzichten: "fbDivDeBR". Auf Whitespaces (dazu zählt auch das Einrücken von Code) sowieso!

Komprimier die Datei, kann dir unglaublich viel bringen. Dazu lies den Wert aus $_SERVER["HTTP_ACCEPT_ENCODING"] aus, wird darin "gzip" aufgeführt, akzeptiert der Browser gzip-komprimierte Ausgaben. Kannst du ganz einfach umsetzen, näheres hier:
http://de2.php.net/manual/en/function.ob-gzhandler.php

Wie erwähnt, der Benutzer will und kann garnicht alle Informationen verarbeiten. Stell dir vor im Windows Explorer wären alle Ordner gleich ausgeklappt. Da findest du nix mehr. Setz AJAX ein und zeig immer nur eine Ordner-Ebene an. Das macht das ganze garantiert angenehmer für den Benutzer.

Bau vielleicht eine Suche oder Shortcut-Möglichkeit ein. Wenn jemand "Baudienstleistungen" sucht, sollte deine Applikation in der Lage sein, alle Bäume aufzuklappen, in denen dieser Begriff vorkommt. Ist knifflig, aber machbar. Shortcuts könntest du wie die Transaktionsnummern bei SAP R/3 machen. Gib einfach eine gültige Transkationsnummer ein und der entsprechende Unterbaum öffnet sich. In deinem Fall wäre das die ID ("fbLnkDeBR21", ..). Kannst ja auch über Lesezeichen nachdenken.

Slava · 20.09.2007, 18:37

auch ohne AJAX kann man das gut in griff bekommen.
--------------------------------------------------------
root->Kategorie->Unterkategorie->Unterunterkategorie
--------------------------------------------------------------
ergebnis1 |_______| :suche
[+ ]ergebnis2
ergebnis3
....
ergebnis20
----------------------------------
<1| 2 | 3 | 4 | 5>
----------------------------------

Mehr als das braucht kein Schwein zu sehen.
un mit so einer Abfrage bist du sogar ohne NestedSets mit ganz normaler SelfJoin Tabelle schnell fertig.

nikosch · 22.09.2007, 12:44

Eine <1| 2 | 3 | 4 | 5> Navigation finde ich persönlich unübersichtlich. Aber wenn Deine Navi ohnehin nur über JS funktioniert, kannst Du darüber nachdenken, den Link Elementen über JS erst die Link-Funktionalität zuweisen zu lassen. In der Art (Pseudocode):

Code:

for (i = 0 to getElementsByTagName ('a').length )
  element[i].onClick = ...

20.09.2007, 11:11	#1 (permalink)
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	Großer Baum -> Große Datei -> Hohe Ladezeit :( Hi und Tach auch Ich habe eine kleines Problem (wie alle TE). Zum Thema: Ich habe eine PHP Datei mit einem Baum, welcher den Aufbau meiner Seite bzw meines Projektes aufzeigt. Leider ist das Projekt sehr ausgedehnt und somit ist der Baum auch ziemlich groß. Folge: 28207 Programmzeilen in einer 896 KB großen Datei Das dauert dementsprechend leider viel zu lang zum Laden und zwingt den Browser in die Knie. So große Dateien sind auch nicht unbedingt sinnvoll und wie erwähnt nicht performant, aber mir fällt einfach keine andere Lösung ein. In der Datei selbst ist alles statisch, kein PHP Code, alles nur HTML. Diese binde ich dann in meine "Content"-Seite ein: PHP-Code: `<?php require 'inc/sys.tree.'. $_SESSION['language'] .'.php'; ?>` Nun, hier noch ein Auszug aus der Baum Datei, um das zu verdeutlichen: Code: <div style="display:block;margin:2px 0px;"> [img]img/minus.png[/img] Deutschland </div> <div style="display:block;padding-left:17px;" id="fbDivDe"> <div style="display:block;margin:2px 0px;"> [img]img/plus.png[/img] Branchen </div> <div style="display:none;padding-left:17px;" id="fbDivDeBR"> <div style="display:block;margin:2px 0px;"> [img]img/plus.png[/img] Baugewerbe (583.803) </div> <div style="display:none;padding-left:17px;" id="fbDivDeBR11"> <div style="display:block;margin:2px 0px;"> [img]img/plus.png[/img] Baudienstleistungen </div> <div style="display:none;padding-left:17px;" id="fbDivDeBR21"> Baudienstleistungen gesamt Abbruchunternehmen Abdichtungsunternehmen ... Die Datei selbst lass ich durch ein Script erzeugen, welches alle Daten aus einer Datenbank besorgt und eben dann die Daten in diese Datei schreibt bzw dann auf dem Server abspeichert. Das mach ich bisher manuell, da sich wenn sich was ändert ich die Datei neu schreiben lassen werde. Cronjob ist also unnötig. Wie würdet ihr an die Sache ran gehen? Ich weiß nicht, wie ich das optimieren soll, vielleicht hatte jemand von euch auch mal so ein Problem oder weiß wie ich das angehen könnte. Ajax möchte ich ein wenig "vermeiden", da ich damit nicht allzu viel gearbeitet habe und die Vermutung habe, dass wenn ich einen unterbaum aufklappen lassen möchte, dies zu lang dauert und wie schon erwähnt es viele unterbäume gibt g Hier noch nen Bildchen. Aber wenn es mit Ajax am sinnvolsten ist, wieso nicht was meint ihr zu dem Ganzen? Wie würdet ihr das lösen? Wäre für jeden Tipp dankbar, danke Einen Link möchte ich, zum Schutz meines Kundens und vor Werbung hier im Forum, mal außen vor lassen. Wer dennoch diesen gerne hätte, um sich das genauer anzuschauen, darf mir gerne eine PM zukommen lassen Danke nochmal, wurde doch ein wenig viel Text. Grüße Da Psy __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)

20.09.2007, 11:25	#2 (permalink)
cycap Ehemaliger Moderator Registriert seit: 13.02.2008 Beiträge: 5.581 PHP-Kenntnisse: Fortgeschritten	Also ich würde einfach die Daten abrufen wenn sie gebraucht werden, also von der statischen Datei weg. Dann machst du dir einfach nen Session-Array das bei jedem klick aktualisiert wird und je nach Inhalt des Arrays die gewünschten Zweige geöffnet werden. Nachteil dabei ist das die Seite jedes mal komplett neu geladen werden muss, aber dem Browser gefällt das sicherlich besser als diese riesige Datenmenge aufeinmal. __________________ 1 && 1 macht 1 - Klingt komisch, ist aber so

20.09.2007, 11:57	#3 (permalink)
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	Das überlegte ich mir auch schon, nur anstatt einer Session lieber Get-Parameter, aber das ständige Laden ist dann doch ein wenig nervig für den Benutzer. Ein iFrame geht leider auch nicht so richtig, da der Baum ziemlich groß werden kann und dann Scrollbalken aufkommen. Oder soll ich das iFrame einfach dynamisch mit JS an den Inhalt anpassen? Mir ist das ganze ein wenig zu "unprofessionell" Lieber doch Ajax und Get-On-Demand?! Grüße Da Psy __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)

20.09.2007, 12:02	#4 (permalink)
cycap Ehemaliger Moderator Registriert seit: 13.02.2008 Beiträge: 5.581 PHP-Kenntnisse: Fortgeschritten	wie wäre es wenn du einfach die ersten zweige (also die ersten ebenen, nicht die ersten von oben ) mit javascript lädst und die tieferen verzweigungen mit php lädst? dann hast du den reload nicht immer, aber trotzdem schneller ladezeiten als jetzt __________________ 1 && 1 macht 1 - Klingt komisch, ist aber so

20.09.2007, 12:06	#5 (permalink)
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	das wäre eine Idee, die ersten 2 Ebenen sind gleich. Erst Land, dann Hauptkategorie. Danach variiert es jedoch stark (nochmal 2-3 Ebenen unter Umständen auch keine). Werd ich mal ausprobieren, wie schnell das ganze ist danke __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

20.09.2007, 13:46	#6 (permalink)
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Hallo, kein Mensch kann die Ausgabe von 28.000 Informationszeilen verarbeiten. Das überfordert jeden Geist. Wenn diese Informationsfülle zur Verfügung steht, muss die Anwendung eben das Ergebnis einschränken, bei einem Baum eben, in dem er Zweige öffnet oder schließt. Du kannst das ganze ja noch mit einer Suche oder Shortcuts verknüpfen. Dazu gleich mehr. Erstmal musst du den Code verschlanken. Redundanzen entfernen. In deinem Fall ist das CSS. Das musst du auslagern. Beim <img> Tag kannst du border="0" auch weglassen, dafür reicht ein einziger CSS-Befehl img { border:0 } Der Quellcode muss für den Menschen bei einer solchen Größe nicht lesbar sein, das heißt du kannst auf solche Bezeichnungen zugunsten kürzerer verzichten: "fbDivDeBR". Auf Whitespaces (dazu zählt auch das Einrücken von Code) sowieso! Komprimier die Datei, kann dir unglaublich viel bringen. Dazu lies den Wert aus $_SERVER["HTTP_ACCEPT_ENCODING"] aus, wird darin "gzip" aufgeführt, akzeptiert der Browser gzip-komprimierte Ausgaben. Kannst du ganz einfach umsetzen, näheres hier: http://de2.php.net/manual/en/function.ob-gzhandler.php Wie erwähnt, der Benutzer will und kann garnicht alle Informationen verarbeiten. Stell dir vor im Windows Explorer wären alle Ordner gleich ausgeklappt. Da findest du nix mehr. Setz AJAX ein und zeig immer nur eine Ordner-Ebene an. Das macht das ganze garantiert angenehmer für den Benutzer. Bau vielleicht eine Suche oder Shortcut-Möglichkeit ein. Wenn jemand "Baudienstleistungen" sucht, sollte deine Applikation in der Lage sein, alle Bäume aufzuklappen, in denen dieser Begriff vorkommt. Ist knifflig, aber machbar. Shortcuts könntest du wie die Transaktionsnummern bei SAP R/3 machen. Gib einfach eine gültige Transkationsnummer ein und der entsprechende Unterbaum öffnet sich. In deinem Fall wäre das die ID ("fbLnkDeBR21", ..). Kannst ja auch über Lesezeichen nachdenken.

20.09.2007, 18:37	#7 (permalink)
Slava Erfahrener Benutzer Registriert seit: 17.01.2006 Beiträge: 468	auch ohne AJAX kann man das gut in griff bekommen. -------------------------------------------------------- root->Kategorie->Unterkategorie->Unterunterkategorie -------------------------------------------------------------- ergebnis1 \|_______\| :suche [+ ]ergebnis2 ergebnis3 .... ergebnis20 ---------------------------------- <1\| 2 \| 3 \| 4 \| 5> ---------------------------------- Mehr als das braucht kein Schwein zu sehen. un mit so einer Abfrage bist du sogar ohne NestedSets mit ganz normaler SelfJoin Tabelle schnell fertig. __________________ Slava http://bituniverse.com

22.09.2007, 12:44	#8 (permalink)
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 21.224 PHP-Kenntnisse: Fortgeschritten	Eine <1\| 2 \| 3 \| 4 \| 5> Navigation finde ich persönlich unübersichtlich. Aber wenn Deine Navi ohnehin nur über JS funktioniert, kannst Du darüber nachdenken, den Link Elementen über JS erst die Link-Funktionalität zuweisen zu lassen. In der Art (Pseudocode): Code: for (i = 0 to getElementsByTagName ('a').length ) element[i].onClick = ...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Problem mit der Ladezeit - JS Datei zu groß, PHPcacheing?		PHP Tipps 2006	1	30.03.2006 16:50
Datei auf FTP-Server ändern ohne lokal abzuspeichern	faux	PHP-Fortgeschrittene	11	02.09.2005 11:54