Nachdem wir eine URL in den Browser eingegeben haben, erscheint eine schöne Seite vor uns. Was ist in der Mitte passiert? Für einen normalen Benutzer müssen Sie möglicherweise nicht über dieses Problem nachdenken, aber als Front-End-Entwickler oder Student, der Plug-Ins entwickeln möchte, ist es unbedingt erforderlich, das Funktionsprinzip des Browsers zu beherrschen!
Heute besprechen wir fünf gängige Browser – IE, Firefox, Safari, Chrome und Opera. Die Funktionen und Zwecke der Browser sind gleich, es gibt jedoch einige Unterschiede im Parsing-Prozess. Was sind also die Hauptfunktionen des Browsers?
1. Benutzeroberfläche (dies ist nicht wichtig) – einschließlich der Adressleiste, der Zurück-/Vorwärts-Schaltflächen, des Lesezeichenverzeichnisses usw., d. h. der anderen Teile, die Sie sehen, mit Ausnahme des Hauptfensters, das zur Anzeige der von Ihnen angeforderten Seite verwendet wird.
2. Browser-Engine – eine Schnittstelle zur Abfrage und Bedienung der Rendering-Engine. Darüber hinaus dient es dem Betrieb der Datenspeicherung des Browsers.
3. Rendering-Engine – wird verwendet, um den angeforderten Inhalt anzuzeigen . Wenn der angeforderte Inhalt beispielsweise HTML ist, ist er für das Parsen von HTML und CSS und die Anzeige der analysierten Ergebnisse verantwortlich.
4. Netzwerk – wird zum Abschließen von Netzwerkaufrufen wie http-Anfragen verwendet. Es verfügt über eine plattformunabhängige Schnittstelle und kann auf verschiedenen Plattformen funktionieren.
5. UI-Backend – wird zum Zeichnen grundlegender Komponenten wie Kombinationsauswahlfeldern und Dialogfeldern verwendet. Es verfügt über eine universelle Schnittstelle, die nicht spezifisch für eine bestimmte Plattform ist.
6. JS-Interpreter – wird zum Interpretieren und Ausführen von JS-Code verwendet.
7. Datenspeicherung – gehört zur Persistenzschicht. Der Browser muss verschiedene Daten ähnlich wie Cookies auf der Festplatte speichern, was eine leichte und vollständige clientseitige Speichertechnologie ist
Abbildung 1: Hauptkomponenten des Browsers
Es ist zu beachten, dass Chrome im Gegensatz zu den meisten Browsern jedem Tab eine eigene Rendering-Engine-Instanz zuweist und jeder Tab ein unabhängiger Prozess ist.
Referenzseite:
Thunderbolt-Tutorial_-HTML-Tutorial-HTML-Tutorial
Thunderbolt Tutorial_-HTML Tutorial-HTML Einführung
Thunderbolt Tutorial_-HTML Tutorial-HTML-Grundlagen
Thunderbolt Tutorial_-HTML Tutorial-HTML Elements
Thunderbolt Tutorial_-HTML Tutorial-HTML-Attribute
Thunderbolt Tutorial_-HTML Tutorial-HTML Titel
Thunderbolt-Tutorial_-HTML-Tutorial-HTML-Absatz
Thunderbolt-Tutorial_-HTML-Tutorial-HTML-Link
Piliyuan Tutorial_-HTML Tutorial-HTML Header http://www.piliyuan.com/HTML/22.html
Piliyuan Tutorial_-HTML Tutorial-HTML CSS http://www.piliyuan.com/HTML/23.html
Piliyuan Tutorial_-HTML Tutorial-HTML-Bild http://www.piliyuan.com/HTML/24.html
Piliyuan Tutorial_-HTML Tutorial-HTML-Tabelleneinführung http://www.piliyuan.com/HTML/27.html
Piliyuan Tutorial_-HTML Tutorial-HTML-Liste http://www.piliyuan.com/HTML/28.html