One-Way-Data-Binding, Two-Way-Data-Binding und Virtual DOM Diff

model-view

Diesen Begriffen begegnet man immer wieder und den meisten dürfte bekannt sein, dass es dabei um Datenverarbeitung in Client-Applikationen geht. Genau genommen um die Verbindung zwischen Daten und dem UI. Aber worum handelt es sich bei diesen Begriffen genau? Stehen … Weiterlesen

Web Components: Shadow DOM

Web Components

Das Konzept des Shadow DOM wird in aktuellen Browsern bereits genutzt. Ersichtlich ist dies bei Standard Komponenten wie Slidern, Buttons oder Videointerfaces. Hinter der Fassade der Video Steuerelemente, welche ein Browser für den <video> Tag automatisch anzeigt, stecken lediglich eine … Weiterlesen

Web Components: Einführung

Web Components

Web Components geben den Entwickler die Möglichkeit das bestehende Set an HTML Elementen mit eigenen Definitionen zu erweitern. Diese Definitionen kapseln Markup und Styles gegen aussen und gewährleisten dass die Elemente immer wie gewünscht aussehen, ungeachtet des Kontexts. Das Konzept … Weiterlesen

Defer JavaScript für schnelleres Laden

JavaScript blockiert den Ladevorgang

Wenn der Browser-HTML-Parser zu einem SCRIPT-Tag mit SRC-Attribut gelangt, wird die entsprechende JavaScript-Datei heruntergeladen und der darin enthaltene Code sofort ausgeführt. Inhalte die nach dem SCRIPT-Tag stehen werden erst geparsed, nach dem das JavaScript ausgeführt wurde. Abhängig von Dateigrösse und Komplexität der JavaScript-Datei, kann der Parse-Prozess des Browsers und die Ladezeit der Website zum Teil massiv beeinträchtigt werden. Das führt zu einer unnötig langen Wartezeit für den Benutzer und einer schlechteren Position im Suchresultat von Suchmaschinen wie Goolge. Die Wartezeit kann verkürzt werden in dem das JavaScript, oder zumindest ein Teil davon zeitlich verschoben (engl. defer) geladen und ausgeführt wird. Dieser Vorschlag stammt von Google und ist als Best Practice unter den PageSpeed-Regeln dokumentiert.

(mehr …)