Heim > Web-Frontend > CSS-Tutorial > Einführung in den Arbeitsprozess von CSS (Bild und Text)

Einführung in den Arbeitsprozess von CSS (Bild und Text)

不言
Freigeben: 2019-04-01 11:32:11
nach vorne
2528 Leute haben es durchsucht

Der Inhalt dieses Artikels ist eine Einführung in den Arbeitsprozess von CSS (Bilder und Texte). Ich hoffe, dass er für Sie hilfreich ist.

Bei unserer täglichen Arbeit verwenden wir möglicherweise einige Frameworks oder einfaches CSS, um unsere HTML-Seiten zu ändern. Überlegen Sie also sorgfältig, ob ein erfahrener Front-End-Praktiker seine Arbeitsprinzipien und Prozesse und Technologien kennen muss Je mehr wir verstehen, desto einfacher wird es natürlich sein, es zu verwenden. Im Folgenden werde ich Ihnen den Arbeitsprozess von CSS vorstellen.
Es gibt eine klassische Frage: Was passiert von der Eingabe der URL bis zum Aufruf der Seite? Die Antwort auf diese Frage kann lang oder kurz sein. Wenn die Antwort detailliert ist, dauert sie Tausende von Wörtern. Hier erhalte ich zunächst verschiedene Dateien wie HTML, CSS, JS usw. Die vorherigen stehen nicht im Mittelpunkt dieser Frage.
Zusammenfassend ist der Prozess in die folgenden Schritte unterteilt:

  1. Verarbeiten des HTML-Markups und Erstellen des DOM-Baums.
  2. CSS-Markup verarbeiten und CSSOM-Baum erstellen.
  3. Führen Sie DOM und CSSOM zu einem Renderbaum zusammen.
  4. Layout gemäß dem Rendering-Baum, um die geometrischen Informationen jedes Knotens zu berechnen.
  5. Zeichnen Sie jeden Knoten auf den Bildschirm.

Fühlst du dich nicht großartig? Ein paar einfache Prozesse können unsere Seite immer noch gut aussehen lassen. Die tieferen Dinge finden sich in Mr. Bobs aktuellem Live-Kurs wird im Artikel häufig erwähnt, sodass Sie ihm mehr Aufmerksamkeit schenken können. Lassen Sie uns, ohne auf diese Abschweifungen einzugehen, ein paar Bilder zeichnen, damit Sie den Arbeitsprozess von CSS besser verstehen.

1. DOM-Baum erstellen: Nachdem die HTML-Datei geladen wurde, beginnt der Browser mit dem Aufbau des DOM-Baums, der die kaskadierende Beziehung der Elemente im HTML-Dokument beschreibt

Einführung in den Arbeitsprozess von CSS (Bild und Text)

2. CSSOM-Baum erstellen: Ähnlich wie bei DOM müssen wir einen Baum für CSS erstellen. Zuerst werden CSS-Bytes in Zeichen umgewandelt, dann in Tokens und Knoten umgewandelt und schließlich mit einer Baumstruktur namens „CSS Object Model“ (CSSOM) verknüpft. Der CSSOM-Baum sieht so aus

Einführung in den Arbeitsprozess von CSS (Bild und Text)

3. Synthetischer Rendering-Baum: Füge den DOM-Baum und den CSSOM-Baum zu einem Rendering-Baum zusammen, der wie folgt aussieht:

Einführung in den Arbeitsprozess von CSS (Bild und Text)

4. Zeichnen/Rasterung: Wir kennen bereits das Layout von jedes Element Nach dem Stil und dem Layout besteht der nächste Schritt darin, dass der Browser-Kernel (normalerweise als Webkit-Kernel bezeichnet) jeden Knoten im Rendering-Baum berechnet und in tatsächliche Pixel auf dem Bildschirm umwandelt.

5. Zeichnen Sie auf den Bildschirm.

[Empfohlener Kurs: CSS-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonEinführung in den Arbeitsprozess von CSS (Bild und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Aktuelle Ausgaben
HTML5-Validierung für Symfony 2.1
Aus 1970-01-01 08:00:00
0
0
0
Der Unterschied zwischen HTML und HTML5
Aus 1970-01-01 08:00:00
0
0
0
html5 anzeigen ausblenden
Aus 1970-01-01 08:00:00
0
0
0
HTML5-Formularvalidierung
Aus 1970-01-01 08:00:00
0
0
0
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage