qohelet: Javascript schneller oder serverseitig ausführen

Hallo zusammen!

Ich arbeite derzeit an einem etwas größerem Projekt, in dem auch die JavaScript-Frameworks jQuery und msDropdown verwendet werden - das Projekt muss im IE laufen und dieser kann keine Selectboxen mit Icons darstellen.

Mittlerweile ist die Anzahl der Selectboxen mit Icons auf 120 (2x60) angestiegen und der Javascript Code fängt an etwas zu "hinken", da er auf jede dieser 120 ausgeführt wird.
Wenn der Client noch langsamer ist wird das ganze natürlich unbrauchbar.

Mein Code sieht folgendermaßen aus:

  
<script language="javascript" type="text/javascript" src="msdropdown/jquery-1.3.2.min.js"></script>  
        <script language="javascript" type="text/javascript" src="msdropdown/jquery-1.3.2.js"></script>  
        <script language="javascript" type="text/javascript" src="msdropdown/jquery.dd.js"></script>
  
<script type="text/javascript">  
                jQuery.noConflict();  
                jQuery(document).ready(function(e) {  
                jQuery(".dropItDown").msDropDown();  
                });  
        </script>  

Hat jemand von euch eine Idee, wie man diesen Code
a) Serverseitig ausführen könnte (Der Server wäre schnell genug)
b) Schneller machen könnte (Vorkompilieren,...)
c) Andere Lösungen...?

