Léiert Är Tools besser kennen (N°1) - Den HTML Rendering Engine

An eisen Aarbechtsplazen ass et gutt d'Tools déi mir benotzen besser ze verstoen fir se besser ze benotzen an dat Bescht aus hinnen ze kréien. Hei ass den éischten Artikel vun enger Serie déi kommend, haut zentréiert op e Basisinstrument, dat mir all Dag benotzen ouni onbedéngt driwwer nozedenken: den HTML Rendering-Motor.

"Als Webentwéckler, léiert d'Bannenaarbecht vun engem Browser hëlleft Iech besser Entscheedungen ze treffen an d'Begrënnung hannert gutt Entwécklungspraktiken ze verstoen."
-Paul Irish, Chrome Entwéckler Relatiounen

[Trennungstyp = "" Gréisst = "" Ikon = "Stär"]

Wat ass en HTML Rendering Engine?

Wéi Dir wahrscheinlech scho wësst, ass den HTML Rendering-Motor eng Subroutine, eng Rei vu Softwarebibliothéiken déi Browser benotze fir Websäiten ze weisen. Et ass spezifesch fir all Browser. Dat ass ze soen datt aus dem Code deen Dir schreift, Ären Entwéckler, den HTML Rendering-Motor e Visual erstellt deen de Benotzer op sengem Écran gesitt, a mat deem hien fäeg ass ze interagéieren.
Et ginn e puer (Lëscht op Wikipedia).
Engine_vaz
Wéinst dëse Renderingmotoren huet all Browser seng eege Interpretatioun vun HTML, JavaScript an CSS. Och dat mécht eis an den Integratiounsphasen regelméisseg Suergen.
De Renderingmotor ass e bësse wéi de Keystone vum Browser, oder säin Häerz wéi Dir et virzitt. Seng Verantwortung ass ganz wichteg. Den Affichage vum Inhalt um Écran wéi gewënscht ass eist Haaptziel.
[Trennungstyp ="" Gréisst ="" Ikon ="Stär"] Fir dësen Artikel hunn ech gewielt fir op HTML Renderer ze fokusséieren, awer nach ëmmer bewosst datt et aner Aarte vu Renderer gëtt. Et ass net en Tool spezifescht nëmme fir d'Gestioun vun HTML Dokumenter.

E Rendering-Motor ass Software déi e Bild vun digitalen Donnéeën erstallt. de Begrëff ass generesch a gëllt fir verschidden Aarte vu Programmer déi méi oder manner einfach Aufgaben oder Berechnunge maachen.
E Rendering-Motor kann zum Beispill verantwortlech sinn fir en 3D Bild aus Informatioun iwwer d'Objeten ze zéien, d'Textur vun hirer Uewerfläch an d'Liichtquellen ze berücksichtegen.

Ofhängeg vum Fall, ass all HTML Rendering-Motor méi oder manner aktuell op W3C Standards .... Oder méi oder manner Buggy. Zum Beispill ass d'Rendering vun CSS3 Animatiounen net d'selwecht tëscht Firefox (deen ënner Gecko leeft) a Chrome (wat ënner Blink / Webkit leeft): D'Resultat ass vill méi flësseg op Chrome, wärend mir e Rendez-vous op Firefox kréien.
modern-Zäit-5
Par défaut kann de Renderingmotor HTML, XML Dokumenter a Biller weisen. Et kann aner Zorte mat engem Plug-in (oder Browser Extensioun) weisen. Zum Beispill gëtt e PDF-Dokument mat engem PDF Viewer Plug-in ugewisen, deen Dir an Ärem Browser installéiert (wéi Adobe Reader), Flash Elementer wäerte siichtbar sinn mam Adobe Flash Shockwave Player Plug-in, etc.
Awer loosst eis op d'Haaptthema konzentréieren: HTML a Biller ze weisen déi mat CSS formatéiert sinn.
[Trennungstyp = "" Gréisst = "" Ikon = "Stär"]

A wéi funktionnéiert dëst Déier?

Als éischt kritt de Renderingmotor den Inhalt vum HTML-Dokument deen de Benotzer wëllt weisen (hien huet zum Beispill op e Link geklickt). Et wäert an 8kb Stécker lued.
De Renderingmotor wäert den HTML Dokument analyséieren an et wäert den Inhaltsbaum aus den Noden opbauen, déi am Dokument begéint sinn. All Node entsprécht all Element.
Et wäert dann d'Stildaten analyséieren, déi an den externen CSS-Dateien enthale sinn, awer och déi, déi direkt an d'HTML-Dokument agebaut sinn, d'Stilelementer. Dës Informatioun gëtt benotzt fir en anere Bam ze kreéieren.
De Renderbaum enthält Rechtecker mat visuellen Attributer wéi Faarwen an Dimensiounen. D'Rechtecke sinn an der richteger Uerdnung fir um Bildschierm ze weisen.
Nom Konstruktioun vum Renderingbaum kritt de Motor déi exakt Koordinate wou et muss d'Elementer um Bildschierm erscheinen. Et gëtt 'liesen' an all Node gëtt mat den UI Hannergrondschichten gezeechent.

