UN NAVIGATEUR, COMMENT ÇA MARCHE? Anthony

Dimension: px

Commencer à balayer dès la page:

Download "UN NAVIGATEUR, COMMENT ÇA MARCHE? Anthony Ricaud, @rik24d"

Thibault Fradette
il y a 8 ans
Total affichages :

1 UN NAVIGATEUR, COMMENT ÇA MARCHE? Anthony

2 Anthony Paul Mounir Robert

3 UN NAVIGATEUR, COMMENT ÇA MARCHE? Anthony

4 QUI? - Développeur web chez Mozilla mais - 1 modification dans Firefox - 23 dans WebKit

5 DES NAINS SUR DES ÉPAULES DE GÉANTS - Robert O Callahan, Boris Zbarsky, David Baron (Mozilla) - Dave Hyatt, Simon Fraser (Apple) - Paul Irish, Alex Russell, Tony Gentilcore, (Google) - Anne Van Kersteren (Opera) - Nicholas Zakas, Eric Law (Microsoft)

(Apple) - Paul Irish, Alex Russell, Tony Gentilcore, (Google)

7 CHROME

8 CONTENT

9 C EST COMPLIQUÉ

10 C EST COMPLIQUÉ Système de Couche cache Moteur JS accessibilité Parseur Couche Rendu des URL Cookies réseau polices Base de Bindings données DOM Décodage d images Plugins Défilement Dessin Téléchargement Thème natif

réseau polices Base de Bindings données DOM Décodage

11 PRESTO GECKO WEBKIT TRIDENT

12 PRESTO GECKO WEBKIT TRIDENT

13 DÉBUT DE REQUÊTE - On lit l URL : protocole, domaine - Requête DNS -> Ouverture TCP, Requête HTTP

14 RÉPONSE DU SERVEUR HTTP/ OK Content-Type: application/xhtml+xml

15 RÉPONSE DU SERVEUR HTTP/ OK Content-Type: application/xhtml+xml MODE XML

16 RÉPONSE DU SERVEUR HTTP/ OK Content-Type: application/xhtml+xml MODE XML

17 RÉPONSE DU SERVEUR HTTP/ OK Content-Type: application/xhtml+xml MODE XML

18 RÉPONSE DU SERVEUR HTTP/ OK Content-Type: application/xhtml+xml Content-Type: text/html <html>

19 RÉPONSE DU SERVEUR HTTP/ OK Content-Type: application/xhtml+xml Content-Type: text/html <html> MODE QUIRKS

20 RÉPONSE DU SERVEUR HTTP/ OK Content-Type: application/xhtml+xml Content-Type: text/html <html> MODE QUIRKS

21 RÉPONSE DU SERVEUR HTTP/ OK Content-Type: application/xhtml+xml Content-Type: text/html <html> MODE QUIRKS

22 RÉPONSE DU SERVEUR HTTP/ OK Content-Type: application/xhtml+xml Content-Type: text/html <html> <!doctype html> <html>

23 RÉPONSE DU SERVEUR HTTP/ OK Content-Type: application/xhtml+xml Content-Type: text/html <html> <!doctype html> <html> MODE STANDARD

24 HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5

25 HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5 ILS S EN FICHENT

26 <!doctype html> <html> <head> <title>kiss</title> </head> <body> <div> <h1>bisous</h1> <p>bonnes Idées Simples Ou Ultra Sensées.</p> </div> </body> </html>

27 HTML HEAD BODY TITLE DIV KISS H1 P BISOUS BONNES IDÉES SIMPLES OU ULTRA SENSÉES.

28 HTML HEAD BODY TITLE ARBRE DOM DIV KISS H1 P BISOUS BONNES IDÉES SIMPLES OU ULTRA SENSÉES.

29 HTML HEAD BODY TITLE DIV KISS H1 P BISOUS BONNES IDÉES SIMPLES OU ULTRA SENSÉES.

30 SOUS-RESSOURCES

31 SOUS-RESSOURCES - Image

32 SOUS-RESSOURCES - Image - Lance le téléchargement, non bloquant

33 SOUS-RESSOURCES - Image - Lance le téléchargement, non bloquant - Lance un décodeur