DANKE!!!

  1. Mein Code sieht folgendermaßen aus:
    <script language="javascript" type="text/javascript" src="msdropdown/jquery-1.3.2.min.js"></script>
            <script language="javascript" type="text/javascript" src="msdropdown/jquery-1.3.2.js"></script>

    Ich kenn mich mit jquery nicht aus, aber muss der Code wirklich zweimal eingebunden werden?
    Und wozu das language Attribut? Das ist seit über 10 Jahren veraltet.

    Struppi.

    1. Hat so funktioniert (Never change a running System ;) ) - nachdem ich es im NoConflict-Modus ausgeführt hab war ich froh, dass überhaupt was läuft ^^

      Aber das ist nicht mein Problem...

      1. Aber das ist nicht mein Problem...

        Wieso? Ich denke du hast ein Geschwindigkeitsproblem?

        Struppi.

        1. Wieso? Ich denke du hast ein Geschwindigkeitsproblem?

          Ich spreche nicht von ein paar Millisekunden beim Laden der js-Dateien, sondern von einer Zeitdauer zwischen 6 und 10 Sekunden bei der Ausführung Codes.

          Vorher habe ich das ganze nur mit 14 (2x7) Feldern gemacht und die Geschwindigkeit war zufriedenstellend.

          1. Wieso? Ich denke du hast ein Geschwindigkeitsproblem?

            Ich spreche nicht von ein paar Millisekunden beim Laden der js-Dateien, sondern von einer Zeitdauer zwischen 6 und 10 Sekunden bei der Ausführung Codes.

            Das erklärt zwar nicht warum du die Datei doppelt einbindest, aber na gut ist ja nicht mein Problem.

            Struppi.

            1. Das erklärt zwar nicht warum du die Datei doppelt einbindest, aber na gut ist ja nicht mein Problem.

              Kanns auch herausnehmen... Aber die Initialisierung der Felder dauert trotzdem noch seine Zeit...

      2. Hi,

        Hat so funktioniert (Never change a running System ;) ) - nachdem ich es im NoConflict-Modus ausgeführt hab war ich froh, dass überhaupt was läuft ^^

        Naja, das eine ist die "minified"-Quelltext, das andere der gleiche Quelltext mit Kommentaren. Die größere kann weg. Die Arbeitsgeschwindigkeit beeinträchtig das nicht - nur die "Ladezeit".

        Und wenn Du JS beschleunigen möchtest:
         1. IE wegschmeißen - er ist der mit kaum vorstellbarem Abstand langsamste JSler
         2. IE wegschmeißen
         3. IE wegschmeißen
         4. Schauen, ob man das Chrome-Plug-In für IEs installieren kann
         5. JS optimieren

        Gruß, Cybaer

        --
        Zweck des Disputs oder der Diskussion soll nicht der Sieg, sondern der Gewinn sein.
        (Joseph Joubert, Schriftsteller)
        1. Hi!

          Und wenn Du JS beschleunigen möchtest:

          1. IE wegschmeißen - er ist der mit kaum vorstellbarem Abstand langsamste JSler
          2. IE wegschmeißen
          3. IE wegschmeißen
          4. Schauen, ob man das Chrome-Plug-In für IEs installieren kann
          5. JS optimieren

          Also ich finde Option 6, (die Du vergessen hast) noch am besten:

          Wenn Du JS beschleunigen willst, lass es besser weg, wo es nur geht.

          ;)

          --
          "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                - T. Pratchett
  2. Zuvor: Du musst nicht jquery-1.3.2.js UND jquery-min.js einbinden - eins von beiden reicht völlig. $.noConflict() ist nur dann notwendig, wenn irgendwo ein anderes Script noch das $-Zeichen belegt, ansonsten sollte es auch ohne gehen.

    Das Plugin msdropdown besteht aus 2 Teilen:

    1. eine Funktion, welche aus Select-Feldern Konstrukte mit divs und Events erzeugt.
    2. ein CSS, welches die Konstrukte formatiert.

    Du kannst also die entsprechenden Konstrukte bspw. mit firebug analysieren und gleich in den HTML-Code schreiben und das CSS ist Dein Standard-CSS übernehmen.

    Rechne aber nicht damit, dass das ganze wesentlich schneller wird, da besonders der IE bei vielen Events extrem langsam wird. Möglicherweise ist eine größtenteils CSS-basierte Lösung (unter Verwendung des :active-Attributs bei Links) schneller, da zumindest der IE CSS immer noch besser kann als JS.

    Gruß, LX

    --
    RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
    RFC 1925, Satz 11a: Siehe Regel 6a
    1. Danke für die schnelle Antwort, aber ich spreche hier nicht von ein paar Millisekunden.

      Um das Script auszuführen benötige ich mit meine Anzahl an Feldern zwischen 6 und 10 Sekunden.

      1. Das ist mir vollkommen klar, immerhin habe ich schon selbst derartige Scripte geschrieben. Allerdings solltest Du berücksichtigen, dass die Strukturen, die dieser Code erzeugt, ziemlich kompliziert sind - jede globale Vereinfachung ist an dieser Stelle mit einer deutlichen Beschleunigung verbunden.

        Gruß, LX

        --
        RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
        RFC 1925, Satz 11a: Siehe Regel 6a
    2. OK, du hattest Recht! :)

      Es geht tatsächlich etwas schneller - trotzdem dauert es immer noch etwas zu lange und vom IE bekomm ich nach wie vor die Meldung:

      ---------------------------
      Windows Internet Explorer
      ---------------------------
      Ausführung des Skripts abbrechen?

      Ein Skript auf dieser Seite verursacht eine Verzögerung in Internet
      Explorer. Eine weitere Ausführung des Skripts kann dazu führen,
      dass der Computer nicht mehr reagiert.

      ---------------------------
      Ja   Nein
      ---------------------------

  3. hi,

    vielleicht immer eine bestimmte Anzahl von Selectboxen in I-Frames laufen lassen? Ist zwar nicht schön, aber könnte helfen.

    1. vielleicht immer eine bestimmte Anzahl von Selectboxen in I-Frames laufen lassen?

      Die Idee ist nicht schlecht, aber ich müsste die Selectboxen sofort sehen...
      Was möglich wäre ist, dass man gleich arbeiten kann, auch wenn die Boxen noch nicht via JS bearbeitet wurden...

      Das Script lähmt alles...

  4. Hi,

    Hat jemand von euch eine Idee, wie man diesen Code
    a) Serverseitig ausführen könnte (Der Server wäre schnell genug)

    Die Manipulationen, die dieses Script im DOM vornimmt, dadurch ersetzen, dass gleich der entsprechende HTML-Code ausgeliefert wird. Vermutlich sollte man zweigleisig fahren - normale Selectfelder, falls JS nicht zur Verfügung steht; plus die HTML-Elemente, die für die JavaScript-Variante notwendig sind - letztere per Default erst mal versteckt, per JS wird dann umgeschaltet - Selects unsichtbar, andere Element sichtbar (Änderung der Klasse eines Vorfahrenelements plus Nachfahrenselektor).

    Ob man die nötigen Eventhandler auch noch gleich als HTML-Attribute setzt (und in wie weit das Script dafür anzupassen wäre), könnte man dann noch schauen.

    b) Schneller machen könnte (Vorkompilieren,...)

    Gibt's bei JavaScript nicht.

    Man könnte noch versuchen, aufwändige DOM-Manipulationen (so welche stattfinden) durch innerHTML abzubilden, das ist auch oftmals schneller.

    Wie viel das letztendlich bringt, müsste man schauen.
    Vielleicht lohnt es sich auch gar nicht. Dann heisst die Alternative, im unfähigen Browser auf einen reinen Deko-Effekt zu verzichten.

    MfG ChrisB

    --
    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
    1. Die Idee es gleich in HTML zu machen hatte ich ganz am Anfang, aber der IE schafft leider nicht...
      Javascript steht definitiv zur Verfügung, das stellt zum Glück nicht das Problem dar - aber wie meinst du das mit dem Selector?

      1. Hi,

        Die Idee es gleich in HTML zu machen hatte ich ganz am Anfang, aber der IE schafft leider nicht...

        D.h.?

        Javascript steht definitiv zur Verfügung, das stellt zum Glück nicht das Problem dar -

        Nein, aber die Geschwindigkeit ja offenbar.
        Deshalb mein Vorschlag, die Elemente, die sonst per JS erzeugt würden, direkt im HTML unterzubringen. Dann entfällt nach dem Laden/Parsen der Schritt, per JavaScript dynamisch durch's halbe DOM zu kraxeln und Elemente zu erzeugen.

        aber wie meinst du das mit dem Selector?

        So, wie wir es hier schon x Mal diskutiert haben, und wie es eigentlich auch offensichtlich sein sollte, wenn von CSS ein wenig Ahnung vorhanden ist.

        Bspw. </archiv/2009/2/t183733/#m1217169>

        MfG ChrisB

        --
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
        1. Hi,

          Die Idee es gleich in HTML zu machen hatte ich ganz am Anfang, aber der IE schafft leider nicht...

          D.h.?

          Isch gläub, der meint, daß der IE keine Bilders in Selectdingsens zeigen tut. Daß er das Zeug so machen soll, wie sein Scriptdingsi das machen tut, hat er voll nicht gecheckt mann!

          Oha. Ich hab keine Lust das umzuschreiben und nehme das mal zum Anlass, in die Heia zu hüpfen...

          --
          "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                - T. Pratchett
  5. Mittlerweile ist die Anzahl der Selectboxen mit Icons auf 120 (2x60) angestiegen und der Javascript Code fängt an etwas zu "hinken", da er auf jede dieser 120 ausgeführt wird.

    Bei so vielen Elementen würde ich vielleicht auf ein anderes Prinzip umstellen. Hast Du mal darüber nachgedacht die Select Felder erst dann zu füllen, wenn der User drauf klickt? Dürfte dann ja nur 1/120-tel der Zeit kosten. ;-)

    Falls das Ganze nicht mit Select Feldern machen möchtest wäre eine Alternative die Event-Delegation. Da sparst Du dir dann die Event-Handler der Einzelwerte zugunsten eines einzigen Handlers der auf den Container angewendet wird und checkt von welchem Kind-Element der Klick ausgelöst wurde. Das bringt auch Performance-Vorteile.