Slide 1
Slide 1 text
ANA LUIZA BASTOS
github.com/anabastos
@naluhh
@anapbastos
Software Developer na Quanto e
cientista da computação pela
PUC-SP
anabastos.me
Slide 2
Slide 2 text
JSLADIES
fb.com/jsladiesbr
twitter.com/jsladiessp
meetup.com/JsLadies-BR
LAMBDA.IO
t.me/lambdastudygroup
github.com/lambda-study-group
meetup.com/Lambda-I-O-Sampa-
Meetup
Slide 3
Slide 3 text
NAVEGADORES POR DE
BAIXO DOS PANOS
Slide 4
Slide 4 text
Estrutura high level do navegador
Como funciona o parser do navegador
Fluxo renderização de paginas web
Otimizações de critical render path
Slide 5
Slide 5 text
Qual a função do navegador?
Slide 6
Slide 6 text
Apresentar o conteúdo requisitado de
um servidor de acordo com a
especificação do HTML CSS(W3C) e
servindo em uma janelinha
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
COMPONENTES PRINCIPAIS DO
NAVEGADOR
Slide 9
Slide 9 text
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JS
INTERPRETER
UI BACKEND
Slide 10
Slide 10 text
THE MAIN FLOW
Slide 11
Slide 11 text
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JS
INTERPRETER
UI BACKEND
Slide 12
Slide 12 text
USER INTERFACE
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
anabastos.me
Slide 15
Slide 15 text
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JS
INTERPRETER
UI BACKEND
Slide 16
Slide 16 text
Parsear o URL(procolo, dominio)
Request DNS (anabastos.me => 63.245.208.161)
Abre uma conexão TCP
Envia uma requisição HTTP
Slide 17
Slide 17 text
SERVERZINHO
HTTP/1.1 200 OK
Content-Type: text/html RESPONSE
Slide 18
Slide 18 text
SERVERZINHO
HTTP/1.1 200 OK
Content-Type: text/css RESPONSE
Slide 19
Slide 19 text
O conteúdo requisitado é carregado em
pequenos chunks.
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
CONCURRENT REQUESTS
Slide 22
Slide 22 text
style.css index.html
dog.png britneySpears-
toxic.mp3
?????
Slide 23
Slide 23 text
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JS
INTERPRETER
UI BACKEND
Slide 24
Slide 24 text
BROWSER ENGINE
Intermedia UI e a engine de renderização
Responsavel por persistência dados(Cookies, LocalStorage,
IndexedDB).
Web APIs(canvas, WebSocket, Animation, WebWorkers,
WebGL)
Slide 25
Slide 25 text
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JS
INTERPRETER
UI BACKEND
Slide 26
Slide 26 text
RENDERING ENGINE
Slide 27
Slide 27 text
WEBKIT GECKO BLINK TRIDENT
Slide 28
Slide 28 text
FLUXO DE
RENDERIZAÇAO
Slide 29
Slide 29 text
h1 [] [ text “Olá mundo”]
p [ class =”alert”] [ text “tudo bem?”]
h1 [] [ text “Olá mundo”]
p [ class =”alert”] [ text “tudo bem?”]
h1 {
color: red;
}
Olá
h1 [] [ text “Olá mundo”]
p [ class =”alert”] [ text “tudo bem?”]
h1 {
color: red;
}
Slide 30
Slide 30 text
BYTES
3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20
3C 73 70 61 6E 3E 77 6F 72 6C 64 21 3C 2F
21 73 70 61 6E E 77 6F 72 6C 64 21 3C 2F 21
73 70 61 6E E 77 6F 72 6C 64 21 3C 2F 21 73
70 61 6E 3C 62 6F 64 79 3E 48 65 6C 6C 6F
2C 20 3C 73 70 E 77 6F 72 6C 64 21 3C 6E E
77 6E E8 77 B2 6E E 77 6E E8 77 B2 B1
CHARACTERS(UTF-8)
Olá
tudo bem?
Slide 31
Slide 31 text
PARSER
Construção da árvore de renderização
Slide 32
Slide 32 text
PARSEAR
Parsear significa traduzir uma estrutura para algo que o
código possa usar.
O resultado geralmente é um árvore de nós que
representam a estrutura dos documentos
Slide 33
Slide 33 text
JSON.parse
Slide 34
Slide 34 text
GRAMMARS
REGRAS DE SYNTAX QUE O DOCUMENTO DEVE SEGUIR DE
ACORDO COM A LINGUAGEM
TODA LINGUAGEM TEM UMA GRAMATICA
DETERMINISTICA(VOCABULARIO)
Slide 35
Slide 35 text
GRAMMARS
LINGUAGENS DE PROGRAMACAO
LINGUAGUENS DE MARCACAO
LINGUAGENS DE ESTILO
SAO
“CONTEXT FREE GRAMMAR”
Slide 36
Slide 36 text
A engine começa a parsear o HTML e
converte-lo a “Nós da DOM”
Esses DOM nós se tornam uma arvore
chamada “content tree”.
Slide 37
Slide 37 text
CHARACTERS(UTF-8)
...
Olá Intercon
tudo bem?
CONSTRUÇÅO DE ÁRVORE TOKENIZAÇÅOSlide 38
Slide 38 text
ANALISE LEXICA
ANALISE SINTATICA
{
PARSER
Slide 39
Slide 39 text
ANALISE LEXICA
(SE O VOCABULARIO FAZ SENTIDO)
ANALISE SINTATICA
(SE FAZ SENTIDO)
Oi
Ash87h12d
Oi tudo bom?
? oi tudo
Slide 40
Slide 40 text
ANALISE LEXICA
Com as regras da gramática quebra o
código em tokens internamente que
definem suas propriedades e regras.
Slide 41
Slide 41 text
Eu vou no HTMLSP
Pronome Verbo Contração Substantivo
Slide 42
Slide 42 text
Dentro do HTML tenho inicio de tags, fim de
tags, nomes de tributos e valores de
atributos
Slide 43
Slide 43 text
Hello
startTag Text endTag
Slide 44
Slide 44 text
Eu vou no HTMLSP Hello
HTML
BODY
‘Hello’
?
Slide 45
Slide 45 text
h1 [] [ text “Olá mundo”]
p [ class =”alert”] [ text “tudo bem?”]
![]()
ImageTag
Olá
l á StartTag: h1 EndTag: h1 Character Character Character O TOKENS
Slide 46
Slide 46 text
span { clor: #FFFF }
consolr.log
Slide 47
Slide 47 text
Esses tokens são enviados para o construtor da
árvore que os reconhece e monta a nossa DOM.
Slide 48
Slide 48 text
ANALISE SINTATICA
É responsável por construir uma árvore de
nós analisando se a estrutura do
documento está de acordo com as regras
sintáticas
Slide 49
Slide 49 text
HTMLHtmlElement
HTMLBodyElement
HTMLHeaderElement
HTMLHeadElement
Olá
![]()
HTMLImageElement
l á O
Slide 50
Slide 50 text
h1 [] [ text “Olá mundo”]
p [ class =”alert”] [ text “tudo bem?”]
Olá
Slide 51
Slide 51 text
HTMLHtmlElement
HTMLBodyElement HTMLHeadElement
HTMLHeaderElement
Olá
HTMLDivElement
HTMLImageElement
HTMLDivElement
HTMLImageElement
Slide 52
Slide 52 text
O resultado final de todo esse processo é o Document Object
Model, ou "DOM", da nossa página simples, que é usado pelo
navegador para todos os demais processamentos da página.
Slide 53
Slide 53 text
BYTES
CHARACTERS
CONSTRUÇÅO DE
ÁRVORE
TOKENIZAÇÅO
Slide 54
Slide 54 text
Enquanto a DOM estava sendo renderizada nosso style.css é
encontrado referenciado em nosso head.
Assim como o HTML precisamos converter o CSS pelo mesmo
processo desta vez criando um “CSS Object Model” ou CSSOM
Slide 55
Slide 55 text
“Flex” e o”Bison” são parser generators do WebKit para parsear
automaticamente de arquivos com gramática CSS.
As regras de objetos CSS contêm seletores e a declaração dos
objetos correspondentes a gramática CSS.
Slide 56
Slide 56 text
h1 [] [ text “Olá mundo”]
p [ class =”alert”] [ text “tudo bem?”]
h1 {
color: red
}
CSSStyleElement
CSSRule
Selectors
h1
Declaration
Color red
Slide 57
Slide 57 text
BYTES
CHARACTERS
CONSTRUÇÅO DE
ÁRVORE
TOKENIZAÇÅO
CSS
Slide 58
Slide 58 text
DOM
CSSDom
Slide 59
Slide 59 text
Com a DOM e a CSSOM juntos o
navegador consegue criar a árvore de
renderização.
Slide 60
Slide 60 text
DOM
CSSDom
Render
Tree
ATTACHMENT
Slide 61
Slide 61 text
No momento de calcular os estilos da página o navegador começa
com a regra mais aplicável(body) e logo em seguida vai refinando
para as regras mais específicas.
Slide 62
Slide 62 text
BODY
IMG
H1
Color: Red;
HEAD
HTML
RENDER TREE
Slide 63
Slide 63 text
LAYOUT / REFLOW
Layout é o processo recursivo que começa da raiz da
arvore() e continua recursivamente por toda a
hierarquia do HTML computando informação geométrica de
que cara render requer
Dando as exatas coordenadas de onde cada nó deve aparecer
na tela.
Slide 64
Slide 64 text
BODY
IMG
H1
Color: Red;
HEAD
HTML
RENDER TREE
Posição: (0,0)
Dimensão: Viewport
Dimensão: Block
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JS
INTERPRETER
UI BACKEND
Slide 67
Slide 67 text
PAINTING
A camada UI Backend tem o papel de atravessar cada
elemento da render tree desenhando usando toda a UI da
página.
Slide 68
Slide 68 text
Olá
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
BYTES
CHARACTERS
CONSTRUÇÅO DE
ÁRVORE
TOKENIZAÇÅO
JAVASCRIPT
Slide 72
Slide 72 text
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JS
INTERPRETER
UI BACKEND
Slide 73
Slide 73 text
SPIDERMONKEY V8
Slide 74
Slide 74 text
O javascript pode criar e modificar todo o DOM ou o
CSSOM.
Quando o analisador do HTML encontra uma tag “script”
ela para toda a construção da DOM e só retoma quando
conclui a execução.
Slide 75
Slide 75 text
Para melhorar a experiência do usuário o engine de
renderização vai tentar mostrar o conteúdo na tela assim
que possível então não espera que outro HTML seja
parseado até começar a construir a página
Slide 76
Slide 76 text
OK
DE QUE ISSO
IMPORTA?
Slide 77
Slide 77 text
CRITICAL
RENDER PATH
Slide 78
Slide 78 text
Série de eventos envolvendo
baixar resources html css e
scripts, processar e renderizar o
primeiro pixel na tela.
Slide 79
Slide 79 text
Se a página html contêm algum script altamente
bloqueante o render start, o tempo levado para
receber o primeiro byte de dados para o URL
primário, vai ser atrasado
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
A primeira visualização da página ou o que o
usuário vê é crítica para experiência do
usuário.
Tentar otimizar cada passo no critical render
path vai acelerar o processos de renderização
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
OTIMIZAR?
Slide 86
Slide 86 text
PRIORIDADES
Slide 87
Slide 87 text
Otimizando a ordem de cada recurso crítico
baixado e fazendo lazy-loading recursos não
críticos podemos minimizar o tempo de total do
critical render path.
Slide 88
Slide 88 text
Digamos que você tem um arquivo Javascript:
Esse script também é bloqueante na renderização do navegador
pois aguarda até que o recurso seja retornado.
Slide 89
Slide 89 text
ASYNC vs DEFER
Slide 90
Slide 90 text
Indica que é um asset não bloqueante então deve ser
executado de forma assíncrona(coisas pequenas ou
prioritárias).
Indica que o script só deve ser executado depois de toda a DOM
ser parseada.
Slide 91
Slide 91 text
Tanto o HTML quanto o CSS são recursos bloqueantes, ou seja,
não existe sem renderização sem que ambos tenham uma
arvore de renderização.
Slide 92
Slide 92 text
MEDIA CSS
Slide 93
Slide 93 text
Bloqueia a renderização do navegador até que o recurso seja retornado.
Slide 94
Slide 94 text
Dependendo da orientação do dispositivo bloqueia a renderização do
navegador até que o recurso seja retornado.
Só aplica o CSS quando a página está sendo já gravada. Portanto é não
bloqueante.
Slide 95
Slide 95 text
PRELOAD vs
PREFETCH
Slide 96
Slide 96 text
Força o navegador a priorizar recursos que não devem ser
bloqueados
Avisa o navegador que recurso até é importante em futuras
navegações mas não deve ser priorizado
Slide 97
Slide 97 text
INITIAL
PAYLOAD
Slide 98
Slide 98 text
DNS Prefetching
Slide 99
Slide 99 text
DNS Lookup
anabastos.me => 123.54.92.4
Resources externos
Slide 100
Slide 100 text
- DNS Prefetching
- Conecta TCP
- Requisita HTTP
Slide 101
Slide 101 text
Se você tem CERTEZA que vai usar essa
conecção
Slide 102
Slide 102 text
as
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
Slide 105
Slide 105 text
Minimizar o tamanho dos bytes de
resources críticos pode reduzir o
overhead no processo de
renderização
Slide 106
Slide 106 text
IMAGENS
Existem técnicas de otimização de imagens para reduzir
o load time da página(compressão, escala, CSS sprites)
Prefira efeitos CSS como sombras ou gradientes para
evitar imagens.
SVGS para logos.
Slide 107
Slide 107 text
Diminuir o tamanho do
código de bibliotecas
Slide 108
Slide 108 text
React -> Preact
Ramda -> Rambda
Lodash -> UnderWater
Immutable -> Immutable-Light
Slide 109
Slide 109 text
Diminuir o tamanho
dos pacotes a serem
carregados
Slide 110
Slide 110 text
WEBPACK
Slide 111
Slide 111 text
node_modules
Slide 112
Slide 112 text
Pra lidar com código
bloqueante
Javascript...
Slide 113
Slide 113 text
ensure
Dynamic Import está em stage3 da proposal para o js
Plugin Babel (syntax-dynamic-import)
require.ensure([/* dependencies */], require => {
const Foo = require('foo');
}, error => {
// handle error
}, 'custom-bundle-name');
Slide 114
Slide 114 text
CODE SPLITTING
&
LAZY LOAD
Slide 115
Slide 115 text
O code splitting permite que você divida seu código em
pequenos bundles que podem ser carregados sob
demanda ou em paralelo.
Com isso você tem bundles menores e controle de
prioridade sobre seus recursos.
Slide 116
Slide 116 text
/home
/about
/contact
Pagina Inicial
() => import('./About')
() => import('./Contact)
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
Web Developers Google - Critical Rendering Path
developers.google.com/web/fundamentals/performance/critical-re
ndering-path/
How browsers work internally - Tali Garsiel - Front-Trends 2012
vimeo.com/44182484
How Browsers Work: Behind the scenes of modern web browsers
html5rocks.com/en/tutorials/internals/howbrowserswork
Slide 119
Slide 119 text
OBRIGADA :)
speakerdeck.com/anabastos
anabastos.me
github.com/anabastos
@naluhh
@anapbastos