34 SOUS-RESSOURCES - Image - Lance le téléchargement, non bloquant - Lance un décodeur - CSS

35 SOUS-RESSOURCES - Image - Lance le téléchargement, non bloquant - Lance un décodeur - CSS - Lance le téléchargement, non bloquant

36 SOUS-RESSOURCES - Image - Lance le téléchargement, non bloquant - Lance un décodeur - CSS - Lance le téléchargement, non bloquant - Puis c est intéressant

37 CSS BUCKETS ID CLASS TAGNAME AUTRES

38 CSS BUCKETS ID CLASS TAGNAME AUTRES

39 CSS BUCKETS div ID CLASS TAGNAME AUTRES

40 CSS BUCKETS div ID CLASS TAGNAME AUTRES

41 CSS BUCKETS.item div ID CLASS TAGNAME AUTRES

42 CSS BUCKETS.item div ID CLASS TAGNAME AUTRES

43 CSS BUCKETS #sidebar.item div ID CLASS TAGNAME AUTRES

44 CSS BUCKETS #sidebar.item div ID CLASS TAGNAME AUTRES

45 CSS BUCKETS div#sidebar #sidebar.item div ID CLASS TAGNAME AUTRES

46 CSS BUCKETS div#sidebar #sidebar.item div ID CLASS TAGNAME AUTRES

47 CSS BUCKETS div p div#sidebar #sidebar.item div ID CLASS TAGNAME AUTRES

48 CSS BUCKETS div#sidebar div p #sidebar.item div ID CLASS TAGNAME AUTRES

49 CSS BUCKETS :visited div#sidebar div p #sidebar.item div ID CLASS TAGNAME AUTRES

50 CSS BUCKETS div#sidebar div p #sidebar.item div :visited ID CLASS TAGNAME AUTRES

51 DOM TREE + PARSING CSS HTML DOM Tree CSS Style Rules

52 DIV class="item" CSS MATCHING BODY DIV DIV id="sidebar" DIV class="item" DIV class="item" div.item #sidebar div#sidebar div p ul p ul > p body > div p #sidebar p P P P

53 RENDER TREE HTML HEAD BODY TITLE DIV KISS H1 P BISOUS BONNES IDÉES SIMPLES OU

54 RENDER TREE HTML Viewport Scroll HEAD BODY Block TITLE DIV Block Block KISS H1 P Block Text Block Text BISOUS BONNES IDÉES SIMPLES OU

55 DOM TREE + RENDER TREE HTML DOM Tree Render Tree CSS Style Rules

56 UN REFLOW OU LAYOUT

57 UN REFLOW OU LAYOUT

58 HTML DOM Tree Render Tree Layout CSS Style Rules

59 RESTE LE PAINT HTML DOM Tree Render Tree Layout Painting CSS Style Rules

60 PAINT?

61 PAINT? - Historiquement, le processeur dessine tout

62 PAINT? - Historiquement, le processeur dessine tout - Mais on délègue de plus en plus au processeur graphique, spécialisé

63 PAINT? - Historiquement, le processeur dessine tout - Mais on délègue de plus en plus au processeur graphique, spécialisé - La fameuse accélération matérielle

64 SOUS-RESSOURCES - Image - Lance le téléchargement, non bloquant - Lance un décodeur - CSS - Lance le téléchargement, non bloquant - Puis c est intéressant

65 SOUS-RESSOURCES - Image - Lance le téléchargement, non bloquant - Lance un décodeur - CSS - Lance le téléchargement, non bloquant - Puis c est intéressant - JS - Lance le téléchargement, presque bloquant

66 JAVASCRIPT - Ne pas confondre JS et DOM - DOM = lent - Attention aux déclenchements de reflow

67 HTML DOM Tree Render Tree Layout CSS Style Rules

68 REFLOW POTENTIEL HTML DOM Tree Render Tree Layout Painting CSS Style Rules

69 JAVASCRIPT - Ne pas confondre JS et DOM - DOM = lent - Attention aux déclenchements de reflow

70 JAVASCRIPT - Ne pas confondre JS et DOM - DOM = lent - Attention aux déclenchements de reflow - Petit mot sur les nouveaux moteurs

71 Merci Mauriz

72 DES QUESTIONS? Merci Mauriz

Documents pareils

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau) CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.