Ajaxschmiede.de

Apple präsentierte vor wenigen Tagen eine Betaversion der vierten Generation des hauseigenen Safari-Browsers.

Das optische Erscheinungsbild wurde zum Teil grundlegend überarbeitet. So gibt es nun eine 3D-Vorschau der meistbesuchten Seiten beim Öffnen des Browsers (sehr schick!).

Das auf den ersten Blick sehr fremd anmutende und gewöhnungsbedürftige Tab-System in der Titelleiste weiß mir besonders zu gefallen. Vor allem auf kleinen Bildschirmen wie bei Netbooks hat man so einige Pixel mehr.

Wie schon im Mozilla Firefox 3 spendierte Apple seinem Schützling ein intelligentes Adressfeld, das die Benutzereingabe mit zuvor besuchten Seiten und Lesezeichen vergleicht und entsprechende URL-Vorschläge anzeigt.

Auch unter der Haube des Safari 4 hat sich einiges getan. Das flotte HTML-Rendern übernimmt eine aktuelle Version des WebKit-Browsers, wodurch S4 auch den ACID3-Test erfolgreich besteht.

In Sachen Javascript vertraut Apple auf die neu entwickelte Nitro-Engine, die – zumindest laut firmeneigenen Angaben – die weltweit schnellste JS-Engine auf dem Markt ist und alle Kontrahten in jedem Test hinter sich lässt (bis zu 30mal schneller als IE7). Unabhängige Tests müssen dies noch beweisen.

Ryan Doherty hat im Mozilla Webdev-Blog einen tollen Artikel darüber geschrieben, wie er die geniale CSS-Eigenschaft display: inline-block, die bisher nur von den aktuellsten Browsern (Firefox 3, Opera 7, Safari 3) unterstützt wird, nachgebaut hat.

Inline-Block ist – wie der Name bereits suggestiert – eine Mischung der Elementtypen block und inline.

Während Block-Elemente (h1-h6, div, usw.) im Textfluß stets neue Zeilen und größere Abstände zum nächstfolgenden Element erzeugen, erzeugen inline-Elemente (a, u, i, img, usw.) keine neue Zeile ordnen sich nebeneinander statt untereinander an.

Inline-Elemente belegen nur den Platz, den sie auch wirklich benötigen, und lassen sich in Höhe und Breite nicht beeinflußen. Einzige Ausnahme ist das img-Elemente, das zu den inline-Elementen gezählt wird. Dieses ist aber in Wirklichkeit ein Mittelding zwischen block und inline, also inline-block.

Elementen dieser Art verhalten sich wie inline-Elemente, lassen sich also in den Ausmaßen verändern, verursachen jede keine neue Zeile und ordnen sich somit nebeneinander an. Besondern attraktiv ist diese Darstellungsform für Fotogalerien, die bisher meist umständlich über Tabellenlayout umgesetzt wurden.

Und hier ist nun der Code für die perfekte Galerie, die vollständig auf CSS basiert:

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
</style>

<li>
        <div>
            <h4>This is awesome</h4>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
            alt="lobster" width="75" height="75"/>
        </div>
</li>

Nach Erscheinen der überragenden jQuery-Version 1.3 vor 5 Wochen und dessen kleinem Bugfix 1.3.1 kurze Zeit später, präsentierten die Entwickler vor wenigen Tagen das 1.3.2er Release ihrer Javascript-Bibliothek.

In dieser Version beschleunigten die jQuery-Macher die Perfomance nochmals deutlich, vor allem im Internet Explorer. So verarbeitet der IE jetzt Selektoren im Schnitt um 25% schneller.

Desweiteren wurde die Geschwindigkeit des :hidden/:visible-Selektors in allen Browsers extrem verbessert und erkennt zudem nun auch Elemente korrekt als „nicht sichtbar“, wenn dieses sich innerhalb eines verdeckten Elements befindet.

Sämtliche Höhen- und Breitenangaben werden von den verschiedenen Browsern nun ebenfalls nur noch in einem Bruchteil der Zeit berechnet.

Weitere Änderungen:

Funktionen zum Einfügen von Elementen in die HTML-Struktur geben nun anstatt des Elternelements die eingfügten Elemente zurück.

<div></div>
<div></div>
<script>
$('<p/>')
.appendTo('div')
.addClass('test');
</script>
// Ergebnis jQuery 1.3.1 (and älter)
<div><p class="test"></p></div>
<div><p></p></div>
// Ergebnis jQuery 1.3.2
<div><p class="test"></p></div>
<div><p class="test"></p></div>

Zudem wurde die Reihenfolge der zurückgegeben Elemente – wie in der Selektor-API vorgesehen – nun dahin gehend geändert, dass diese in entsprechend dem Vorkommen im Dokument zurückgeliefert werden.

// jQuery 1.3.1 (and älter)
$("h1, h2, h3");
Reihenfolge: h1, h1, h2, h2, h3, h3
// jQuery 1.3.2
$("h1, h2, h3");
Reihenfolge: h1, h2, h3, h3, h1, h2

Für viele Web-Entwickler und – Programmierer ist er ein Graus, der Internet Explorer in der Version 6. Der IE 6 ist nichts Ganzes und nicht Halbes.

Konsequent ignoriert der Microsoft-Browser über 5 Jahre hinweg nahezu alle Web-Standards vo W3C. Die Redmonder kümmerten sich lange Zeit nicht um ihr Kind, das vor etlichen jahren quasi das Web-Monopol besaß.

Während Microsoft schlief, entstand eine harte Konkurrenz. Angeführt von Mozillas Firefox rungen die Alternativ-Browser wie Opera, Safari/WebKit und seit Kurzem Googles Chrome dem IE Prozent um Prozent beim Marktanteil ab.

Nun haben Norwegens Adminstratoren die Schnauze gestrichen voll vom Internet Explorer 6. Die Betreiber von sämtlichen großen und pobulären Webseiten stellen die Unterstützung des Steinzeit-Renders umgehend ein.

Sollte ein Besucher mit IE6 auf einer dieser Seiten unterwegs sein, wird ihm ein Infofenster angezeigt, indem er aufgefordert wird, den Browser upzudaten oder einen der genannten Alternativ-Browser zu verwenden, um Zugriff auf den gesamten Inhalt der Homepage zu bekommen.

Seit einger Zeit gibt es die Physikengine Box2D. Diese Bibliothek hat der Japaner Ando Yasushi automatisch in Javascript portiert.

Um JS-Box2D nutzen zu können, benötigt man neben der eigenen Klasse noch Prototype und ExplorerCanvas, da die Darstellung sonst in Microsoft-Browser nicht funktioniert.

Auf der Projektseite stehen einige Beispiele und auch Codeschnipsel zur Verfügung um eigene Anwendungen mit Physikeffekten zu erstellen.

Ich kann mir vorstellen, dass einige pfiffige Leute daraus einen js-basierten Bridgebuilder entwerfen. Was für eine coole Vorstellung.

Lang, lang ist’s her als der Browser aus dem Namen Opera nicht nur der schlankeste, sondern auch der schnellste war.

Doch die Konkurrenz holte in den vergangenen Monaten sehr auf und überholte sogar das einstige Optimierungswunder. Nun möchte Opera die Performancekrone gerne zurückgewinnen und geht dabei neue Wege.

Die Vektorgrafik-Bibliothek Vega

Seit Version 8.0 kommt Opera mit der Vektorgrafik-Bibliothek Vega daher, die dem Browser Unterstützung für svg- und Canvas-Grafiken brachte.

Zur Berechnung der Grafiken bediente sich Vega jeher der Hardwarebeschleunigung moderner Grafikkarten  mittels Direct3D- und OpenGL-Schnittstelle.

Derzeit befindet sich mit der Version 2.3 der Presto-Engine zur HTML-Darstellung, der Nachfolger des für Opera 10 (Erscheinungstermin 2009) vorgesehenen Presto 2.2-Renderers, in der Entwicklung. In jener Version wird es möglich sein, die hardwarebeschleunige Vega-Engine auch für herkömmliches Rendern von HTML-Code einzusetzen. Aus Kompartibilitätsgründen wird es dennoch einen bisherigen Software-Renderpfad geben.

