Dr. Sabin Full arhitectura - Stack WebDevelopment Corneliu github.com/ Buraga unui alrra – /browser profs.info.uaic.ro/~ browser - logos Web busaco /
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco do nothing, say nothing, be nothing. “ Elbert Hubbard To avoid criticism ”
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco (sistem de operare,aplicație nativă, interpretor JavaScript procesare funcționalități de bază funcționalități mediu deexecuție rețea, grafică, fonturi, widget browser con - uri ținut, redare, ținut, native, Web … platformă acces acces la … … )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Un client( câmpului i.e. - antet antet browser www.useragentstring.com User Web) se identifică Web) se identifică via valoarea - Agent dintr - o cerere HTTP cerere o
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco include primul interpretor include primul 1994 Netscape 1993 Mozilla de programare (BOM de programare – www.nczonline.net/blog/ primul primul Mozilla/ – / Versi primul Communicator Communicator Versi browser u n e Mozilla Mozilla/ browser ( une Platform 2010 [ / 2.02 L 3.0 comercial: comercial: imbă / 01 – / (X JavaScript 12 ă [ fr Web: Web: 4 ; Browser 11 /history ] ( ] ( ] Criptare – ; I; AIXI; ; WinNT Platform Mozilla - of Mosaic - the Netscape ; I) I) ; 2 ) - [; / Object user 4.04 și oferă o interfață ă descriere ; - Criptare agent [en] ( [en] – Mosaic/ - Model string/ WinNT Navigator OS ) 0.9 ]) ) ; U) ;
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco 1994 miniaturizat (PDAminiaturizat – primul primul www.teco.edu/pocketweb/ browser – Apple Newton): Newton): Apple disponibil pe un dispozitiv peun disponibil PocketWeb
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco MSIE MSIE MSIE MSIE ofer 1996 Mozilla/ MSIE MSIE 8 11 ă multe facilități, ulterior standardizate deW standardizate ulterior facilități, ă multe – include dialectul dialectul include – 4 2.0 Mozilla – primul navigator produsdeMicrosoft: primul Mozilla — Mozilla (compatible; MSIE (compatible; 7 – / 4.0 / 2.0 Mozilla / 5.0 ( compatible ( compatible (Windows NT (Windows / 4.0 ( compatible JScript ; MSIE ; ; MSIE ; Versi 6.3 8.0 ; Trident/ ; și propriul BOM și propriul 3.02 ; MSIE ; une ; Windows NT Windows ; ; Windows; ; Sistem de operare Sistem 4.5 7.0 ; Mac_ ; ; rv: ; 11.0 95 5.1 ) PowerPC ; Trident/ ; ) like MSIE Gecko 3 ) C ) 4.0 ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco permite selectarea modului de identificare de selectarea modului identificare a permite și accesibilitate și accesibilitate (de exemplu, pringesturi) interacțiune 1996 focalizat pe utilizabilitate ( pe utilizabilitate focalizat Opera/ – primul navigator navigator primul Opera/ Versi 7.54 dev.opera.com une (Windows NT (Windows ( OS ; Criptare trialware 5.1 e.g. ; U) [en] ; ) [ , L tab imbă : Opera Opera - uri) ] browser 2 - ului
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Mozilla/ Mozilla Versiune www.nczonline.net/blog/ 1998 Mozilla / 5.0 Versiune (Windows; U; Windows NT U; Windows (Windows; Revizie – / 5.0 Gecko/ ( Gecko/ apariția procesorului de redare procesorului apariția rendering (X ( 11 Platform ) 20060823 20060823 20071127 20071127 Gecko/ ; U; Linux i U; Linux ; 2010 / 01 engine / ă 12 Versiune ; SeaMonkey /history Firefox Criptare 686 ; en ; ) - of 5.1 / 2.0.0.11 Gecko - - the US; Produs ; en ; ; - / OS user 1.1 rv - US; a : / - 1.8.1 agent CPU / Versiune rv - : b string/ 1.8.1.11 ; 2 L ) imbă ) ;
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco conținut structurat cu structurat conținut 1997 HitchHiker procesare de date +interacțiune prin — acces acces via 1999 (ulterior, (ulterior, – navigator Web pentru telefoane mobile: telefoane Web pentru navigator WAP WML ( Microsoft Mobile Explorer Explorer Mobile Microsoft Wireless Access Protocol Access Wireless ( Wireless Markup WMLScript Language ) 2.0 ) ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco fundația fundația interfață via XUL ( via XUL interfață Phoenix extensibil via extensibil ciclu de dezvoltare de de ciclu dezvoltare axat Mozilla Mozilla/ developer.mozilla.org/ ( asupra respectării standardelor Web standardelor respectării asupra 2002 Nightly 5.0 – add ) (Windows NT (Windows codul Gecko/ Extensible Firebird , - ons Aurora 20100101 20100101 Netscape (extensii, (extensii, etc.) teme vizuale 4 10.0 , săptămâni ( Beta User 2003 ; Win ; Firefox/ Mozilla disponibil , - 64 interface Release ) ; x ; 70 / Firefox 64 .0 Firefox – ; rv: ; ini 70 open Language țial .0 ) ( 2004 , 6 source : ) ) : Dr. Sabin Buragaprofs.info.uaic.ro/~busaco accent pus pe inovare ( inovare pe pus accent 2003 Mozilla/ AppleWebKit (KHTML, like Gecko) Version/Gecko) (KHTML, like – 5.0 Mozilla Apple Apple AppleWebKit (iPad; CPU OS CPU(iPad; Mozilla/ / 5.0 / Safari Versiune developer.apple.com/safari/ 5.0 (Platform / 124 124 (Macintosh; U; PPC Mac OS X; en) X; PPCMac OS U; (Macintosh; cu 12 (KHTML, like Gecko) Safari/ Gecko) (KHTML, like _ (KHTML, 0 WebKit < ă _ canvas 1 ; Criptare 12.0 like Mac OS X)AppleWebKit/Mac OS like Mobile/ > like bazat pe pe bazat , CSS, ; OS Gecko) Safari/ 15 / … E CPU 148 ) +performanță KHTML ; Safari/ 125.1 L imbă 604.1 Versiune ) 605.1.15 605.1.15 (KDE)
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco a datelor pe ecrane miniaturizate ( ecraneminiaturizate a datelorpe 2005 via sistemede a datelor stocare – procesare realizată realizată la niveldeserver procesare Opera Mini oferă primele facilități primeleoferă facilități de redare small ( data screen centers rendering ) ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Mozilla 2008 focalizare asupra performanței la nivel de client Web client de lanivel performanței asupra focalizare Mozilla/ include instrumente avansate dezvoltatori avansate pentru instrumente include / 5.0 – interfață interfață minimalistă + managerde bazat pe bazat proiectul 5.0 Google (Linux; Android (Linux; Chrome (KHTML, like Gecko) Chrome/ Gecko) (KHTML, like (Windows; U; Windows NT U; Windows (Windows; / 44.0.2403.117 44.0.2403.117 Chrome developer.chrome.com www.chromium.org 5.0.2 ; … folosind folosind ) Safari/ open AppleWebKit 5.1 537.36 source 0.2.149.29 WebKit ; en ; - / US) GSA/ 537.36 Chromium AppleWebKit Safari/ ; din 5.2.33.19 (KHTML, (KHTML, tab 525.13 2013 - uri .arm like / 525.13 525.13 : Blink Gecko)
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco (se oferă mașini virtuale pentru testare pe alte platforme) pealte testare mașini pentru (se oferă virtuale (bazat peTridentIE; întranzițiespre (bazat delavechiul (KHTML, Mozilla accent asupra suportului standardelor Web standardelor suportului asupra accent 2015 like rulează exclusiv pe sistemele sistemele pe Windows rulează exclusiv developer.microsoft.com/ / 5.0 Gecko) – (Windows NT (Windows Microsoft Microsoft Chrome / 70.0.3538.102 70.0.3538.102 10.0 Edge ; Win ; folosind folosind 64 ; x ; microsoft 64 Safari/ ) AppleWebKit EdgeHTML 537.36 - edge Edge / / 537.36 537.36 / 18.18362 Blink ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Care a este unui arhitectura navigator Web? general ă
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco componentele conform( work net rendering browser Grosskurth preter inter user JS de - baz interface engine engine ă & Godfrey, data par ale ser - unui navigatorWeb displayback 2006 ; Garsiel
-
end
, generic persistence 2011 data )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco proceselor majore efectuate privire asuprade ansamblu de browser - ul Web
getpocket.com/a/read/Dr. Sabin Buraga1735724031profs.info.uaic.ro/~busaco p rocesele implicate rendering (J. în în afișarea conținutului unei pagini Web Brereton engine et al. , 2011 )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco instrumente facilitând navigarea( facilitând instrumente meniu ( meniu Web de salvarea favorite adreselor acces la preferințe + alte componente altecomponente + acces la preferințe bara de introducere a dea bara introducere user interface căutare pe Web pe căutare URI … - urilor back/ ( address forward – e.g. bookmarks , extensii , bar button ) ) )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Dr. Sabin Buragaprofs.info.uaic.ro/~busaco unui utilizator pot fi stocate în cadrul unui unui stocate în cadrul fi pot utilizator unui exemplu tipic: exemplu diverse proprietăți și preferințe specifice specifice și preferințe diverse proprietăți user interface Firefox – http://mzl.la/ 1 BAQULj profil
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco „ punte ” î ntre interfa browser engine ț a cu utilizatorul ș i rendering engine
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco „ punte ” î ntre interfa browser engine ț nucleu a cu extensions plug add utilizatorul ( - - ons kernel ins ) ș i rendering engine
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco realizeaz ă rendering engine redarea con ț inutului solicitat
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco grafică vectorială documente reprezentări diverse: reprezentări realizeaz imagini PNG, JPEG) imagini raster (GIF, HTML ă rendering engine redarea – SVG ( ce includ resurse multimedia resurse ce includ con Scalable MathML ț inutului Vector , WebGL solicitat Graphics , … )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco î uzual, implică, n cu vederea aplicarea asociat rendering engine red propriet ă procesarea rii unei î ntr pagini ăț - o ilor zon arborelui CSS Web ă de aferente afi DOM șa re
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco componente, încărcate dinamic o aplicație Webo aplicație la nivel poatede client din diverse fi compusă ( Dimitri Glazkov managementul arborilor managementul DOM , 2013 )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco conform conform include un include tipului rendering engine interpretor de document Web Web de document ( parser ) HTML ) – DTD
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco conform conform standards include un include quirks moduri diferite diferite de interpretare moduri tipului rendering engine mode mode interpretor de document Web Web de document – – www.quirksmode.org HTML ( 5 parser , CSS , 3 ) HTML ) , SVG, – DTD …
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco pot fi folosite diverse euristici ( euristici diverse fifolosite pot mai ales în cazul codului care nu e bine care nuebine formatat mai alesîn codului cazul include un include rendering engine interpretor ( parser speculative ) HTML ) parsing ),
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco developer.mozilla.org/ pot fi folosite ( fifolosite diverseeuristici pot mai ales în cazul codului care nu e bine care nuebine formatat mai alesîn codului cazul include un include en rendering engine - US/docs/Mozilla/Gecko/ interpretor cazul cazul Firefox ( parser speculative HTML_parser_threading ) HTML ) parsing ),
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco sare arbore proce HTML DOM cod - generare arbore redare de determi layout nare - ( rendering afi layout ș are ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco cod surs arbore DOM ( arbore profs.info.uaic.ro/~busaco/teach/courses/web/ de revăzut prelegerea privitoarela DOM ă HTML rendering engine – încărcat (a)sincron de perețea (a)sincron încărcat Document Document Object web Model - film.html#week ) 7
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco procesare ( construire arbore preluare Element de HTML Body Paragraph Element HTML Text pe Element HTML Html re tokeniser Element date țea HTML Head Element HTML Title ) î n fazele document.write vederea execuție unui importante ob script () document HTML document ț inerii - uri JS ale arborelui proces ă DOM rii
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco < < p title > > > > Salut > DOM DOM LivingStandard > > , lume > ! ( Element 24 HTML Body Paragraph Element septembrie HTML Text Element HTML Html Element HTML 2019 Head Element HTML Title )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco modelul de procesare rendering engine în modtradițional, este sincron , single - threaded
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco (eventual, extern extern (eventual, programele modelul de ce procesare JavaScript JavaScript procesorul rendering engine – în modtradițional, î nc ă rcat este vor î nt de trebui sincron â lne pe ș alt sit alt te executate , codul single , dacă e posibil - threaded imediat )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco programele modelul p â n ă implicit, implicit, ce de codul ce procesare JavaScript JavaScript procesorul rendering engine procesul în modtradițional, JavaScript JavaScript este vor de î nt trebui sincron este â rendering lne ș executat te executate , codul single e oprit complet - threaded imediat
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco pot pot eventual după ce afostprocesat eventual după documentul developer.mozilla.org/docs/Web/HTML/Element/script fi executate pentru HTML rendering engine asincron 5 , script ( î ntr - urile - un JavaScript JavaScript thread separat ) ,
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco nu modific independent de deoarece ă arborele – rendering engine î n modnormal DOM, î nc ă rcarea procesarea – fi stilurile ș ierelor poate CSS CSS avea loc
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco arbore rendering engine getpocket.com/a/read/ de arbore redare DOM ( 1735724031 render tree )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco arborele rela de conform redare ț ia dintre Hyungwook a con arborele ț inutului Lee, DOM 20 ( render tree 14 ș i )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco responsabil cu aranjamentul ( cu aranjamentul responsabil compus din compus obiecte de redare ( alături de alături RenderBlock specific conținutului efectiv redatefectiv conținutului specific arbore rendering engine render , RenderText le de object redare layout , RenderInline tree , se , va generași: RenderObjects ) & afișarea & afișarea ( ) etc. paint ): )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco asociat arborelui obiectelor de asociat obiectelor redarearborelui ( include valorile calculate ale proprietăților de stil proprietăților ale calculate valorileinclude alături de alături arbore compus din compus rendering engine le style de redare RenderStyles tree , se , va generași: render object tree ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco folosit pentru elementele ce includ conținuturi externe conținuturi ceinclud elementele pentru folosit ( stabilește coordonatele în spațiu și în spațiu ordinea ( stabilește coordonatele
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco L. Weintraub relațiile între obiecte de redare ( , și “ How stratele WebKit asociate ( Renders the render Web ” , Fluent , render layers Conference objects ) , ) 2012
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco sau nodurile ascunse via proprietatea CSS CSS via proprietatea ascunse nodurile sau elementele non elementele în arbore rendering engine - le vizuale ( vizuale de redare e.g. , nu vor fi incluse vor fi nu < head > ,