Ankündigung

Einklappen
Keine Ankündigung bisher.

File Get Contents Geschwindigkeit

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • File Get Contents Geschwindigkeit

    Hallo Leute. Ich habe ein eigenes Package für Laravel erstellt. Das ist ein CSS Framework, welches von mir stammt.

    Ich wollte mal testen, wie sich die Geschwindigkeit verhält. Deshalb habe ich "Styles" aus 30 Textdatein geladen, mit "File Get Contents".
    Danach habe ich die Laravel Debugbar installiert und geschaut wie sich das verhält. Das heißt bei einem GET Request muss Laravel das VIEW laden + alle .txt Files mit CSS drin.
    Das Erstaunliche: Der LOAD Speed bleibt gleich, egal wie viele Daten von außen kommen. Selbst wenn ich nur 1 View lade, ohne CSS, bleibt es gleich. Auch der Memory Speicher bleibt immer gleich.

    Die Frage ist jetzt warum ist das so? Ich dachte immer "File GET Contents" macht eine Applikation langsamer, weil Daten von außerhalb kommen. Das verstehe ich leider nicht.

  • #2
    Was heißt "von außerhalb"?

    Wobei ich mich Frage warum ein CSS-Framework am Webserver ausgeführt wird. Das muss doch nur einmal beim Build-Prozess bzw. vor dem Deployen ausgeführt werden.

    Und warum wird CSS-Code in .txt-Dateien gespeichert? Klingt sehr dubios.

    Was kann das Framework eigentlich neues, was die zahlreichen bestehenden CSS-Frameworks nicht schon können?

    Kommentar


    • #3
      Danke hellbringer für deine Antwort. Ich mache es kurz, es soll ja nicht um mein Package gehen.

      Ja es gibt viele CSS Frameworks. Die haben aber das Problem, das immer alle CSS Klassen geladen werden müssen. Es gibt zwar Purgecss, das funktioniert aber nicht so gut. Ausserdem haben die ganzen Frameworks ein Problem mit CSS Grid. Somit verbraucht man schon 200kb nur für CSS (ohne Fonts).
      Bei meinem Package wird nur css geladen, welches auch genutzt wird. Verwende ich eine Navbar, dann wird deren CSS automatisch mit geladen. Füge ich jetzt noch eine Zeile hinzu: "background-color:red;", dann wird diese hinzugefügt. Auch bei Icons wird nur 1 Icon geladen, welches ich auch möchte. Und nicht alle. Beim GET Request komme ich auf 10-20kb

      Das funktioniert alles schon. File Put Contents, wollte ich nur mal testen, denn so könnte man css über eine Form hinzufügen. Diese Funktion war eigentlich nicht vorgesehen, aber ich wollte es nur mal testen. Ich verstehe nur nicht, wieso die App nicht langsamer wird, wenn viele .txt Files geladen werden müssen. Meine Meinung nach haben CSS Datein in einer Datenbank nichts verloren, um deine zweite Frage zu beantworten

      Kommentar


      • #4
        Zitat von david19 Beitrag anzeigen
        Ja es gibt viele CSS Frameworks. Die haben aber das Problem, das immer alle CSS Klassen geladen werden müssen.
        Es gibt keine CSS-Klassen. Es gibt CSS-Selektoren, die auf HTML-Klassen verweisen können. Aber auch auf IDs. Oder Attribute. Usw.

        Zitat von david19 Beitrag anzeigen
        Das funktioniert alles schon. File Put Contents, wollte ich nur mal testen, denn so könnte man css über eine Form hinzufügen. Diese Funktion war eigentlich nicht vorgesehen, aber ich wollte es nur mal testen. Ich verstehe nur nicht, wieso die App nicht langsamer wird, wenn viele .txt Files geladen werden müssen. Meine Meinung nach haben CSS Datein in einer Datenbank nichts verloren, um deine zweite Frage zu beantworten
        Bei solchen Minidatenmengen wundert mich das überhaupt nicht. Mal davon abgesehen, dass die Daten wohl eh nur aus dem Cache des Dateisystems geladen werden.

        Allerdings frage ich mich, was genau mit diesen Mikrooptimierungen bezweckst. Eine 200kB CSS-Datei mag zwar größer sein, aber da sie vom Browser gecached wird, muss sie auch nur einmal geladen werden. Wenn man hingegen dynamisch CSS-Code ausliefert, muss dieser bei jedem Request neu geladen werden. Also wenn der Client 20 Requests macht und dann jedesmal 20kB CSS-Code ausgeliefert wird, sind das schon insgesamt 400kB.

        Kommentar


        • #5
          Zitat von hellbringer Beitrag anzeigen
          Bei solchen Minidatenmengen wundert mich das überhaupt nicht. Mal davon abgesehen, dass die Daten wohl eh nur aus dem Cache des Dateisystems geladen werden.
          Ich glaube das ist der Punkt, es ist zu gering um das zu sehen. Na dann ist alles gut Ich dachte es hätte größere Auswirkungen.
          Zitat von hellbringer Beitrag anzeigen
          Allerdings frage ich mich, was genau mit diesen Mikrooptimierungen bezweckst. Eine 200kB CSS-Datei mag zwar größer sein, aber da sie vom Browser gecached wird, muss sie auch nur einmal geladen werden. Wenn man hingegen dynamisch CSS-Code ausliefert, muss dieser bei jedem Request neu geladen werden. Also wenn der Client 20 Requests macht und dann jedesmal 20kB CSS-Code ausgeliefert wird, sind das schon insgesamt 400kB.
          Nein, meine 20kb werden genauso gechached wie die 200kb. Ich habe auch eine Style.css, aber diese ist dynamisch und verwendet nur genutzte. Diese Mikrooptimierungen wie du schreibst, macht man nur ein mal. Nämlich jetzt, danach braucht man sich nicht drum kümmern Warum soll ich Zeugs laden, was nicht verwendet wird. Diese Ganzen Bootstrap Themes sind eine Katastrophe.

          Kommentar


          • #6
            Zitat von david19 Beitrag anzeigen
            Nein, meine 20kb werden genauso gechached wie die 200kb. Ich habe auch eine Style.css, aber diese ist dynamisch und verwendet nur genutzte.
            Wie sollen deine 20kB gechached werden wenn du immer unterschiedlichen Inhalt auslieferst? Das geht nicht.

            Kommentar


            • #7
              Zitat von tk1234 Beitrag anzeigen
              Wie sollen deine 20kB gechached werden wenn du immer unterschiedlichen Inhalt auslieferst? Das geht nicht.
              Hi tk1234. Es geht um den Browsercache. Es ist egal ob gechached wird oder nicht, 20kb bleiben 20kb. Und 200kb bleiben 200kb. Die Größe der Ressourcen ändert der Browser nicht. Schön zu sehen in der Chrome Extension, da gibt es den Haken "disable chache".

              Kommentar


              • #8
                Zitat von david19 Beitrag anzeigen
                Es geht um den Browsercache. Es ist egal ob gechached wird oder nicht, 20kb bleiben 20kb. Und 200kb bleiben 200kb.
                Wenn der Browser eine Resource aus dem Cache laden soll darf diese sich nicht verändern - da bei dir aber die styles.css immer mit unterschiedlichen Inhalten ausgeliefert wird kann der Browser sie nicht aus dem Cache laden sondern muss sie neu vom Server abrufen. Die 20kB werden also bei jedem Request neu runtergeladen, die 200kB dagegen nicht, die werden genau einmal abgerufen, jeden weiteren Request beantwortet der Server nur mit einem 304er und der Browser läd die Datei aus dem Cache.
                Hast du dir mal mehrere Requests hintereinander angeschaut was da vom Server geladen wird? Wo kann man sich das anschauen?

                Kommentar


                • #9
                  tk1234 Es stimmt schon was du schreibst. Der Browsercache ist aber irrelevant wenn ein Besucher das erste mal auf deine Seite kommt. Selbst wenn der Browser meinen Cache von 20kb nicht cachen kann, er ist trotzdem schneller, weil es eben nur 20kb sind.
                  Auf diesem Bild siehst du, die Seite braucht nur 1 Request, obwohl 5 Icons verwendet werden. Und 11,2kb. Die Requests siehst du unter Chrome F12/Network.

                  Und das inline CSS:
                  Code:
                  a,li,p,ul{margin:0;padding:0;text-decoration:none}li{list-style-type:none}body{background:0 0;overflow-x:hidden;font-family:'Helvetica Neue',sans-serif}h1,h2,h3,h4,h5,h6{color:rgba(9,9,16,.7);line-height:1.2rem;font-weight:300}h1{font-size:5rem}h2{font-size:4rem}h3{font-size:3rem}h4{font-size:2.5rem}h5{font-size:2rem}h6{font-size:1.5rem}p{color:rgba(9,9,16,.7);line-height:1.5em;font-size:1.25rem;font-weight:300}a{color:#00f;line-height:1.4em;font-size:1.25rem;font-weight:300}li{color:#000;line-height:1.4em;font-size:1.25rem;font-weight:300}.logo-wJ4IeyiINi a{display:block;fill:#ff2d20;order:1;fill:#fff}.menu-wJ4IeyiINi{display:inline-block;order:2}.menu-wJ4IeyiINi a{text-decoration:none;color:rgba(9,9,16,.7);margin:0 10px}.menu-wJ4IeyiINi i{display:inline-block;width:1.5rem;fill:#ff2d20;margin:-5px 5px}.toggle-wJ4IeyiINi{display:none}#toggle-wJ4IeyiINi{display:none}@media screen and (max-width:768px){.navbar-wJ4IeyiINi{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.toggle-wJ4IeyiINi{width:3rem;fill:#ff2d20;display:block;order:2;cursor:pointer;margin:10px 10px}.logo-wJ4IeyiINi a{width:3em;order:0}.menu-wJ4IeyiINi{order:1;width:100%}.menu-wJ4IeyiINi a{display:flex;justify-content:space-between;order:0;margin:60px 100px;font-size:1rem;border-bottom:#000 solid 1px}.menu-wJ4IeyiINi i{order:1;width:1.5rem}#toggle-wJ4IeyiINi+.menu-wJ4IeyiINi{display:none}#toggle-wJ4IeyiINi:checked+.menu-wJ4IeyiINi{animation-name:menu;animation-duration:1s;display:block;order:2}}@media screen and (min-width:768px){.logo-wJ4IeyiINi a{width:3em}.menu-wJ4IeyiINi a{font-size:1rem}.menu-wJ4IeyiINi i{width:1.5rem}}@media screen and (min-width:960px){.logo-wJ4IeyiINi a{width:3em}.menu-wJ4IeyiINi a{font-size:1rem}.menu-wJ4IeyiINi i{width:1.5rem}}@media screen and (min-width:1200px){.logo-wJ4IeyiINi a{width:3em}.menu-wJ4IeyiINi a{font-size:1rem}.menu-wJ4IeyiINi i{width:1.5rem}}@keyframes menu{from{transform:translateX(-100%)}to{transform:translateX(0)}}@media screen and (max-width:576px){.column-IGE9Z{grid-column:1/13;grid-row:auto}}@media screen and (min-width:576px){.column-IGE9Z{grid-column:1/13;grid-row:auto}}@media screen and (min-width:768px){.column-IGE9Z{grid-column:1/13;grid-row:auto}}@media screen and (min-width:960px){.column-IGE9Z{grid-column:1/13;grid-row:auto}}@media screen and (min-width:1200px){.column-IGE9Z{grid-column:1/13;grid-row:auto}}/*!
                   @media screen and (max-width:576px){.column-iIX94{grid-column:1/13;grid-row:auto}}@media screen and (min-width:576px){.column-iIX94{grid-column:1/13;grid-row:auto}}@media screen and (min-width:768px){.column-iIX94{grid-column:1/13;grid-row:auto}}@media screen and (min-width:960px){.column-iIX94{grid-column:1/13;grid-row:auto}}@media screen and (min-width:1200px){.column-iIX94{grid-column:1/13;grid-row:auto}}

                  Kommentar


                  • #10
                    Zitat von david19 Beitrag anzeigen
                    Es stimmt schon was du schreibst. Der Browsercache ist aber irrelevant wenn ein Besucher das erste mal auf deine Seite kommt. Selbst wenn der Browser meinen Cache von 20kb nicht cachen kann, er ist trotzdem schneller, weil es eben nur 20kb sind.
                    Wenn du davon ausgehst dass der User nur einmal auf deine Seite kommt und keine weiteren Seiten aufruft ist das natürlich richtig - der Cache ist dann irrelevant. Aber das ist ja eigentlich nicht der Normalfall: normalerweise möchte man ja dass der Besucher länger bleibt und dann wird der Cache durchaus wieder relevant.

                    Auf diesem Bild siehst du, die Seite braucht nur 1 Request, obwohl 5 Icons verwendet werden. Und 11,2kb. Die Requests siehst du unter Chrome F12/Network.
                    Moment. Ich dachte du verwendest eine style.css für dein CSS-Code? Das CSS im style-Element im Kopf der Seite mitzuliefern (das ist kein inline-CSS, das wäre im style-Attribut) verhindert das cachen natürlich vollständig.

                    Und das inline CSS:
                    Ohne das HTML dazu zu kennen lässt sich da nicht allzuviel sagen, aber etwas merkwürdig finde ich das "-wJ4IeyiINi" (o.ä.) hinter einigen Klassen-Selektoren und ich habe auch den Verdacht dass z.B. das Element mit class="logo-wJ4IeyiINi" gerne ein <header> wäre und das mit class="menu-wJ4IeyiINi" ein <nav>. Aber wie gesagt, ohne HTML lässt sich da nur raten.

                    Vollständig disqualifiziert hat sich dein Framework aber mit "@media screen and (max-width:768px) {". Pixel ist keine geeignete Einheit für media-Querys. Für die Anordnung der Inhalte ist nur der Inhalt relevant und für den sind Pixel irrelevant bzw. die falsche Einheit.

                    Kommentar


                    • #11
                      Ich mache morgen einen neuen Thread dafür auf. Da beantworte ich deine Fragen und ich könnte noch ein paar Tipps mitnehmen. Da poste ich auch das HTML. Bin nur gerade auf Arbeit. Bis morgen

                      Kommentar

                      Lädt...
                      X