Für die Entwickler überwiegen die Vorteile dieses Weges deutlich.

Erstens lassen sich Hintergründe und Rahmen nach dem neuen CSS3-Standard über Vektorgrafiken viel leichter umsetzen.

Zweitens ist der Weg über die Hardwarebeschleunigung mittels moderner Grafikkarten um ein vielfaches performater als die langsamere Variante des Softwarerenderns.

Zudem wird es über Vega möglich, schnell und einfach zusätzliche, aufwendigere Grafikeffekte in die Benutzeroberfläche und letztlich auch in Webseiten einzubetten.

Voraussetzung für das Rendern mittels Vega ist, dass das Gerät auf dem der Browser läuft – theoretisch auch ein Smartphone wie das iPhone – eine DirectX 9- beziehungsweise OpenGL samt Framebuffer-Object (FBO)-kompartible Grafikkarte (oder Onboardgrafik) besitzt.

Desweiteren ist die Unterstützung von Pixel Shadern 2.0 beziehungsweise Fragment Shadern in OpenGL von Nöten. Diese Shader werden für das Darstellen von Filtern in SVG und Canvas sowie für für alle Arten von Schatten in den eben genannten Sprachen und HTML verwendet.

Ein Softwaremodus ist aber ebenso vorhanden, der notfalls alle Berechnungen über die CPU ausführt und damit mit jedem Gerät funktioniert.

Mit Carakan gegen SquirrelFish, Tracemonkey und V8

Im Vergleich mit den aktuellen HighSpeed-Javascript-Engines wie WebKit’s SquirrelFish Extreme und Google Chrome’s V8 ist die sparsame und dennoch performate JS-Engine Futhark ins Hintertreffen gerade. Die derzeit in der Entwicklung sich befindende Engine Carakan soll dies wieder ändern und Opera an die Spitze verhelfen.

Um das Ziel zu erreichen, erfährt das Innenleben Operas radikale Änderungen.

Das bisher verwendete stapelspeicher-basierte Bytecode-System weicht einem weniger Instruktionen beanspruchendem Register-Bytecode-System.

Obwohl die neue Engine diesen Bytecode bedeutend schneller ausführen kann, ensteht hierdurch ein größerer Mehraufwand bei einfachen Skripten, der sich wiederum negativ auf die Gesamtgeschwindigkeit auswirkt. Um diesem Effekt entgegen zu wirken, werden ganze Funktionen (oder Teile davon) zusammengefasst und als ganzes umgesetzt.

Aber auch die Methoden zum Anwenden von einfachen und komplexen regulären Ausdrücken bekamen eine Generalüberholung spendiert. So arbeitet die RegExp-Engine nun sehr viel effizienter indem viele unnötige und doppelte Arbeitsschritte unter Zuhilfenahme von einen „Tricks“ eingespart werden.

Desweiteren wurde die Verwaltung von Objekten überarbeitet. So werden Objekte in Carakan intern wie Klassen behandelt. Dies soll wiederum in Anwendungen, die eine Vielzahl von Objekten benutzen, einen enormen Geschwindigkeitschub verpassen.

In Zahlen ausgedrückt, soll Carakan im SunSpider-Benchmarkt mehr als 2,5mal schneller als die in Opera 10 (Alpha) verwendete Presto 2.2-Engine.

Die Arbeiten dauern noch an. Noch funktioniert nicht alles perfekt. Jedoch sprechen die Entwickler, dass Geschwindigkeitsverbesserungen um dem Faktor 50!!! in einigen speziellen Bereichen möglich sind.

Wann wird dies verfügbar sein?

Ich gehe davon aus, dass Opera seine neue Powerarchitektur noch in diesem Jahr – zumindest in Form einer Alpha-Version – neugierigen Entwicklern zur Verfügung stellen wird. Realistisch dafür ist ein Opera 10.5 oder Opera 11. Eine Roadmap liegt mir leider nicht vor.