Wat Dir am Kapp behalen muss ass datt et e graduelle Prozess ass. De Renderer weist all Inhalt deen sou séier wéi méiglech op den Ecran kënnt. Et wäert net waarden fir all HTML Code ze analyséieren ier Dir ufänkt d'Finale Vue ze bauen.

Dir hutt dëst Phänomen sécher scho gemierkt wann Är Internetverbindung méi lues ass wéi soss, an d'Websäit "gebrach" schéngt. Tatsächlech ginn Websäite net Linn fir Zeil ugewisen, vun uewe bis ënnen, wéi Biller. Den ënneschten Deel vun der Säit ka ganz gutt als éischt ugewise ginn wann den ieweschten Deel méi schwéier ass fir ze laden. Deeler vum Inhalt ginn parséiert a gewisen, während de Prozess weider geet mat de Rescht vun der Säit weider ze lueden. Déi lescht Elementer déi ugewise ginn sinn déi schwéierst Biller.
[Trennungstyp = "" Gréisst = "" Ikon = "Stär"]

D'Haaptrei HTML Rendering Motore

- Geckos

Ursprénglech "NGLayout", Gecko ass Open Source a gratis, et gouf vun der Mozilla Foundation am Joer 1998 gestart, wéi Netscape de Quellcode vu sengem Webbrowser Netscape Navigator publizéiert huet, sou datt et Open Source ass. Netscape huet dunn d'Mozilla Foundation erstallt, mam Zil weider Navigator z'entwéckelen. Gecko ass dann en integralen Deel vum Netscape Navigator.

Et gouf entwéckelt fir HTML, CSS, XUL a JavaScript ze liesen an ze interpretéieren. Et gëtt a verschiddenen Uwendungen wéi Firefox, Thunderbird, Netscape Navigator, AOL Explorer oder Camino fonnt. Produkter déi déiselwecht Versioun vum Gecko benotzen hunn identesch Standards Support.
Dem Gecko säin Zil ass e portable Motor deen Webnormen a W3C Empfehlungen respektéiert. Et funktionnéiert op Windows, Linux a Mac OS X2 Betribssystemer. Et ass an der C++ Programméiersprooch geschriwwen a verdeelt ënner de MPL, GPL an LGPL3 Lizenzen. (Quelle: Wikipedia)

- Trident

Trident ass den Numm vun der Websäit Displaymotor déi am Internet Explorer a sengen Windows Versiounen benotzt gëtt, an duerch Extensioun all Browser baséiert op Internet Explorer. Et gëtt och dacks als "MSHTML" bezeechent, entsprécht dem Numm vun der dynamescher Linkbibliothéik vum Motor. Et gëtt vu Microsoft an C++ entwéckelt

Et gouf als Softwarekomponent vun der COM Layer entworf, wat d'Entwéckler erlaabt Motorfunktionalitéit un hir Uwendungen an all Entwécklungsëmfeld ze addéieren, deen COM ënnerstëtzt, och Visual Studio. (Quelle: Wikipedia)

- Webkit

WebKit ass eng gratis Softwarebibliothéik déi d'Entwéckler erlaabt eng Websäit Renderingmotor einfach an hir Software z'integréieren. Et ass verfügbar ënner der BSD a GNU LGPL Lizenz. Ursprénglech reservéiert fir de Mac OS X Betribssystem (vun der Versioun 10.3 Panther), ass et op Linux a Windows portéiert ginn. Also den Hafen vu WebKit fir d'GTK + a Qt Ëmfeld ginn respektiv WebKitGTK + an QtWebKit genannt.

WebKit ass eng Gabel vum KHTML Rendering-Motor vum KDE-Projet, deen besonnesch am Konqueror Browser benotzt gëtt. Et integréiert zwou Ënnerbibliothéiken: WebCore an JavaScriptCore entspriechend respektiv KHTML a KJS.
Et passt erfollegräich den Acid2 Test an d'Versioun an der Entwécklung kritt 100% am Acid3 Test zënter dem 27. Mäerz 2008.
Webkit integréiert e JavaScript-Motor deen den selwechten Numm huet. Et ass zanter nei geschriwwe ginn, den neie Motor heescht elo SquirrelFish, vill méi séier wéi dee virdrun.
Am Februar 2012 huet den Erfolleg vun der Verbreedung vum WebKit "d'OpenWeb-Grupp, déi d'Standardiséierung vu Webentwécklungstechnologien plädéiert, en Appel un d'Entwéckler lancéiert an d'Konsequenze vun der WebKit Dominanz op Handy an Entwécklerpraktiken ze weisen." Am Januar 2013 stellt déi dominant Positioun vum Webkit nach ëmmer e Problem. (Quelle: Wikipedia)
Google huet viru kuerzem Webkit verlooss fir erstellt Ären eegene Renderingmotor, Blink.
De Rescht ... Geschwënn 🙂
Emmanuelle Guyot - UX-Wëssenschaftler