HTML and CSS Reference
In-Depth Information
Etwas einfacher haben es mal wieder Entwickler, die einen Mac benutzen: Für sie hat
der Entwickler Chen Luo ein Tool namens
Smaller
programmiert (Abbildung 2.35):
Ähnlich wie bei ImageOptim ziehen Sie hier die HTML-, CSS- und JavaScript-Dateien
einfach mit der Maus auf das Programmfenster, die App erledigt den Rest. Die kos-
tenlose Testversion können Sie von
http://smallerapp.com/
herunterladen, nach 30
Tagen wird eine Lizenzgebühr von 20 US-Dollar fällig, umgerechnet sind das etwa
15 €. Eine lohnende Investition!
2
2.6.2 Die richtige Reihenfolge
In der Regel versuchen Webbrowser, die Dateien in der Reihenfolge zu laden, in der
Sie im HTML-Quellcode verlinkt sind. Dabei kann es zu einem Phänomen kommen,
dass man auch
Flash of Unstyled Content
nennt, kurz
FOUC
. Dieses Phänomen tritt
auf, wenn die HTML-Elemente bereits dargestellt werden, bevor die vollständigen
CSS-Definitionen geladen sind. Um das zu vermeiden, empfiehlt es sich, im HTML-
Dokument folgende Reihenfolge einzuhalten:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<!-- Verlinkte CSS-Dateien: -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- HTML-Elemente -->
<!-- Verlinkte JavaScript-Dateien: -->
<script src="script.js" type="text/javascript"></script>
</body>
</html>
Sie versuchen also, zunächst die CSS-Dateien zu laden, danach die HTML-Elemente
und erst danach, direkt vor dem schließenden
body
-Tag, den JavaScript-Code.
2.6.3 So wenig Anfragen wie möglich
Ein entscheidendes Nadelöhr bei WebApps ist neben der Internetverbindung vor
allem der Webserver, der die Dateien an den Browser übermittelt. Für jede Datei wird
eine separate Verbindung zum Server hergestellt, so ähnlich wie in einer Telefonzen-
trale am Anfang des 20. Jahrhunderts. In der Regel kann ein Server nur wenige paral-
lele Verbindungen verarbeiten, nicht selten kommt es vor, dass eine Anfrage
»festhängt« und alle nachfolgenden Datenpakete blockiert. Versuchen Sie also, die
Search WWH ::
Custom Search