Webbrowser

Der Webbrowser übernimmt nun die Aufgabe, den Inhalt in Form einzelner Datenpakete sequenziell von der angegebenen URL zu beziehen, ihn zu interpretieren und daraus mithilfe seiner Rendering-Engine eine Darstellung zu erzeugen. Diese Interpretation zeigt er Ihnen dann in seinem Ausgabefenster an.

Zu Beginn lädt der Browser das angefragte HTML-Dokument mitsamt der im HTML-Kopf referenzierten externen Dateien aus dem Netz. Darunter befinden sich in der Regel eine oder mehrere Stilvorlagen (CSS-Dateien). Abbildung 1 zeigt das Ergebnis der Auswertung mithilfe der Developer Extension von Google Chrome [1] für die Webseite Bbbike.org [2].

Abbildung 1: Detaillierte Auswertung der einbezogenen Stilvorlagen mit der Developer Extension von Google Chrome.

Über den Menüeintrag Network | Stylesheets erhalten Sie die Information, dass die Seite vier Stilvorlagen lädt. Zusätzliche Details erscheinen, wenn Sie den Mauszeiger auf den entsprechenden Ladebalken in der Zeitleiste bewegen. Das Pendant zur Developer Extension für Firefox/Iceweasel heißt Firebug [3], für Opera gibt es Dragonfly [4]. Beide Werkzeuge leisten ähnliche Dienste. Dragonfly finden Sie von Haus aus im Menü unter Extras | Weiteres | Opera DragonFly (Abbildung 2).

Abbildung 2: Analyse der Ladezeiten der unterschiedlichen Elemente einer Webseite mittels Operas DragonFly.

Um herauszubekommen, welcher Anteil der geladenen Stilvorlagen auch tatsächlich zum Einsatz kommt, führen Sie über den Eintrag Audits eine Netzwerkanalyse durch. Abbildung 3 basiert auf Chrome und zeigt im Abschnitt Web Page Performance, dass im vorliegenden Beispiel 1,8 von 2,9 KByte Daten unnütz über die Leitung gehen. Das entspricht mehr als 60 Prozent der bezogenen Stilvorlagen, was sowohl das Datenvolumen wie auch die Geduld des Anwenders strapaziert. Insbesondere bei einem mobilen Zugriff mit Abrechnung über einen Volumentarif kommt es auf eine schlanke Webseite an.

Abbildung 3: Die Chrome Developer Tools zeigen den Nutzungsgrad der von einer Webseite angeforderten Stilvorlagen.

Nach dem HTML-Kopf bezieht der Browser alle im HTML-Body referenzierten externen Dateien. Dies umfasst in der Regel Bilder, die Vorschau von Videodaten sowie oft aktive Elemente wie etwa Flash-Videos oder Javascript-Funktionen. Welche Daten der Browser tatsächlich lädt, hängt jedoch von den Einstellungen und den installierten Plugins ab.

Mitunter fordert die geladene Webseite auch Daten an, die der Browser nachträglich von der Darstellung ausklammert und somit Bandbreite verschwendet. Abhilfe schaffen hier Addons wie etwa Just Disable Stuff [5] und Adblock Plus für Firefox [6]. Ersteres sorgt dafür, dass der Browser Bilddaten und oder Javascript gar nicht erst lädt (Abbildung 4), Adblock Plus unterdrückt die Anzeige von Werbebannern oder aufdringlichen Popup-Fenstern mit großformatigen Anzeigen.

Abbildung 4: Das Firefox-Addon Just Disable Stuff erlaubt das gezielte Ein- und Ausschalten von Javascript und Bildern.

In die gesamte Berechnung der Darstellung fließt zunächst der browsereigene, unveränderliche Funktionsumfang ein. Er spiegelt die Intention der Entwickler und der Maintainer der von Ihnen ausgewählten Software wider. Danach folgen die benutzerspezifischen Einstellungen, wie etwa explizit ausgewählte Schriften und Ausgabemodi. Gibt die angesurfte Webseite spezifische Schriften und Schriftstile vor, holt sich der Browser diese vom Webserver, von der Festplatte oder direkt aus dem Cache. Gibt es die referenzierte Schriftart nicht im System, dann greift der Browser auf eine passende Standardschrift zurück.

Medienformate

