Benutzen des Zwischenspeichers in Firefox 1.5 (caching)

Aus MDC

Inhaltsverzeichnis 1 Einführung 2 Die neuen Browser-Events 2.1 Das pageshow Ereigniss 2.2 Das pagehide Ereigniss 3 Beispiel-Code 4 Entwicklung von Firefox Erweiterungen

[bearbeiten] Einführung

Firefox 1.5 verwendet einen speicherinternen Cache, der sich den Inhalt der geladenen Webseiten, sowie den Status der Javascripte merkt. Somit verbessern sich die Ladezeiten bereits geladener Webseiten erheblich. Dieses Feature, den Javascript-Status betreffend, wird als bfcache oder auch « Back-Forward Cache » bezeichnet. Der zwischengespeicherte Status wird solange erhalten, bis der Browser geschlossen wird.

Unter bestimmten Umständen, verwendet Firefox diesen Zwischenspeicher nicht:

• Die Seite besitzt einen unload-Handler
• Die Seite besitzt einen Meta-Eintrag: "cache-control: no-store"
• Die Seite besitzt einen Meta-Eintrag: "cache-control: no-cache" und ist Https
• Die Seite ist nicht fertig geladen, wenn der Benutzer die Seite verlässt
• Die Top-Level Seite besitzt Frames, die nicht zwischenspeicherbar sind
• Die Seite ist in einem Frame, in der eine neue Seite geladen wird (in diesem Fall, wird die letzte geladene Seite des Frames zwischengespeichert)

Dieses sogenannte bfcache-Feature verändert das Ladeverhalten von Webseiten ungemein! Wenn ein Web-Entwickler wissen möchte, ob:

• der Benutzer eine bestimmte Seite betreten hat
• das Seitenverhalten sich aufgrund des verlassens einer bestimmten Seite ändert

kann er dies nun über zwei neue Browser-Events tun.

[bearbeiten] Die neuen Browser-Events

Falls man diese neuen Events verwendet, werden die Weibseiten in anderen und älteren Browsern trotzdem richtig angezeigt. Getestet wurden Firefox, Internet Explorer, Opera und Safari. Das neue bfcache-Feature wird nur verwendet, wenn die Webseite in einen Firefox-Browser 1.5 oder höher geladen wird.

Standard-Verhalten bei Webseiten sehen wie folgend aus:

1. Benutzer navigiert zu der Webseite
2. Wenn die Seite sich aufbaut, werden die Inline-Scripts ausgeführt
3. Nach vollständigem Aufbau, wird der unload-Handler ausgelößt

Einige Seiten beinhalten einen vierten Schritt. Falls die Seite einen unload-Handler besitzt, wird beim Verlassen der Webseite dieser noch ausgelößt. Falls ein unload-Handler vorhanden ist, wird die Seite nicht zwischengespeichert.

Wenn ein Benutzer zu einer bereits zwischengespeicherten Seite navigiert, werden die bereits ausgeführten Inline-Scripts und der onload-Handler ignoriert. (siehe oben Schritt 2 und 3), damit werden in fast allen Fällen die Effekte dieser Skripte erhalten.

Wenn die Webseite Skripte enthält, oder anderes Verhalten, welches bei jedem neuen Besuch des Benutzers erneut ausgeführt werden soll, oder wenn man wissen möchte, ob ein Benutzer zu einer zwischengespeicherten Seite navigiert, muss man die über das pageshow-Event realisieren.

Wenn man eine Aktion ausführen will, die ausgeführt wird, wenn ein Benutzer eine Webseite verlässt, und man möchte den Vorteil des neuen bfcache-Feature nutzen, verwendet man nicht den unload-Handler, sondern benutzt das neue pagehide-Event.

[bearbeiten] Das pageshow Ereigniss

Dieses Ereigniss funktioniert genauso, wie das load-Event, jedoch wird dieses Ereigniss bei jedem Anzeigen der Webseite ausgelößt (wobei das onload-Ereigniss nicht ausgelößt wird, wenn die Webseite aus dem Zwischenspeicher des Firefox 1.5 geladen wird). Wird die Webseite das erste Mal geladen, folgt nach dem Auslösen des onload-Ereignisses sofort das pageshow-Event. Das pageshow-Ereigniss besitzt eine boolsche Eigenschaft, persisted, deren Inhalt auf beim ersten Laden auf false steht. Der Wert true bedeutet, daß der Browser diese Seite aus dem Zwischenspeicher holt.

Folglich muss man jedes Javascript, welches bei jedem Besuch der Webseite durchlaufen werden soll, mit dem pageshow-Ereigniss verknüpfen.

[bearbeiten] Das pagehide Ereigniss

Falls ein bestimmtes Verhalten definiert werden soll, wenn der Benutzer von der Seite weg navigiert, und man nicht das unload-Event verwenden will (welches verursachen würde, daß die Webseite nicht zwischengespeichert wird), kann man nun das neue pagehide-Event verwenden. Wie auch das pageshow besitzt das pagehide-Event die boolsche Eigenschaft persisted. Der Inhalt dieser Eigenschaft steht auf false, wenn der Seiteninhalt nicht aus dem Zwischenspeicher geholt wird, und steht auf true, wenn der Inhalt aus dem Cache geholt wird. Wenn die Eigenschaft auf false steht, wird der unload-Handler, falls vorhanden, sofort nach dem pagehide-Event ausgeführt.

Der Firefox 1.5 versucht das Ladeverhalten der Webseiten so zu simulieren, als wenn die Seite das erste mal geladen wird. Frames werden genauso behandelt, wie das Top-Level Fenster. Falls die Webseite Frames enthält und sie aus dem Zwischenspeicher geladen wird:

• werden die pageshow-Events aller Frame-Seiten ausgelößt, bevor das pageshow-Event der Hauptseite ausgeführt wird.
• Wenn der Benutzer von der zwischengespeicherten Frame-Seite weg navigiert, wird das pagehide-Event alle Frame-Seiten augelößt, bevor das pagehide-Event der Hauptseite ausgeführt wird.
• Bei Navigation innerhalb eines einzigen Frames, werden nur die Events ausgelößt, die diesen Frame betreffen.

[bearbeiten] Beispiel-Code

Das folgende Beispiel veranschaulicht eine Seite, die bedie Events verwendet (load und pageshow). Die Beispiel-Webseite verhält sich wie folgt:

• In anderen Browsern als dem Firefox 1.5, passiert folgendes zu jedem Zeitpunkt, bei dem die Seite geladen wird: das onload-Ereigniss lößt die onLoad-Funktion aus welche wiederum die onPageShow-Funktion ausführt (sowie eine zusätzliche Funktion).

• Im Firefox 1.5, verhält sich das onload-Event wie bei jedem anderen Browser, wenn die Webseite das ersten mal geladen wird (also nicht aus dem Zwischenspeicher). Zusätzlich wird das pageshow-Event ausgelößt, und falls die persisted-Eigenschaft den Wert false besitzt, wird nichts zusätzliches ausgeführt.

• Wird die Webseite beim Firefox 1.5 aus dem Zwischenspeicher geladen, wird nur das pageshow-Event ausgelößt. Besitzt die persisted-Eigenschaft den Wert true, werden nur die JavaScript-Aktionen ausgeführt, die in der onPageShow-Funktion gelistet sind.

In diesem Beispiel:

• Die Webseite ermittelt und visualisiert das derzeitige Datum und die derzeitige Zeit bei jedem Anzeigen der Webseite.
• Der Cursor wird im Eingabefeld für den Namen plaziert. Wenn der Benutzer nun beim Firefox 1.5 nach abschicken des Formulars zurück zur Eingabe navigiert, verharrt der Cursor beim zuletzt selktierten Feld. Bei anderen Browseren, wird der Cursor erneut im Namens-Feld platziert.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<title>Order query : Firefox 1.5 Example</title>
<style type="text/css">
body, p {
	font-family: Verdana, sans-serif;
	font-size: 12px;
   	}
</style>
<script type="text/javascript">
function onLoad() {
	loadOnlyFirst();
	onPageShow();
}

function onPageShow() {
//calculate current time
	var currentTime= new Date();
	var year=currentTime.getFullYear();
	var month=currentTime.getMonth()+1;
	var day=currentTime.getDate();
	var hour=currentTime.getHours();
	var min=currentTime.getMinutes();
	var sec=currentTime.getSeconds();
	var mil=currentTime.getMilliseconds();
	var displayTime = (month + "/" + day + "/" + year + " " + 
		hour + ":" + min + ":" + sec + ":" + mil);
	document.getElementById("timefield").value=displayTime;	
}

function loadOnlyFirst() {
	document.zipForm.name.focus();
}
</script>
</head>
<body onload="onLoad();" onpageshow="if (event.persisted) onPageShow();"> 
<h2>Order query</h2>

<form name="zipForm" action="http://www.example.com/formresult.html" method="get">
<label for="timefield">Date and time:</label>
<input type="text" id="timefield"><br>
<label for="name">Name:</label>
<input type="text" id="name"><br>
<label for="address">Email address:</label>
<input type="text" id="address"><br>
<label for="order">Order number:</label>
<input type="text" id="order"><br>
<input type="submit" name="submit" value="Submit Query"> 
</form>
</body>
</html>

Im Gegensatz dazu: Wenn die vorherige Seite nicht auf das pageshow-Event hört und alle Berechnungen als Teil des load-Events verarbeitet werden (und anstelle des oberen Codes, der untere verwendet wird), werden die Cursor-Position und der Datum/Zeit-Stempel vom Firefox 1.5 zwischengespeichert, falls der Benutzer von der Seite weg navigiert. Kommt der Benutzer nun auf die Webseite, wird der zwischengespeicherte Datum/Zeit-Stempel angezeigt.

<script>
function onLoad() {
	loadOnlyFirst();

//calculate current time
	var currentTime= new Date();
	var year = currentTime.getFullYear();
	var month = currentTime.getMonth()+1;
	var day = currentTime.getDate();
	var hour=currentTime.getHours();
	var min=currentTime.getMinutes();
	var sec=currentTime.getSeconds();
	var mil=currentTime.getMilliseconds();
	var displayTime = (month + "/" + day + "/" + year + " " + 
		hour + ":" + min + ":" + sec + ":" + mil);
	document.getElementById("timefield").value=displayTime;
}

function loadOnlyFirst() {
	document.zipForm.name.focus();
}
</script>
</head>

<body onload="onLoad();">

[bearbeiten] Entwicklung von Firefox Erweiterungen

Firefox 1.5 Erweiterungen müssen diese Zwischenspeicher Funktionalität unterstützen. Falls Sie eine Erweiterung für den Firefox entwickeln, welche kompatibel zu 1.5 und früheren Versionen sein soll, achten Sie darauf, daß Funktionen des onload-Events nur bei Seiten verwendet werden, die zwischengespeichert werden können und Funktionen des pageshow-Events benutzen, bei denen kein Cache verwendet werden soll.

Zum Beispiel sollte die Google-Toolbar für den Firefox bei der autolink-Funktion auf das onload-Event reagieren, und für die PageRank-Funktion mit dem pageshow-Event arbeiten, um kompatibel zu allen Firefox-Versionen zu sein.