für die Untoten

Seit Jahren dreht sich Frontend-Code nicht mehr um den IE6. Um halbwegs sauber zu coden und für Kunden und ihren IE6 ein vorzeigbares Ergebnis zu haben, empfiehlt es sich zu Dean Edwards IE7.js zu greifen. Im Nachgang sollte man allerdings so weit möglich mit CSS und Conditional Comments nacharbeiten.

Dann ist allerdings das Javascript viel zu fett und wenigstens im IE6 auch viel zu langsam. Und weil das Javascript nichts anderes als DOM-Manipulation macht und jQuery darin auch ganz gut ist, kann man sich ein eigenes IE7.js ganz schnell aus jQuery bauen.

Ich habe lange gerätselt, warum das Script bei komplexen Seiten derartig langsam ist. Der Grund sind imho beinahe ausschließlich Schreibprozesse, also das Hinzufügen von DOM-Nodes, hauptsächlich verursacht von den Pseudoklassen :after und :before. Sie weglassen ist keine Alternative, ich arbeite noch an einer Optimierung. Die Grundsätzliche Funktion des Scripts ist ziemlich einfach:


$.get(stylesheetUrl, function(data){
parsen(data);
});

Anders als die Stylesheets nachzuladen kommt man leider nicht an das komplette Stylesheet heran.


function parsen(data){
var lines = data.match(/[\s\w#,-\.>:]+:[\s\w#,-\.>:]+{[\w\W]+?}/gmi);
$.each(lines, function(i,val){
var style = val.split("}");
$.each(style[0].split(","), function(i,val){
if (val.indexOf(":after")>-1)
$(val.replace(":after", "")).after("<span style='" + style[1].replace("}", "") + "' />");
});
});
}

var line enthält alle Styleanweisungen auf Pseudoklassen. Daraus picken wir uns die :after-pseudoklassen heraus und hängen an die Selektoren ein span-Element mit den Style-Anweisungen. Gibt es eine content Anweisung, empfiehlt es sich, die Zeile umzuschreiben:


$("<span style='" + style[1].replace("}", "") + "' />").insertAfter(val.replace(":after", "")).html(content);

Hier kurz umrissen das weitere Vorgehen. Um wirklich nachhaltig zu arbeiten empfiehlt es sich, in parsen() erstmal ein Style-Object zu erzeugen, über das man dann iteriert.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s