Am Ende beeinflusst selbstverständlich auch das Ausgabegerät maßgeblich die Darstellung der Webseite. Der Webbrowser optimiert dazu die Anzeige für große Bildschirme oder kleine Smartphone-Displays. Er sucht dazu in den HTML- und CSS-Codes nach Tags und spezifischen Attributen für die unterschiedlichen Medienformate, wie etwa all, print oder screen (siehe Tabelle "Tags für Medienformate"[7]. Fehlen diese, greift der Browser auf eine vordefinierte Standarddarstellung zurück.

Tags für Medienformate

Medientyp Beschreibung
all alle Ausgabemedien (Standardwert)
print für Drucker, die Inhalte sichtbar auf Papier drucken.
screen für (Computer-)Bildschirme
speech für Sprachsynthesizer (für ein zukünftiges CSS-Modul reserviert)

Simulanten

Möchten Sie simulieren, wie sich Smartphones und Tablets mit Ihrer Webseite vertragen, helfen Ihnen dabei die Developer Tools von Google Chrome. Über den Eintrag Emulation gelangen Sie zu einer Auswahl verschiedener Ausgabegeräte, für die Google Chrome die Darstellung anpasst. Abbildung 5 zeigt als Beispiel die Ausgabe der Webseite http://www.gnupg.org auf einem Amazon-E-Book-Reader des Typs Kindle Fire.

Abbildung 5: Die Chrome Developer Tools zeigen auf Wunsch eine Webseite wie auf einem mobilen Gerät oder E-Book-Reader an.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 7 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Einstieg in den Webbrowser Firefox
    Wer aus der Windows-Welt kommt, setzt häufig den Internet Explorer als Webbrowser ein. Nicht nur aus Sicherheitsgründen ist das aber wenig ratsam; die Alternative Firefox kann vieles besser und läuft auf allen großen Betriebssystemen.
  • Browsergiganten
    Der Kampf der Browser auf Linux-Systemen ist längst entschieden: Firefox und Opera dominieren das Geschehen. Was die neue Generation der beiden Protagonisten zu bieten hat, zeigt der Test.
  • Optimiert
    Lädt eine Webseite nur schleppend, sucht man die Schuld schnell bei der Infrastruktur oder dem Webbrowser des Anwenders. Doch das Zusammenspiel von Webserver, Webseite und Browser ist kompliziert. Eine Reihe von Kniffen hilft, das Laden der Webseite zu beschleunigen.
  • Tipps und Tricks zu Gnome
    Gnome ist neben KDE die zweite große Desktopumgebung für Linux. In den Gnome-Tipps stellen wir regelmäßig Nützliches und Praktisches für die alternative grafische Oberfläche vor. Seit Ausgabe 01/2012 zeigen wir Tricks für die dritte Generation des Desktops: die Gnome Shell.
  • Mit Tempo im Web dank Webbrowser Midori
    Firefox und Opera kündigen bei jedem Release Geschwindigkeitszuwächse an, die sich im realen Leben recht schnell verflüchtigen. Wenn Sie wirklich rasant im Internet unterwegs sein möchten, ohne auf Bedienkomfort zu verzichten, lohnt ein Blick auf Midori.
Kommentare

Infos zur Publikation

LU 12/2017: Perfekte Videos

Digitale Ausgabe: Preis € 5,95
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Stellenmarkt

Aktuelle Fragen

Broadcom Adapter 802.11n nachinstallieren
Thomas Mengel, 31.10.2017 20:06, 2 Antworten
Hallo, kann man nachträglich auf einer Liveversion, MX Linux auf einem USB-Stick, nachträglich...
RUN fsck Manually / Stromausfall
Arno Krug, 29.10.2017 12:51, 1 Antworten
Hallo, nach Absturz des Rechners aufgrund fehlendem Stroms startet Linux nicht mehr wie gewohn...
source.list öffnet sich nicht
sebastian reimann, 27.10.2017 09:32, 2 Antworten
hallo Zusammen Ich habe das problem Das ich meine source.list nicht öffnen kann weiß vlt jemman...
Lieber Linux oder Windows- Betriebssystem?
Sina Kaul, 13.10.2017 16:17, 6 Antworten
Hallo, bis jetzt hatte ich immer nur mit
IT-Kurse
Alice Trader, 26.09.2017 11:35, 2 Antworten
Hallo liebe Community, ich brauche Hilfe und bin sehr verzweifelt. Ih bin noch sehr neu in eure...