Wie wird eine html-Seite eigentlich geladen ...

keul3 · 08.05.2015

Hi,

erstmal sry für den "Threadtitel". Mich würde generell interessieren wie ein Html-Dokument inkl. aller .css und .js geladen und initialisiert wird.

Ich geh mal davon aus, dass die .html als erstes komplett geladen wird. Und dann weiß ich schon nicht was als nächstes passiert. Wird erst das head-Element nach externen Dateien durchsucht, diese dann geladen und dann alles dargestellt, oder umgekehrt?
Wie schauts aus wenn ich erst eine .css lade und danach eine .js, welche der .html nachträglich Elemente ergänzt? Wartet css damit, bis alles im head-Bereich durch ist und styled alles durch oder muss ich die .css zu Schluss laden, weil sie schon vorher arbeitet?
Könnte es Sinn machen .js erst im Body-Element zu laden?

Klingt vllt etwas kompliziert, aber ich würde kurzgesagt gern wissen wie der Programmablauf ist, wenn man so eine .html-Seite im Browser startet, damit ich weiß, wann was da ist, und ich ggf. draufzugreifen kann.

Könnte es vllt sogar sein, dass die diversen Browser es unterschiedlich handeln?

Vllt denke ich auch zu kompliziert ...

Danke schon mal im vorraus

mfg keule

Rata · 08.05.2015

keul3 schrieb:
Könnte es vllt sogar sein, dass die diversen Browser es unterschiedlich handeln?

Genau so ist es

Unter OS X gibt es einige Browser, die ich sehr gerne einsetze, wie z. B. iCab oder SeaMonkey. Mußte mal probieren...

Lieber Gruß
Rata

wex_stallion · 08.05.2015

<halbwissen>
Soweit ich mich erinnere, wird die HTML-Seite im Browser stur von oben nach unten abgearbeitet.

Wenn du im <head>-Bereich ein Script reinschraubst, dann wird das auch im <head>-Bereich interpretiert und ausgeführt. Wenn das Ding allerdings ein <body>-Element beeinflussen soll, dann hast du mit Zitronen gehandelt, denn in dem Moment wo es ausführt, ist das <body>-Element ja noch nicht da.
</halbwissen>

keul3 · 08.05.2015

Rata schrieb:
Genau so ist es

ohje, dann muss ich die verschiedenen Programmabläufe der Browser immer im Hinterkopf behalten und mit berücksichtigen?

wex_stallion schrieb:
Wenn du im <head>-Bereich ein Script reinschraubst, dann wird das auch im <head>-Bereich interpretiert und ausgeführt. Wenn das Ding allerdings ein <body>-Element beeinflussen soll, dann hast du mit Zitronen gehandelt, denn in dem Moment wo es ausführt, ist das <body>-Element ja noch nicht da.

scheint so zu sein, habs mal ausgetestet,

hier funktionierts nicht, da das Element noch null ist:

HTML:

<!DOCTYPE html>
<html lang="en">
     <head>
        <title>test</title>
           <script>
            function expand()
            {
                document.getElementById("myElement").innerHTML += " plus some dynamic js-Content";  
            }
            expand();
        </script>
    </head>
      <body>
        <p id="myElement">static content</p>
    </body>
</html>

hier haut's mit Hilfe des onLoad-Handlers hin:

HTML:

<!DOCTYPE html>
<html lang="en">
     <head>
        <title>test</title>
           <script>
            function expand()
            {
                document.getElementById("myElement").innerHTML += " plus some dynamic js-Content";  
            }
        </script>
    </head>
      <body onLoad="expand()">
        <p id="myElement">static content</p>
    </body>
</html>

mit dem onLoad-Handler im body-Tag scheint man dann auf der sicheren Seite zu sein, da dieses Event erst dispatched wird wenn das ganze Document inkl. Scripts, Styles und Bildern geladen wurde. Ich warte also das Event ab, und dann kann die Scripterei im head-Bereich losgehn. Richtig oder muss da noch was beachtet werden?

wex_stallion · 08.05.2015

Ich bin dann ab hier raus @keul3 , das wird mir zu neumodisch. Nachher erzählst du mir noch, ich könnte das Fernsehprogramm wechseln, ohne vom Sofa aufstehen zu müssen, hehe.

@Rata iCab gibt es noch?!

keul3 · 08.05.2015

wex_stallion schrieb:
Ich bin dann ab hier raus @keul3

nicht schlimm, mit deinem Hinweis haste mir schon sehr weitergeholfen in die Html-Denke reinzukommen

afr0kalypse · 10.05.2015

Sinnvollerweise sollte sofern möglich Javascript immer vor dem schließenden body Tag geladen werden.

1. aus Performancegründen
2. siehe deine Erfahrungen

Das geht nur leider nicht immer. Beispielsweise bei modernizr.

Rata · 10.05.2015

wex_stallion schrieb:
@Rata iCab gibt es noch?!

Klar

Und der ist tapfer dabei; ich bewundere solche Idealisten aus den Tiefen meiner schwarzen Seele

Einfach mal ausprobieren, Icab ist immer noch überraschend (!) schnell und irgendwelchen Ärger hatte ich auch noch nie damit

http://www.icab.de/

Lieber Gruß
Rata