Navegadores por de baixo dos panos - Ana Luiza Bastos

ANA LUIZA BASTOS
github.com/anabastos
@naluhh
@anapbastos
Software Developer na Quanto e
cientista da computação pela
PUC-SP
anabastos.me

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

NAVEGADORES POR DE
BAIXO DOS PANOS

Estrutura high level do navegador
Fluxo renderização de paginas web
Otimizações de critical render path

Apresentar o conteúdo requisitado de
um servidor de acordo com a
especificação do HTML CSS(W3C) e
servindo em uma janelinha

COMPONENTES PRINCIPAIS DO
NAVEGADOR

USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JS
INTERPRETER
UI BACKEND

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)

Parsear o URL(procolo, dominio)
Request DNS(anabastos.me => 63.245.208.161)
Abre uma conexão TCP
Envia uma requisição HTTP

SERVERZINHO
HTTP/1.1 200 OK
Content-Type: text/html RESPONSE

SERVERZINHO
HTTP/1.1 200 OK
Content-Type: text/css RESPONSE

O conteúdo requisitado é carregado em
pequenos chunks.

style.css index.html
dog.png britneySpears-
toxic.mp3
?????

h1 [] [ text “Olá mundo”]
p [ class =”alert”] [ text “tudo bem?”]<h1>Olá</h1>
<img src=”dog.png”>
p [ class =”alert”] [ text “tudo bem?”]h1 {
color: red;
}

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)
<html><head></head>
<body>
<h1>Olá</h1>
<p>tudo bem?</p>
</body>
</html>

PARSER
Construção da árvore de renderização

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

GRAMMARS
REGRAS DE SYNTAX QUE O DOCUMENTO DEVE SEGUIR DE
ACORDO COM A LINGUAGEM
TODA LINGUAGEM TEM UMA GRAMATICA
DETERMINISTICA(VOCABULARIO)
ISSO SE CHAMA “CONTEXT FREE GRAMMAR”

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”.

CHARACTERS(UTF-8)
<html><head>...</head> <body> <h1>Olá
Intercon</h1>
<p>tudo bem?</p></body></html>
CONSTRUÇÅO DE
ÁRVORE
TOKENIZAÇÅO
ANALISE LEXICA
ANALISE SINTATICA
{PARSER

ANALISE LEXICA
(SE O VOCABULARIO FAZ SENTIDO)
ANALISE SINTATICA
(SE FAZ SENTIDO)
Oi
Ash87h12d
Oi tudo bom?
? oi tudo

ANALISE LEXICA
Com as regras da gramática quebra o
código em tokens internamente que
definem suas propriedades e regras.

Eu vou no intercon
Pronome Verbo Contração Substantivo

Dentro do HTML tenho inicio de tags, fim de
tags, nomes de tributos e valores de
atributos

<body>Hello</body>
startTag Text endTag

Eu vou no intercon <body>Hello</body>
HTML
BODY
‘Hello’
?

p [ class =”alert”] [ text “tudo bem?”]<h1>Olá</h1>
<img src=”dog.png”>
<h1>
</h1>
l
á
StartTag: h1
EndTag: h1
Character Character
Character
O
TOKENS
<img>
ImageTag

<htm>
span { clor: #FFFF }
consolr.log

Esses tokens são enviados para o construtor da
árvore que os reconhece e monta a nossa DOM.

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

HTMLHtmlElement
HTMLBodyElement
HTMLHeaderElement
HTMLHeadElement
Olá
<h1>
</h1>
l
á
O
<img>
HTMLImageElement

p [ class =”alert”] [ text “tudo bem?”]
<div>
<h1>Olá</h1>
<div>
<img src=”dog1.png”>
<img src=”dog2.png”>
</div>
</div>

HTMLHtmlElement
HTMLBodyElement HTMLHeadElement
HTMLHeaderElement
Olá
HTMLDivElement
HTMLImageElement
HTMLDivElement
HTMLImageElement

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.

BYTES
CHARACTERS
CONSTRUÇÅO DE
ÁRVORE
TOKENIZAÇÅO

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

“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.

p [ class =”alert”] [ text “tudo bem?”]
h1 {
color: red
}
CSSStyleElement
CSSRule
Selectors
h1
Declaration
Color red

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.

BYTES
CHARACTERS
CONSTRUÇÅO DE
ÁRVORE
TOKENIZAÇÅO
JAVASCRIPT
CSS

Com a DOM e a CSSOM juntos o navegador consegue
criar a árvore de renderização.
O navegador pinta cada nó da pagina.
Todo esse processo toma tempo e pode impactar na
performance da pagina web.

DOM
CSSDom
Render
Tree
ATTACHMENT

BODY
IMGH1
Color: Red;
HEAD
HTML
RENDER TREE

LAYOUT / REFLOW
Layout é o processo recursivo que começa da raiz da
arvore(<html>) 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.

BODY
IMGH1
Color: Red;
HEAD
HTML
RENDER TREE
Posição: (0,0)
Dimensão: Viewport
Dimensão: Block

PAINTING
A camada UI Backend tem o papel de atravessar cada
elemento da render tree desenhando usando toda a UI da
página.

BYTES
CHARACTERS
CONSTRUÇÅO DE
ÁRVORE
TOKENIZAÇÅO
JAVASCRIPT

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.

Para melhorar a experiencia do usuario 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

Série de eventos envolvendo
baixar resources html css e
scripts, processar e renderizar o
primeiro pixel na tela.

Se a pagina 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

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

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.

Digamos que você tem um arquivo Javascript:
<script src="test.js"></script>
Esse script também é bloqueante na renderização do navegador
pois aguarda até que o recurso seja retornado.

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.

Minimizar o tamanho dos bytes de
resources críticos pode reduzir o
overhead no processo de
renderização

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.

Diminuir o tamanho do
código de bibliotecas

React -> Preact
Ramda -> Rambda
Lodash -> UnderWater
Immutable -> Immutable-Light

Diminuir o tamanho
dos pacotes a serem
carregados

SplitChunksPlugin
Separa código que é da aplicação e o que é utilitário
Listando bibliotecas como “vendor” faz com que se crie um
arquivo individual que o browser consegue cachear o
conteúdo com mais facilidade.

Pra lidar com código
bloqueante
Javascript...

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.

/home
/about
/contact
Pagina Inicial
() => import('./About')
() => import('./Contact)

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');

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

OBRIGADA :)
speakerdeck.com/anabastos
anabastos.me
github.com/anabastos
@naluhh
@anapbastos

Navegadores por de baixo dos panos - Ana Luiza Bastos

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Navegadores por de baixo dos panos - Ana Luiza Bastos

Semelhante a Navegadores por de baixo dos panos - Ana Luiza Bastos (20)

Mais de iMasters

Mais de iMasters (20)

Navegadores por de baixo dos panos - Ana Luiza Bastos