Firefox 4 Die Perspektive eines Entwicklers

Direkt hinter dem Internet Explorer 9 steht die vielgepriesene, neueste Version von Firefox 4. Die Veröffentlichung war bisher mit über 7 Millionen Downloads in den ersten 24 Stunden und über 40 Millionen bis heute ein Erfolg. Heute möchte ich Ihnen einen schnellen Überblick über die Änderungen aus der Perspektive eines Entwicklers geben. Ich werde die neue Benutzeroberfläche und die anderen Whizbang-Funktionen überspringen.


Mehr HTML5

Eine neue Rendering-Engine, Gecko 2.0, befindet sich unter Firefox 4.

Eine neue Rendering-Engine, Gecko 2.0, befindet sich unter Firefox 4. Wie erwartet bietet es größtenteils eine hervorragende Unterstützung für eine auf Standards ausgerichtete Webentwicklung. Ebenfalls im Spiel ist ein brandneuer HTML5-Parser, der definiert, wie aus Ihrem HTML-Code eine Webseite wird.

Als Ergebnis erhalten Sie eine verbesserte Leistung von innerHTML ruft insbesondere die Fähigkeit auf, SVG-Inline-Code in Ihren Code aufzunehmen und die Stabilität und Reaktionsfähigkeit insgesamt zu verbessern, da der Parsing-Algorithmus auf einem eigenen Prozessor ausgeführt wird.

Weitere Verbesserungen aus Sicht der HTML5-Entwicklung sind die ausgereiftere Unterstützung für HTML5-Formulare und die Audio-API. Durch die Unterstützung der neueren Markup-Elemente und -Attribute wird der JavaScript-Code, den Sie schreiben müssen, erheblich reduziert, um entsprechende Funktionen bereitzustellen. Denken Sie an eine einfachere Validierung - Ihre Formularelemente erfordern null JavaScript, um die Validierungsregeln darauf zu kleben.


WebGL

WebGL ist ein auf OpenGL ES basierender Standard, mit dem Sie 3D-Rendering im Web durchführen können.

Die WebGL-Unterstützung war in früheren Firefox-Versionen noch relativ jung - nur die nächtlichen Test-Builds unterstützten die Technologie. Firefox 4 wird mit voller Unterstützung für die Plattform geliefert.

Wenn Sie sich fragen, ist WebGL ein auf OpenGL ES basierender Standard, mit dem Sie 3D-Rendering und andere verschiedene Manipulationen durch das Canvas-Element durchführen können. Die API selbst ist niedriger als Sie es erwarten würden und bietet Ihnen enorme Flexibilität und Leistung. Wenn etwas auf einem Desktop möglich ist, können Sie dies auch im Web tun!


Hardware-Beschleunigung

Wir reduzieren den Arbeitsaufwand für unsere allgemeinen CPUs, indem wir viel mehr parallele und fähige GPUs für bestimmte Berechnungen zur Verfügung stellen.

Bei der Hardwarebeschleunigung werden Aufgaben, die normalerweise von der Software ausgeführt werden, auf die Hardware übertragen, wo immer dies möglich ist. In unserem Szenario reduzieren wir die Arbeitslast für unsere allgemeinen CPUs, indem wir viel mehr parallele und fähige GPUs für bestimmte Berechnungen zur Verfügung stellen und dadurch eine bessere Leistung erzielen. Sowohl das Rendern des Seiteninhalts als auch das Zusammensetzen werden beschleunigt, obwohl verschiedene APIs auf verschiedenen Plattformen verwendet werden.

Unter Windows wird Direct2D für die Inhaltsbeschleunigung verwendet, einschließlich der Bearbeitung von Zeichenflächen und des Zeichnens, während Direct3D für die Compositing-Beschleunigung verwendet wird. Unter OS X übernimmt Quartz die Erstere, während die viel offenere OpenGL die Letztere übernimmt.


JgerMonkey JavaScript Engine

JägerMonkey ist eine erweiterte, optimierte Version von TraceMonkey, der JS-Engine in Firefox 3.6

Entsprechend den Erwartungen der Entwickler verfügt Firefox über eine neuere JavaScript-Engine - JägerMonkey. JägerMonkey ist eine erweiterte Version von TraceMonkey (die JS-Engine in Firefox 3.6) und fügt dem Mix viele weitere Optimierungen hinzu, die zu erstaunlichen Leistungsverbesserungen führen.

Neuere und klügere Optimierungen wie ein pro-Methode-JIT-Ansatz führen zu aggressiveren nativen Compilations, was zu einer viel besseren Performance als die Konkurrenz führt. Um ein Beispiel zu geben: Firefox erzielt im V8-Benchmark etwa sechsmal mehr und in den SunSpider-Benchmarks dreimal so schnell wie Firefox 3.6.

Insgesamt hat J? GerMonkey Firefox im Rennen um höchste JavaScript-Leistung mitgebracht.


CSS-Übergänge und mehr

Danke an heskinradiophonic

Firefox unterstützt schließlich CSS3-Übergänge und -Transformationen.

Eine der bemerkenswerten Ergänzungen für einen Front-End-Entwickler ist die umfassende Unterstützung für CSS3-Übergänge. Während die anderen Browser schon lange mit CSS3-Übergängen aufwarten, fehlt es an Firefox. Die neueste Version bietet eine nahezu vollständige Implementierung der Spezifikation.

CSS-Übergänge bieten eine reine CSS-Methode zum Animieren von Änderungen zwischen CSS-Eigenschaften. Transformationen wie Skalieren, Drehen und Schrägstellen stehen auch für Sie bereit! Sie können diese Transformation sogar verwenden innerhalb Übergänge, um flinke Effekte zu erzeugen. Erinnerst du dich an die jQuery-Schnipsel, mit denen du Gegenstände und Farben ein- und ausgeblendet hast? Für unsere Zwecke und Zwecke sind sie ziemlich überflüssig - ein paar Zeilen CSS genügen jetzt.

Die neueren Funktionen umfassen:

  • Unterstützung für Berührungseigenschaften.
  • Zugabe von -moz-any strukturell relevante Selektoren zusammenzufassen.
  • Berechnete Werte durch -moz-calc Damit können Sie Werte durch mathematische Ausdrücke definieren.

Auch wenn das Mozilla-Team einige Zeit in Anspruch genommen hat, erleichtert die zusätzliche Unterstützung die Entwicklung der neuen Technologien für Webentwickler.


WebM

Firefox wird jetzt mit einer WebM-Unterstützung ausgeliefert, die sowohl die Verwendung von Videoinhalten im Web als auch den Marktanteil von WebM erheblich verbessert.

Obwohl Entwickler-Nightly-Builds dieses Format seit einigen Monaten spielen können, ist dies die erste offizielle Version, die das Format unterstützt.

Wenn dieses Thema Ihren Kopf etwas unscharf macht, lese ich meinen früheren Artikel über Videocodecs im Web, in dem Sie weitere Informationen zu diesem Thema finden. Es genügt zu sagen, dass Mozilla durch das Hinzufügen von WebM-Unterstützung seine auf Standards basierende Idealogie gestärkt und das Leben für seine Benutzer in einem einzigen Schritt vereinfacht hat.


IndexedDB

IndexedDB speichert Daten als JSON-formatierte Dokumente.

IndexedDB ist eine radikalere, benutzerfreundlichere Route als Mozilla, die sich für den NoSQL-Ansatz entscheidet. Beachten Sie, dass die meisten anderen Browser die Web SQL-API verwenden, bei der Entwickler SQL schreiben, um Informationen zu erhalten, die in SQLite-Datenbanken gespeichert sind.

IndexedDB speichert Daten als JSON-formatierte Dokumente und ermöglicht den Zugriff auf die darin enthaltenen Informationen über eine einfachere Nicht-SQL-API. Das Endergebnis? Eine viel einfachere Syntax und eine standardisierte API, die Sie vor den Nuancen der Implementierung schützt und Ihnen gleichzeitig eine enorme Flexibilität bietet.


Webkonsole

Firebug wird zwar nicht ersetzt, aber die neue Webkonsole ist unglaublich praktisch.

Die neue Webkonsole ersetzt die Fehlerkonsole aus früheren Versionen. Obwohl einige der fortschrittlichen Tools wie Firebug nicht ersetzt werden, ist es äußerst praktisch, wenn Sie durch die Innenseiten einer Website oder einer Anwendung stöbern.

Die Konsole kann mit Strg + Umschalt + K [Cmd für die fruchtigen Hüfthose] geöffnet werden und wird mitgeliefert mit:

  • Ein Befehlszeilen-JavaScript-Interpreter, mit dem Sie JavaScript in Echtzeit ausführen können.
  • Ein Protokollierungsmechanismus, der CSS- und JavaScript-Fehler protokolliert. Netzwerkanfragen werden zu protokolliert, sodass Sie auf Informationen zu der Anfrage zugreifen können. Header, Antworten, alles ist Spiel.
  • ein Objektinspektor, um alle JavaScript-Objekte zu überprüfen, die sich im Speicher des Browsers befinden.

Bessere Typografie

Durch die Unterstützung von OpenType können Sie jetzt mit erweiterten Einstellungen wie dem Kerning herumspielen.

Sie können jetzt OpenType verwenden, ein offenes Schriftformat, mit dem Sie auf eine viel vielfältigere Palette zugreifen können - Sie sind nicht mehr auf webfeste Schriftarten beschränkt.

Obwohl es langweilig klingt, führt die Unterstützung von OpenType zu einer Reihe von Funktionen. Sie können Kerning und Ligaturen modifizieren und automatische Brüche unter vielen anderen erhalten.

Zu beachten ist noch Folgendes: Wenn Ihre Website nicht Englisch ist, werden die Inhalte der neuen Firefox-Engine ohne Probleme oder visuelle Probleme dargestellt. Aufgrund des exponentiellen Anstiegs nicht-englischer Webseiten hilft diese Funktion sowohl den Entwicklern als auch den Endbenutzern.


Das ist eine Verpackung

Die neueste Version von Firefox ist mit einer Reihe von Ergänzungen und Verbesserungen, die sich an Entwickler und Designer richten, ein großer Sprung gegenüber der vorherigen Generation. Auch JavaScript-Junkies wurden durch die verbesserte Leistung dank der neuen Engine, bessere HTML5- und CSS3-Unterstützung sowie einen viel robusteren Satz von Tools berücksichtigt.

Was denkst du über Firefox 4? Liebe es? Hasse es? Sagen Sie uns in den Kommentaren Bescheid und vielen Dank für das Lesen!